Inserir Widget "Cliques rápidos"
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Inserir Widget "Cliques rápidos"
Detalhes da questão
Endereço do fórum: http://www.gospelbook.net/
Versão do fórum: PhpBB3
Descrição
Com este código consegui criar um Widget de Acesso Rapido, só que gostaria de saber como faço para deixar o TITULO DA DIVISÃO de forma RETRATIL?
- Código:
<br /><span bold;"="" font-weight:="" style="font-weight: bold; color: <br /><span style="><span style="color: rgb(0, 51, 255);"><span style="font-size: 14px;">GOSPEL BOOK</span></span></span><br /><span style="margin: 0pt 0px 0pt 15px; display: block;"><span style="font-size: 13px;"><a href="/f36-">Comunicados</a><br /><a href="/f60-">Navegando</a><br /><a href="/f44-">Doações</a><br /><a href="/f52-">Campanhas</a></span><br /></span> <br /><span bold;"="" font-weight:="" style="font-weight: bold; color: <br /><span style="><span style="color: rgb(0, 51, 255);"><span style="font-size: 14px;">MEMBROS</span></span></span><br /><span style="margin: 0pt 0px 0pt 15px; display: block;"><span style="font-size: 13px;"><a href="/f54-">Apresente-se</a><br /><a href="/f35-">Pedidos de Livro</a><br /><a href="/f43-">Dicas e Informações</a><br /><a href="/f28-">Agradecimentos</a><br /><a href="/f55-">Sugestões!</a><br /><a href="/f50-">Dúvidas?</a><br /><a href="/f37-">Reclame Aqui!</a><br /><a href="/f39-">Link Quebrado</a></span><br /></span> <br /><span bold;"="" font-weight:="" style="font-weight: bold; color: <br /><span style="><span style="color: rgb(0, 51, 255);"><span style="font-size: 14px;"></span>
Última edição por dms em 02.05.16 15:29, editado 1 vez(es)
Re: Inserir Widget "Cliques rápidos"
Olá amigo!
Troque por este:
Veja se gosta.
Atenciosamente While.
Troque por este:
- Código:
<style>.wid:hover {background-color: white; } .wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; background-color: #660000; opacity:1.5px; font-size: 11px; letter-spacing: 0px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style> <script>
jQuery(function () {
jQuery('#menu1').hide();
jQuery('#botaomenu1').click(function () {
jQuery('#menu1').toggle('slow');
});
</script>
<div class="sidebar">
<table valign="relative">
<tbody>
<tr>
<td>
<div style="width: 230px; padding:10px; height: 100%; background-color: #000; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
<br />
<div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #ffffff; letter-spacing:1px; padding:1px; text-align: center; ">
</div><br />
<div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #FFFFFF; letter-spacing:1px; padding:1px; text-align: center; ">
<strong></strong>
</div><br />
<div class="wid" id="botaomenu1">
<a href="#_" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">GOSPEL BOOK</span></span></a>
</div>
<div id="menu1">
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f36-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Comunidados</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f60-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Navegando</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f44-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Doações</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f52-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Campanhas</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f54-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Apresente-se</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f35-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Pedidos de Livro</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f43-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Dicas e Informações</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f39-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Link Quebrado</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f28-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Agradecimentos</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f55-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Sugestões!</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f37-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Reclame Aqui!</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a href="http://www.gospelbook.net/f50-" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Dúvidas?</span></span></a>
</div>
</div>
<p>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Veja se gosta.
Atenciosamente While.
Re: Inserir Widget "Cliques rápidos"
Mano, ficou muito da hora, mas não ficou adequado ao padrão do meu site. Digo em relação a cor vermelha. Pois meu site é azul. E outra o os nomes não ficaram alinhados a esquerda. E outra, o nome Gospel book é um titulo de divisão, assim como Membros, ou seja os outros é para estarem inseridos nesses dois, de maneira correspondente. Ah e outra mais importante, quero deixar esses dois titulos de divisao de maneira retratil.
Re: Inserir Widget "Cliques rápidos"
Certo, Troque o codigo por este:
Atenciosamente While.
- Código:
<style>.wid:hover {background-color: white; } .wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; background-color: blue; opacity:1.5px; font-size: 11px; letter-spacing: 0px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style> <script>
jQuery(function () {
jQuery('#menu1, #menu2').hide();
jQuery('#botaomenu1').click(function () {
jQuery('#menu1').toggle('slow');
});
jQuery('#botaomenu2').click(function () {
jQuery('#menu2').toggle('slow');
});
</script>
<div class="sidebar">
<table valign="relative">
<tbody>
<tr>
<td>
<div style="width: 230px; padding:10px; height: 100%; background-color: write; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
<div id="botaomenu1" class="wid">
<a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">GOSPEL BOOK</span></span></a>
</div>
<br />
<div id="menu1">
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f36-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Comunidados</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f60-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Navegando</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f44-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Doações</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f52-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Campanhas</span></span></a>
</div>
<p>
</p>
<br />
<div id="botaomenu2" class="wid">
<a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Membros</span></span></a>
</div>
<p>
</p>
<br />
<div id="menu2">
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f54-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Apresente-se</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f35-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Pedidos de Livro</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f43-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Dicas e Informações</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f39-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Link Quebrado</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f28-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Agradecimentos</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f55-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Sugestões!</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f37-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Reclame Aqui!</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f50-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Dúvidas?</span></span></a>
</div>
</div>
<p>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Atenciosamente While.
Re: Inserir Widget "Cliques rápidos"
Querido, olha desde ja quero agradecer seu tempo em me ajudar, mas não ficou retratil (esconder e aparecer) os titulos de divisão, Gospel Book e Membros. Como faço?
Ah e acharia melhor se não tivesse os quadrados azul, pode deixar sem eles mesmo.
Ah e acharia melhor se não tivesse os quadrados azul, pode deixar sem eles mesmo.
Re: Inserir Widget "Cliques rápidos"
Olá amigo, é que não há forma de esconder os titulos , se é que me entende... o que pude fazer foi separa-los dos demais... sobre retirar os quadros, quer que tire de todos?
se sim, troque o codigo por esse:
OBS: só deixei dos titulos com fundo, mas se quiser retirar também só dizer.
Atenciosamente While.
se sim, troque o codigo por esse:
- Código:
<style>.widbotao {background:blue;-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear;opacity:1.5px; font-size: 11px; letter-spacing: 0px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px;}.wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear;opacity:1.5px; font-size: 11px; letter-spacing: 0px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style> <script>
jQuery(function () {
jQuery('#menu1, #menu2').hide();
jQuery('#botaomenu1').click(function () {
jQuery('#menu1').toggle('slow');
});
jQuery('#botaomenu2').click(function () {
jQuery('#menu2').toggle('slow');
});
</script>
<div class="sidebar">
<table valign="relative">
<tbody>
<tr>
<td>
<div style="width: 230px; padding:10px; height: 100%; background-color: write; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
<div id="botaomenu1" class="widbotao">
<a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">GOSPEL BOOK</span></span></a>
</div>
<br />
<div id="menu1">
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f36-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Comunidados</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f60-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Navegando</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f44-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Doações</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f52-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Campanhas</span></span></a>
</div>
<p>
</p>
<br />
<div id="botaomenu2" class="widbotao">
<a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Membros</span></span></a>
</div>
<p>
</p>
<br />
<div id="menu2">
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f54-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Apresente-se</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f35-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Pedidos de Livro</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f43-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Dicas e Informações</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f39-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Link Quebrado</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f28-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Agradecimentos</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f55-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Sugestões!</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f37-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Reclame Aqui!</span></span></a>
</div>
<p>
</p>
<div class="wid">
<a class="postlink" href="http://www.gospelbook.net/f50-"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Dúvidas?</span></span></a>
</div>
</div>
<p>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
OBS: só deixei dos titulos com fundo, mas se quiser retirar também só dizer.
Atenciosamente While.
Re: Inserir Widget "Cliques rápidos"
Em relação a retratil, eu me refiro, ao Acesso Rapido aqui msm do FDF, onde tem Forumeiros e Voce e quando vc clica aparece as outras opções. Entendeu mano?
Re: Inserir Widget "Cliques rápidos"
Olá Amigo, Entendi sim! Obrigado pela paciência.
Troque o codigo por este:
Atenciosamente While.
Troque o codigo por este:
- Código:
<script type="text/javascript" id="MenuShiftactif">
function Mostrar(objeto) {
var id = objeto.id;
id = id.replace('_m', '');
var indice = document.getElementById(id + '_e');
var menu = document.getElementById('menu_' + id);
menu.style.display = 'block';
objeto.style.display = 'none';
indice.style.display = 'block'
}
function Esconder(objeto) {
var id = objeto.id;
id = id.replace('_e', '');
var indice = document.getElementById(id + '_m');
var menu = document.getElementById('menu_' + id);
menu.style.display = 'none';
objeto.style.display = 'none';
indice.style.display = 'block'
}</script> <style type="text/css">
ul.menuAll, div#int_menu li {
list-style-type: none !important;
}
ul.menuAll {
padding-left: 8px !important;
}
ul.menuAll li {
border-left: 3px solid #7BB92B;
}
ul.menuAll li a {
margin-left: 5px;
}
p.ativo {
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.78);
}
div#int_menu .titles {
cursor: pointer;
border-bottom: 1px solid #009AE1;
transition: all 0.25s ease-out 0s;
}
div#int_menu .titles:hover {
cursor: pointer;
border-bottom: 2px solid #009AE1;
transition: all 0.25s ease-out 0s;
}
</style>
<div id="int_menu">
<li>
<p id="1_m" class="titles" onclick="Mostrar(this);">
Gospel Book
</p>
<p id="1_e" onclick="Esconder(this);" style="display:none" class="ativo">
Gospel Book
</p>
<ul id="menu_1" class="menuAll" style="display:none">
<li>
<a href="/f36-"> Comunicados</a>
</li>
<li>
<a href="/f60-"> Navegando</a>
</li>
<li>
<a href="/f44-"> Doações</a>
</li>
<li>
<a href="/f52-"> Campanhas</a>
</li>
</ul>
<p onclick="Mostrar(this);" class="titles" id="2_m">
Membros
</p>
<p class="ativo" style="display:none" onclick="Esconder(this);" id="2_e">
Membros
</p>
<ul style="display:none" class="menuAll" id="menu_2">
<li>
<a href="/f54"> Apresente-se</a>
</li>
<li>
<a href="/f35-"> Pedidos de Livro</a>
</li>
<li>
<a href="/f43-"> Dicas e Informações</a>
</li>
<li>
<a href="/f38-"> Agradecimentos</a>
</li>
<li>
<a href="/f55-"> Sugestões!</a>
</li>
<li>
<a href="/f50-">Dúvidas?</a>
</li>
<li>
<a href="/f37-">Reclame Aqui!</a>
</li>
<li>
<a href="/f39-">Link Quebrado</a>
</li>
</ul>
</li>
</div>
Atenciosamente While.
Re: Inserir Widget "Cliques rápidos"
while, muito obrigado amigo. Cara vlw msm pela ajuda, deu certinho agora.
Mais uma vez obrigradoooooo.
Podem fechar!
Mais uma vez obrigradoooooo.
Podem fechar!
Re: Inserir Widget "Cliques rápidos"
Espera...
While, tem algo que agora queria que me ensinasse e não que fizesse.
Me ensina onde mudo a cor da fonte e o tipo da fonte, please?
While, tem algo que agora queria que me ensinasse e não que fizesse.
Me ensina onde mudo a cor da fonte e o tipo da fonte, please?
Re: Inserir Widget "Cliques rápidos"
Olá, é claro amigo!
Mas, você deve adicionar essa propriedade, pois eu não coloquei no código.
Seguinte, você vai no código que lhe enviei, e procure por : div#int_menu .titles
Após encontra-la, você adicione essas propriedades, entre o { e o } dessa classe.
font-size para o tamanho da fonte.
font-family para a fonte do texto.
color para a cor do texto.
Exemplo de como ficaria:
Isto ... para o titulo (membros e gospel book)
Para os demais é o mesmo procedimento , porém com essa classe:
ul.menuAll li a
Entendeu amigo?
Atenciosamente While.
Mas, você deve adicionar essa propriedade, pois eu não coloquei no código.
Seguinte, você vai no código que lhe enviei, e procure por : div#int_menu .titles
Após encontra-la, você adicione essas propriedades, entre o { e o } dessa classe.
font-size para o tamanho da fonte.
font-family para a fonte do texto.
color para a cor do texto.
Exemplo de como ficaria:
- Código:
div#int_menu .titles {font-size:15px;font-family:sans-serif;color:blue;}
Isto ... para o titulo (membros e gospel book)
Para os demais é o mesmo procedimento , porém com essa classe:
ul.menuAll li a
Entendeu amigo?
Atenciosamente While.
Re: Inserir Widget "Cliques rápidos"
Sim while, deu certo, perfeito, mais uma vez obrigado, vc é 10, muito atencioso!!!
Re: Inserir Widget "Cliques rápidos"
Se poder ajudar neste tópico tbm... é a mesma situação que a minha... em relação a uma ferramenta de moderação....
https://ajuda.forumeiros.com/t104868-duvida-acoes-de-moderacao-com-menu-drop-down
https://ajuda.forumeiros.com/t104868-duvida-acoes-de-moderacao-com-menu-drop-down
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos