CSS

Menu CSS com infinitos Submenus

Publicado por antlou em 12/04/2015

Este menu CSS puro de infinitos submenus faz sómente uso de seletores CSS e só usa 10 regras CSS tornando-o extremamente leve e funcional.
O exemplo em baixo exposto só apresenta 3 submenus. Para acrescentar mais submenus basta modificar o ficheiro html.

Resultado:

Menu 1
- Menu 1.1
- Menu 1.2
  - Menu 1.2.1
  - Menu 1.2.2
    - Menu 1.2.2.1
    - Menu 1.2.2.2
Menu 2
Menu 3

Com isso dito, este menu poderá trabalhar em Internet Explorer, Firefox, Safari, Opera...

menu_infinito.html


    <html>
    <head>
    <!--
    ***************************
    * Menu_css_infinito                                      
    * Author:antlou                            
    * Version:1.0                              
    * Date:14/03/2014                          
    **************************
    -->
    <style type="text/css">
        #nivel, .nivel, 
        #nivel .nivel li {
            margin:0px; 
            padding:0px;
            }
        #nivel li {
            float:left; 
            display:inline; 
            cursor:pointer; 
            list-style:none; 
            padding:0px 10px 0px 10px; 
            border:1px #000 solid; 
            position:relative;
            background:white;
            }
        #nivel li ul.first {
            left:-1px; 
            top:100%;
            }            
        li, li a {
            color:#000; 
            text-decoration:none;
            }        
        #nivel .nivel li {
            width:100%; 
            text-indent:10px; 
            line-height:30px;
            margin-right:10px; 
            border-top:1px #000 solid; 
            border-bottom:1px #000 solid; 
            border-left:none;
            border-right:none; 
            background:#fff;
            }
        #nivel li a {
            display:block; 
            width:inherit; 
            height:inherit;
            }    
        ul.nivel { display:none; }
        #nivel li:hover > a, 
        #nivel li:hover {
            color:#fff; 
            background:#7396b9; 
            }
        li:hover > .nivel {
            display:block; 
            position:absolute; 
            width:200px; 
            top:-2px; 
            left:50%; 
            z-index:1000;
            border:1px #000 solid; 
            } 
        li:hover { 
            position:relative;
            z-index:2000; 
            } 
            
    </style>
    </head>
    <body>
        <ul id="nivel">
        <li>Menu 1
            <ul class="nivel first">
            <li>Menu 1.1</li>
            <li>Menu 1.2
                <ul class="nivel">
                <li>Menu 1.2.1</li>
                <li>Menu 1.2.2
                    <ul class="nivel">
                    <li>Menu 1.2.2.1</li>
                    <li>Menu 1.2.2.2</li>
                    </ul>
                </li>
                </ul>            
            </li>
            </ul>
        </li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        </ul>        
    </body>
    </html>

É certo que a visualmente não está atrativo, mas acrescentando no css background e mais algumas propriedades tudo ficará melhor.
Experimentem!

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 18 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.