Menu com Subsess�es Laterais

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..

Menu com Subsess�es Laterais

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!

Artigos relacionados