Menu Vertical Desplegable Con CSS

Tienes muchas secciones en tu web y no te alcansa el espacio para poner el link de las demás secciones? Es uno de los inconvenientes que pasamos los administradores de un sitio web, asi que la mayoría optamos por crear otra navegación, osea otro menu pero en otra parte de nuestra web, puede ser en la sidebar. En este post te presentamos un menu vertical desplegable que lo puedes instalar fácilmente en tu web.


 
Vamos a instalar nuestro Menu en nuestro sitio.

 

Insertamos el siguiente código en el “Head” de tu web (<head> </head>):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
/*
<![CDATA[
*/

ul.sub-level {    display: none;}li:hover .sub-level {    background: #648BBE;    border: #fff solid;    border-width: 1px;    display: block;    position: absolute;    left: 75px;    top: 5px;}ul.sub-level li {    border: none;    float:left;    width:150px;}

#navigation {font-size:0.75em; width:150px;}#navigation ul {margin:0px; padding:0px;}#navigation li {list-style: none;}
ul.top-level {background:#648BBE;}ul.top-level li { border-bottom: #fff solid; border-top: #fff solid; border-width: 1px;}
#navigation a { color: #fff; cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%;}#navigation a:hover{ text-decoration:underline;}
#navigation li:hover { background: #D64843; position: relative;}
 /*
]]>
*/

</style>

 

  • Puedes editar los colores del menu cambiando lo que esta de color, el código de colores lo puedes buscar aqui

 

Ahora insertamos el siguiente código donde querramos que aparesca el menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="navigation">  
 <ul class="top-level">  
  <li>  <a href="#">Título</a>       <ul class="sub-level">                <li>                    <a href="#">Sub Menu</a>                </li>
                <li>                    <a href="#">Sub Menu</a>                </li>
                <li>                    <a href="#">Sub Menu</a>                </li>
                <li>                    <a href="#">Sub Menu</a>                </li>            </ul>        </li>
        <li>            <a href="#">Título</a>        </li>
        <li>            <a href="#">Título</a>        </li>
        <li>            <a href="#">Título</a>            <ul class="sub-level">                <li>                    <a href="#">Sub Menu</a>                </li>
                <li>                    <a href="#">Sub Menu</a>                </li>            </ul>        </li>
        <li>            <a href="#">Título</a>            <ul class="sub-level">                <li>                    <a href="#">Sub Menu</a>                </li>
                <li>                    <a href="#">Sub Menu</a>                </li>
                <li>                    <a href="#">Sub Menu</a>                </li>            </ul>        </li>    </ul>
</div>

  • Edita las partes textuales
  • A cambio de # deberá ir el link a donde se dirigirá al hacer clic
Resultado: Puedes ver funcionando el recurso AQUI.

Comentarios Usando Facebook


Menu Vertical Desplegable Con CSS

Los comentarios de esta publicación están cerrados. Si tienes consultas te invitamos a plantearlo en el FORO DE SOPORTE. Si quieres seguir la discusión, debatir, criticar, sugerir o expandir el tema te invitamos a hacerlo tu propio blog, en twitter o donde puedas publicar. No olvides enlazar a este post para que sigamos la conversación y se genere un trackback.