Menu com Subsessões Laterais

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Olá, neste artigo quis demostrar como criar um menu com subsessões laterais, criei um exemplo simples que pode ser utilizado como exemplo em todas os serviços desta necessidade. Espero que ajude em seus projetos!

Vou apresentar neste POST uma aplicação muito procurada pelos desenvolvedores para WebSites.

Como sempre vou tentar ser o mais claro e objetivo possível.

 

O objetivo é apresentar um menu com subsessões laterias,  vamos utilizar HTML, CSS e JavaScript.

Vamos ao Post

 

Veja Abaixo o Link para o MENU:

Modelo de Menu com Subsessão

 

Primeiro vamos Criar o Código do Menu e para isto vamos utilizar o  HTML.

 
Código HTML :
<ul id="nav">
<li><a href="#">Parte 1</a></li>
<li><a href="#">Parte 2</a>
    <ul>
        <li><a href="#">Parte 2-k</a></li>
        <li><a href="#">Parte 2-l</a></li>
        <li><a href="#">Parte 2-m</a></li>
    </ul>
</li>
<li><a href="#">Parte 3</a>
    <ul>
        <li><a href="#">Parte 3-n</a></li>
        <li><a href="#">Parte 3-o</a></li>
        <li><a href="#">Parte 3-p</a></li>
        <li><a href="#">Parte 3-q</a></li>
        <li><a href="#">Parte 3-r</a></li>
        <li><a href="#">Parte 3-r</a></li>
    </ul>
    </li>

</ul>

 
Percebam que para alguns itens do menu existe uma SubSessão UL com novos dados,

Código: CSS

<style type="text/css">

ul{

    margin:0;
    padding:0;
    list-style:none;
    width:150px;
    border-bottom:1px solid #588EE0;

}

ul li
{
      position:relative;
}


li ul
{

    position:absolute;
    left:149px;
    top:0;
    display:none;
    }

ul li a
{
    display:block;
    text-decoration:none;
    color #060864;
    background:#B9F3F5;
    padding:5px;
    border:1px solid #588EE0;
    border-bottom:0;
}

/*correção \*/

*html ul li {float:left;}
*html ul li a{height:1%;}
/* fim da correção*/

li:hover ul, li.over ul {

    display:block;

    }

</style>

 

Código JAVASCRIPT

<head>
<script language="JavaScript" type="text/JavaScript">
<!–

    startList = function()
    {
        if (document.all&&document.getElementById)
        {
            navRoot = document.getElementById("nav");
            for (i = 0; i<navRoot.childNodes.length; i++)
            {
                node = navRoot.childNodes[i];
                    if (node.nodeName=="LI")
                    {
                        node.onmouseover=function()
                        {
                            this.className+=" over";
                        }
                        node.onmouseout=function()
                        {
                            this.className=this.className.replace(" over", "");
                        }  
                    }
            }
        }
    }
    window.onload=startList;
//–>

</script>
</head>
 

Lembrando que o Código JAvascript precisa de uma atenção maior por ser Case Sensitive.
 

Espero que possam aproveitar.. 
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?