Css3

Aquí estan los menús css

(debeis colocar ustedes las imagenes)

Menús Horizontales

__________________

Menú(Aqua Bubble Wrap)

Va encima de la pagina

<div class="menu bubplastic horizontal aqua"> <ul> <li class="highlight"><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> </ul> <br class="clearit" /> </div>  

en css style tags

  .clearit { margin: 0; padding: 0; height: 0; clear: both; } /* BUBBLE PLASTIC HORIZONTAL MENU */ .bubplastic.horizontal { width: 100%; height: 27px; margin: 0; padding: 0; background: #000000 url(images/bg-bubplastic.gif) top left repeat-x; } .bubplastic.horizontal ul { list-style: none; margin: 0; padding: 0; } .bubplastic.horizontal ul li { float: left; margin: 0; padding: 0; background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat; } .bubplastic.horizontal ul li a { display: block; height: 27px; padding-left: 35px; float: left; text-transform: uppercase; font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif; font-size: 70%; color: #FFFFFF; text-decoration: none; } .bubplastic.horizontal ul li a span.menu_ar { display: block; float: left; height: 22px; padding-top: 5px; padding-right: 35px; background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat; cursor: pointer; } /* END BUBBLE PLASTIC HORIZONTAL MENU */ /* BUBBLE PLASTIC VERTICAL MENU */ .bubplastic.vertical { width: 250px; margin: 0; padding: 0; display: block; } .bubplastic.vertical ul { display: block; list-style: none; margin: 0; padding: 0; } .bubplastic.vertical ul li { display: block; float: left; width: 100%; margin: 0; padding: 0; background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat; } .bubplastic.vertical ul li a { display: block; margin: 0; width: 100%; padding-left: 35px; text-transform: uppercase; font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif; font-size: 70%; color: #FFFFFF; text-decoration: none; background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat; } .bubplastic.vertical ul li a span.menu_ar { display: block; margin: 0; width: 100%; height: 22px; padding-top: 5px; padding-right: 35px; background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat; cursor: pointer; } /* END BUBBLE PLASTIC VERTICAL MENU */ /* AQUA HOVER */ .bubplastic.aqua ul li a:hover, .bubplastic.aqua ul li.highlight a { background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat; } .bubplastic.aqua ul li a:hover span.menu_ar, .bubplastic.aqua ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat; } /* BLUE HOVER */ .bubplastic.blue ul li a:hover, .bubplastic.blue ul li.highlight a { background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat; } .bubplastic.blue ul li a:hover span.menu_ar, .bubplastic.blue ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat; } /* GRAY HOVER */ .bubplastic.gray ul li a:hover, .bubplastic.gray ul li.highlight a { background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat; } .bubplastic.gray ul li a:hover span.menu_ar, .bubplastic.gray ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat; } /* LIME HOVER */ .bubplastic.lime ul li a:hover, .bubplastic.lime ul li.highlight a { background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat; } .bubplastic.lime ul li a:hover span.menu_ar, .bubplastic.lime ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat; } /* ORANGE HOVER */ .bubplastic.orange ul li a:hover, .bubplastic.orange ul li.highlight a { background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat; } .bubplastic.orange ul li a:hover span.menu_ar, .bubplastic.orange ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat; } /* PINK HOVER */ .bubplastic.pink ul li a:hover, .bubplastic.pink ul li.highlight a { background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat; } .bubplastic.pink ul li a:hover span.menu_ar, .bubplastic.pink ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat; } /* PURPLE HOVER */ .bubplastic.purple ul li a:hover, .bubplastic.purple ul li.highlight a { background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat; } .bubplastic.purple ul li a:hover span.menu_ar, .bubplastic.purple ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat; } /* RED HOVER */ .bubplastic.red ul li a:hover, .bubplastic.red ul li.highlight a { background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat; } .bubplastic.red ul li a:hover span.menu_ar, .bubplastic.red ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat; } #test li { display: block; border: solid 1px red; }

vista previa




Menú(Blue Sprite)

Va encima de la pagina

<ul id="menu"> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> </ul>

en css style tags

ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:30px; font-size:12px; font-weight:bold; background:transparent url(images/nav_bg.png) repeat-x top left; font-family:Arial, Helvetica, sans-serif; border-bottom:1px solid #000000; border-top:1px solid #000000; } ul#menu li { display:block; float:left; margin:0; padding:0; } ul#menu li a { display:block; float:left; color:#999999; text-decoration:none; font-weight:bold; padding:8px 20px 0 20px; } ul#menu li a:hover { color:#FFFFFF; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat; } ul#menu li a.current { display:inline; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat; float:left; margin:0; }  

Vista previa




Menú verticales
_________________

Menú(Massive Blue)


Va encima de la pagina

<ul id="menu"> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> <li><a href="#" target="_self">sample</a></li> </ul>  

en css style tags

#menu { background: #333; list-style: none; margin: 0; padding: 0; width: 12em; } #menu li { font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; margin: 0; padding: 0; } #menu a { background: #333; border-bottom: 1px solid #393939; color: #ccc; display: block; margin: 0; padding: 8px 12px; text-decoration: none; font-weight:normal; } #menu a:hover { background: #2580a2 url("images/hover.gif") left center no-repeat; color: #fff; padding-bottom: 8px; }  

Vista previa




Menú(Blue Bubble Wrap)

Va encima de la pagina

<div class="menu bubplastic vertical blue"> <ul> <li class="highlight"><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li> </ul> <br class="clearit" /> </div>  
 

en css style tags

.clearit { margin: 0; padding: 0; height: 0; clear: both; } /* BUBBLE PLASTIC HORIZONTAL MENU */ .bubplastic.horizontal { width: 100%; height: 27px; margin: 0; padding: 0; background: #000000 url(images/bg-bubplastic.gif) top left repeat-x; } .bubplastic.horizontal ul { list-style: none; margin: 0; padding: 0; } .bubplastic.horizontal ul li { float: left; margin: 0; padding: 0; background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat; } .bubplastic.horizontal ul li a { display: block; height: 27px; padding-left: 35px; float: left; text-transform: uppercase; font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif; font-size: 70%; color: #FFFFFF; text-decoration: none; } .bubplastic.horizontal ul li a span.menu_ar { display: block; float: left; height: 22px; padding-top: 5px; padding-right: 35px; background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat; cursor: pointer; } /* END BUBBLE PLASTIC HORIZONTAL MENU */ /* BUBBLE PLASTIC VERTICAL MENU */ .bubplastic.vertical { width: 125px; margin: 0px; padding: 0px; display: block; } .bubplastic.vertical ul { display: block; list-style: none; margin: 0; padding: 0; } .bubplastic.vertical ul li { display: block; float: left; width: 100%; margin: 0; padding: 0; background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat; } .bubplastic.vertical ul li a { display: block; margin: 0; width: 100%; padding-left: 35px; text-transform: uppercase; font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif; font-size: 70%; color: #FFFFFF; text-decoration: none; background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat; } .bubplastic.vertical ul li a span.menu_ar { display: block; margin: 0; width: 100%; height: 22px; padding-top: 5px; padding-right: 35px; background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat; cursor: pointer; } /* END BUBBLE PLASTIC VERTICAL MENU */ /* AQUA HOVER */ .bubplastic.aqua ul li a:hover, .bubplastic.aqua ul li.highlight a { background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat; } .bubplastic.aqua ul li a:hover span.menu_ar, .bubplastic.aqua ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat; } /* BLUE HOVER */ .bubplastic.blue ul li a:hover, .bubplastic.blue ul li.highlight a { background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat; } .bubplastic.blue ul li a:hover span.menu_ar, .bubplastic.blue ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat; } /* GRAY HOVER */ .bubplastic.gray ul li a:hover, .bubplastic.gray ul li.highlight a { background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat; } .bubplastic.gray ul li a:hover span.menu_ar, .bubplastic.gray ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat; } /* LIME HOVER */ .bubplastic.lime ul li a:hover, .bubplastic.lime ul li.highlight a { background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat; } .bubplastic.lime ul li a:hover span.menu_ar, .bubplastic.lime ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat; } /* ORANGE HOVER */ .bubplastic.orange ul li a:hover, .bubplastic.orange ul li.highlight a { background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat; } .bubplastic.orange ul li a:hover span.menu_ar, .bubplastic.orange ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat; } /* PINK HOVER */ .bubplastic.pink ul li a:hover, .bubplastic.pink ul li.highlight a { background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat; } .bubplastic.pink ul li a:hover span.menu_ar, .bubplastic.pink ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat; } /* PURPLE HOVER */ .bubplastic.purple ul li a:hover, .bubplastic.purple ul li.highlight a { background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat; } .bubplastic.purple ul li a:hover span.menu_ar, .bubplastic.purple ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat; } /* RED HOVER */ .bubplastic.red ul li a:hover, .bubplastic.red ul li.highlight a { background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat; } .bubplastic.red ul li a:hover span.menu_ar, .bubplastic.red ul li.highlight a span.menu_ar { background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat; }  

Vistra previa