Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

Menu Vertical Dropdown

Você já viu neste artigo, como instalar um Menu Horizontal Dropdown.
Atendendo a sugestão de artigos, hoje vou mostrar como instalar um Menu Dropdown Vertical.


DEMO
Este menu é simples, leve e fácil de instalar.

Vá até o menu “layout” ? Clique em “Adicionar gadget” ? Escolha tipo “HTML/Javascript” e cole o seguinte código lá:


<style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Largura Menu Items */
}
.suckerdiv ul li{
position: relative;
}
/*Sub menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*largura sub menu*/
top: 0;
visibility: hidden;
}
/* estilos dos links */
.suckerdiv ul li a{
display: block;
overflow: auto;
color: black;
text-decoration: none;
background: #fff; /*edite cor */
padding: 1px 5px;
border-bottom: 1px solid #ccc; /*edite borda */
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background-color: #ccc; /*edite cor */
}
.suckerdiv .subfolderstyle{
background: url(http://i43.tinypic.com/fv8xz4.gif) no-repeat center right;
}

/* Holly Hack for IE */
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>

<script type="text/javascript">
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="url-link">Item 1</a></li>
<li><a href="url-link">Item 2</a>
<ul>
<li><a href="url-link">Sub Item 1.1</a></li>
<li><a href="url-link">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="url-link">Item 3</a></li>

<li><a href="url-link">Item 4</a>
<ul>
<li><a href="url-link">Sub Item 2.1</a></li>
<li><a href="url-link">Sub Item 2.2</a>
<ul>
<li><a href="url-link">Sub Item 2.1.1</a></li>
<li><a href="url-link">Sub Item 2.1.2</a></li>
<li><a href="url-link">Sub Item 2.1.3</a></li>
<li><a href="url-link">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="url-link">Item 5</a></li>
</ul>
</div>

Insira os links do seu menu no campo destacado (“url-link“).
Edite largura, cores de background e bordas se preferir.
A imagem seta utilizada no código acima é esta:

Salve-a no seu pc e hospede-a no seu site preferido, ou se preferir, substitua por outra imagem de sua preferência.

Mais fácil que isso…impossível! :p



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

12 Comentários

  1. kamila disse:

    Tem algum jeito dele abrir para a esquerda em vez da direita?

  2. Oi, eu usei esse menu um tempo, depois eu excluí ele. Meu layout não tem mais esse tipo de menu, porém sempre que eu faço backup e utilizo o modelo do layout, esse menu aparece automaticamente.

    Sabes me dizer o porquê? Por causa dele não estou conseguindo fazer menu horizontal =\

    ME SOCORRE, PLEASE!

    • Vanessa disse:

      Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.

  3. mmarujo disse:

    eu adicionei um sub item a um item, porem a seta vermelha aparece no 1º item e não no que adicionei.
    como resolvo?

  4. Oliver disse:

    Cara muito bom esse menu, realmente muito facil de usar, eu estava procurando um a muito tempo, esse foi de grande utilidade! E parabéns pelo site, ele é muito bom!

  5. Leonardo disse:

    Oi, como faço esse menu ser visto da Direita para a Esquerda? Nesse caso o oposto do que você fez.

  6. Marcos Danilo disse:

    Ola o menu fico bom mais agora eu queria saber como eu fasso para deixar ele o tempo toda de uma cor
    por ex em meu blog o fundo desaparecia quando o menu tinha sub menu quiero saber como colocar para ele ficar o tempo todo de uma cor

    responde para:

    marcosdanilosouza_@hotmail.com

  7. ::Clau:: disse:

    @Admin:
    Eu testei no IE8, no Chrome, Opera e Safari e está funcionando perfeitamente.
    Eu acho que no seu caso vc não deve ter editado as larguras.
    Vc deve editar Largura "Menu Items" e largura do "sub menu", de acordo com as medidas da sua sidebar.(Estão marcadas no código na cor azul.

  8. Admin disse:

    Olá Drª! detalhe do erro acima: somente no IE 8.0. Grato!

  9. Admin disse:

    Muito bom o menu! é o que estou precisando… contudo, um probleminha ocorre: quando clico no menu e abre o sub, não dá tempo de acessar os mesmos, pois ao passar o mouse entre um e outro, eles desaparecem… agradeço por uma sugestão!

  10. Žéß?_?T disse:

    Mais uma vez voce acertou em, tou admirado mesmo.
    vou instalar no meu blog. tenho que dar uma organizada no meu menu, e espero que funcione no meu modelo de blog. Obrigado Novamente e parabens pelo blog que vai completar um ano e que essa data se extenda anos e ++ anos.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.