D
devcodep
Gamma
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos! Un aporte sobre como crear un menu con muchos niveles o multi niveles con CSS y Html:
Primero vamos con el CSS
Ahora vamos al HTML, y colocamos donde queramos que aparezca el menu
Esto es un menu con varios niveles, espero que le sirva a mas de uno, y pueden modificar los colores para el menu con css
Cualquier cosa a las ordenes!
DevCodep
Primero vamos con el CSS
HTML:
<style>
#menucompleto
{
margin-top:15px;
}
#menucompleto ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#menucompleto ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#menucompleto ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#menucompleto ul li.menuprincipal
{
background:#ddd;
}
#menucompleto ul li:hover
{
background:#f6f6f6;
}
#menucompleto ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
}
#menucompleto ul ul li
{
float:none;
width:200px;
}
#menucompleto ul ul a
{
line-height:120%;
padding:10px 15px;
}
#menucompleto ul ul ul
{
top:0;
left:100%;
}
#menucompleto ul li:hover > ul
{
display:block;
}
</style>
Ahora vamos al HTML, y colocamos donde queramos que aparezca el menu
HTML:
<nav id="menucompleto">
<ul>
<li class="menuprincipal"><a href="#">IncioMenu</a></li>
<li><a href="#">Categoria 1</a>
<ul>
<li><a href="#">Sub Categoria 1</a></li>
<li><a href="#">Sub Categoria 2</a></li>
<li><a href="#">Sub Categoria 3</a></li>
<li><a href="#">Sub Categoria 4</a>
<ul>
<li><a href="#">Sub Categoria 1</a>
<ul>
<li><a href="#">Sub Sub 1</a></li>
<li><a href="#">Sub Sub 2</a></li>
<li><a href="#">Sub Sub 3</a></li>
<li><a href="#">Sub Sub 4</a></li>
</ul>
</li>
<li><a href="#">Sub Categoria 2</a></li>
</ul>
</li>
<li><a href="#">Sub Categoria 5</a></li>
</ul>
</li>
<li><a href="#">Categoria 2</a>
<ul>
<li><a href="#">Sub Categoria 1</a></li>
<li><a href="#">Sub Categoria 2</a></li>
<li><a href="#">Sub Categoria 3</a></li>
</ul>
</li>
<li><a href="#">Categoria 3</a>
<ul>
<li class="dir"><a href="#">Sub Categoria 1</a></li>
<li class="dir"><a href="#">Sub Categoria 2</a>
<ul>
<li><a href="#">Categoria 1</a></li>
<li><a href="#">Categoria 2</a></li>
<li><a href="#">Categoria 3</a></li>
<li><a href="#">Categoria 4</a></li>
<li><a href="#">Categoria 5</a></li>
</ul>
</li>
<li><a href="#">Sub Categoria 3</a></li>
<li><a href="#">Sub Categoria 4</a></li>
<li><a href="#">Sub Categoria 5</a></li>
</ul>
</li>
<li><a href="#">Categoria 4</a></li>
<li><a href="#">Categoria 5</a></li>
<li><a href="#">Categoria 6</a></li>
<li><a href="#">Categoria 7</a></li>
</ul>
</nav>
Esto es un menu con varios niveles, espero que le sirva a mas de uno, y pueden modificar los colores para el menu con css
Cualquier cosa a las ordenes!
DevCodep