Menu horizontal desplegable Css- Sunrise Gloss ~ Little Loads

este menu totalmente personalizable es genial por sus posibilidades de resultados
para poner este menu en blogger se debe seguir los suiguientes pasos

se va a diseño de HTML y expanden plantilla de artilugios
bede descargar las imagenes al final de la entrada.
luego para busqueda rapida presione Ctrl + f y busque la etiqueta ]]></b:skin>
y encima de ella pon lo siguiente

@charset "utf-8";
/* CSS Document */

body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

Lo que esta en rojo es donde vendra el Url de la imagen correspondiente
cuando lo hagan guarden los cambios
luego valla a elementos de pagina y añada un gadget HTML/javascript
y pegue lo siguiente

<div class="nav-container-outer">
 <img src="nav-bg-l.jpg" alt="" class="float-left" />
 <img src="nav-bg-r.jpg" alt="" class="float-right" />
 <ul id="nav-container" class="nav-container">
 <li><a class="item-primary" href="#">pestaña 1</a>
 </li>

 <li></li>
 <li><a class="item-primary" href="#">pestaña 2</a>

 <ul style="width:150px;">
 <li><a href="#">subpestaña 2.1</a></li>
 <li><a href="#">subpestaña 2.2</a></li>
 <li><a href="#">subpestaña 2.3</a></li>
 <li><a href="#">subpestaña 2.4</a></li>
 <li><a href="#">subpestaña 2.5</a></li>
 </ul></li>

 <li></li>
 <li><a class="item-primary" href="#">pestaña 3</a>

 <ul style="width:150px;">
 <li><a href="#">subpestaña 3.1</a></li>
 <li><a href="#">subpestaña 3.2</a></li>
 <li><a href="#">subpestaña 3.3</a></li>
 </ul></li>

 <li></li>
 <li><a class="item-primary" href="#">pestaña 4</a>

 <ul style="width:150px;">
 <li>categoria 4.1</li>
 <li><a href="#">subpestaña 4.1</a></li>
 <li><a href="#">subpestaña 4.2</a></li>
 <li><a href="#">subpestaña 4.3</a></li>
 <li></li>
 <li>categoria 4.2</li>
 <li><a href="#">subpestaña 4.4</a></li>
 <li><a href="#">subpestaña 4.5</a></li>
 </ul></li>

 <li class="clear"> </li></ul>
</div>

lo que esta en rojo sera donde vendra el url de la imagen correspondiente
lo que esta en Fuchsia es el nombre de las pestaña y subpestañas
lo que esta en azul es donde vendra el url del enlace
lo que esta en azul mas claro es una categoria
lo que esta en verde es el nombre de la categoria
lo que esta en purpura es la divicion de las categorias

si desea poner otra pestaña solo ponga esto antes de <li class="clear"> </li></ul>.

<li><a class="item-primary" href="#">pestaña</a>
</li>

si quiere poner una pestaña con subpestañas ponga esto antes de <li class="clear"> </li></ul>.

<li></li>
 <li><a class="item-primary" href="#">pestaña</a>

 <ul style="width:150px;">
 <li><a href="#">subpestaña</a></li>
 <li><a href="#">subpestaña</a></li>
 <li><a href="#">subpestaña</a></li>
 </ul></li>

si quiere una subpestaña mas solo ponga esto antes de </ul>

<li><a href="#">subpestaña</a></li>

si desea poner una categoria ponga esto antes de la subpestaña que empieza la categoria <li><a href="#">subpestaña</a></li>

<li>categoria</li>

si quiere dividir pestañas con una linea solo ponga esto despues de la subpestaña que va a dividir <li><a href="#">subpestaña</a></li>

<li></li>

listo el resultado se vera haci.

VER EL RESULTADO

Categories: Menus Horizontales

Little Loads

Menu horizontal desplegable Css- Sunrise Gloss

0 comentarios:

Publicar un comentario

Comparte y Sígueme

Total Visitas

Participa Ahora

Sigueme