tinkermaster

Menus Css

menú vertical con subpestañas hecho sólo con CSS: no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.

primero tenemos que colocar este siguiente codigo en Css-code sin stylo tags:

/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}

Edita donde diga [ # y PESTAÑAS ].

Ahora coloca este codigo en donde quieres que aparesca el menu en HTML.

<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>

</ul>
</div>

Edita todo lo que diga URL DEL ENLACE y PESTAÑA.

menú horizontal negro: El autor es Dynamicdrive y está basado en librería jQuery. Es un menú muy elegante puedes ver un ejemplo abajo.

primero tenemos que copiar el siguiente codigo y pegarlo en Texto por abajo de la pagina:

Ahora coloca el siguiente codigo en donde quieres que aparesca el menu en HTML.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a>
<ul>
<li><a href="#">Sub 3.2.1</a></li>
<li><a href="#">Sub 3.2.2</a></li>
<li><a href="#">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="#">Sub 5.1</a></li>
<li><a href="#">Sub 5.2</a></li>
<li><a href="#">Sub 5.3</a></li>
<li><a href="#">Sub 5.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 6</a></li>
</ul>

<br style="clear: left"/>
</div>

Edita donde diga [ # y PESTAÑAS ].

menú desplegable:diseño con menú despegable

menu orizontal verde

para colocarlo en la web colocamos el siguiente codigo en donde quieras que aparesca el menu en HTML:

Menu Horizontal animado:Este menu es muy bueno ya que cuando pasas el cursor sobre el se desplaza lentamente

para colocarlo en la web primero colocamos el siguiente codigo en Css-code sin stylo tags:

#menu-soft {
width:100%;
padding:0;
color:#d9d9d9;
font-family: Century Gothic;
overflow:hidden;
background:#222;
}

#menu-soft ul {
width:940px;
margin:0auto;
}

#menu-soft a {
color:#d9d9d9;
font-weight:normal;
}

#menu-soft ul {
list-style:none;
display:block;
margin:0;
padding:0;
}

#menu-soft li {
float:left;
padding:10px;
display:block;
width:100px;
border-left:1px solid #2d2d2d;
/*Duración de transiciones*/
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
-o-transition:0.7s;
transition: 0.7s;
}

#menu-soft li:hover {
padding-left:50px;
cursor:pointer;
background:#1bb1bb;
}
#menu-soft li:hover a {
color:#fff;
text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222;
}

#menu-soft li span {
font-size:24px;
}

por ultimo colocamos el codigo del menu en donde lo queramos poner en Texto por encima de la pagina o en Texto por abajo o en Fuente HTML.

<div id="menu-soft">
<ul>
<li id="enlace-1"><a href="#"><span>Menu 1</span><br>Descripción 1</br></a></li>
<li id="enlace-2"><a href="#"><span>Menu 2</span><br>Descripción 2</br></a></li>
<li id="enlace-3"><a href="#"><span>Menu 3</span><br>Descripción 3</br></a></li>
<li id="enlace-4"><a href="#"><span>Menu 4</span><br>Descripción 4</br></a></li>
</ul>
</div>

Hoy habia 20 visitantes (25 clics a subpáginas) ¡Aqui en esta página!

tinkermaster

Menus Css