- menus

menus

MENU ESTILO AZUL

EN TEXTO POR ENCIMA PEGAS ESTE CODIGO

EN CSS SIN STYLE PEGAS ESTE

/* -------------------- MAIN BODY STYLES -------------------- */  body {    background-color: #1570a4;    background-image:  none;    background-repeat: no-repeat;    background-position: center top;    font-family: Verdana, Arial, Helvetica, sans-serif;    font-size: 12px;    margin-top: 10px; }  #container {    width: 800px;    margin: auto; }  .windows7 {    display: block;    margin-top: auto;    margin-right: auto;    margin-left: auto; }  h1 {    font-size: 18px;    color: #FFFFFF;    text-transform: uppercase;    letter-spacing: -1px;    margin-bottom: 20px; }  /* -------------------- NAVIGATION #1 -------------------- */  #navigation1 {    height: 50px;    float: left;    width: 800px;    margin-bottom: 20px; }  .nav1 li {    display: block;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button.png);    background-repeat: no-repeat;    float: left; }  .nav1 li a {    display: block;    float: left;    height: 50px;    width: 91px;    text-align: center;    text-decoration: none;    font-size: 12px;    color: #FFFFFF;    line-height: 48px; }  .nav1 li a:hover {    color: #FFFFFF;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button_hover.png);    background-repeat: no-repeat; }  /* -------------------- NAVIGATION #2 -------------------- */  #navigation2 {    height: 50px;    float: left;    width: 800px; }  .nav2 li {    display: block;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button.png);    background-repeat: no-repeat;    float: left; }  .nav2 li a {    display: block;    float: left;    height: 45px;    width: 91px;    text-align: center;    text-decoration: none;    font-size: 12px;    color: #FFFFFF;    padding-top: 5px; }  .nav2 li a:hover {    color: #FFFFFF;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button_hover.png);    background-repeat: no-repeat; }  /* -------------------- NAVIGATION #3 -------------------- */  #navigation3 {    background-image: url(https://img.webme.com/pic/t/team-drakox/navigation_background.png);    background-repeat: repeat-x;    background-position: bottom;    height: 92px;    padding-top: 40px;    width: 100%;    padding-top: 20px;    margin: auto;    clear: both; }  #nav3-container {    width: 800px;    height: 92px;    margin: auto; }  .nav3 li {    display: block;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button.png);    background-repeat: no-repeat;    float: left; }  .nav3 li a {    display: block;    float: left;    height: 50px;    width: 91px;    text-align: center;    text-decoration: none;    font-size: 12px;    color: #FFFFFF;    line-height: 48px; }  .nav3 li a:hover {    color: #FFFFFF;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button_hover.png);    background-repeat: no-repeat; }  /* -------------------- NAVIGATION #4 -------------------- */  #navigation4 {    background-image: url(https://img.webme.com/pic/t/team-drakox/navigation_background.png);    background-repeat: repeat-x;    background-position: bottom;    height: 92px;    padding-top: 40px;    width: 100%;    padding-top: 20px;    margin: auto;    clear: both; }  #nav4-container {    width: 800px;    height: 92px;    margin: auto; }  .nav4 li {    display: block;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button.png);    background-repeat: no-repeat;    float: left; }  .nav4 li a {    display: block;    float: left;    height: 45px;    width: 91px;    text-align: center;    text-decoration: none;    font-size: 12px;    color: #FFFFFF;    padding-top: 5px; }  .nav4 li a:hover {    color: #FFFFFF;    background-image: url(https://img.webme.com/pic/t/team-drakox/nav_button_hover.png);    background-repeat: no-repeat; }

HERMOSO MENU DORADO DESPEGABLE

HOME
Products
Quality
Services
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
Very Long Item
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
Fully Flexible
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title

PARA PONERLO EN TU WEB
CSS SIN STYLE deben quitarle las etiquetas <style>

Nota: si desean usarlo en el ice blue dejar las etiquetas <style>
para posicionar un menu usar este codigo <div style="position:absolute;left:300px;top:264px;">
Modificar lo que esta en rojo

LUEGO ESTE CODIGO DONDE QUIERAS

QUE SALGA EL MENU

<div class="nav-container-outer"><img src="http://img41.xooimage.com/files/2/5/6/nav-bg-l-c7e524.jpg" _fcksavedurl="http://img41.xooimage.com/files/2/5/6/nav-bg-l-c7e524.jpg" alt="" class="float-left" />    <img src="http://img43.xooimage.com/files/d/c/6/nav-bg-r-c6f9c0.jpg" _fcksavedurl="http://img43.xooimage.com/files/d/c/6/nav-bg-r-c6f9c0.jpg" alt="" class="float-right" /> <ul id="nav-container" class="nav-container">     <li><a class="item-primary" href="#" _fcksavedurl="#">HOME</a></li>     <li> </li>     <li><a class="item-primary" href="#" _fcksavedurl="#">Products</a>     <ul style="width: 150px;">         <li><a href="#" _fcksavedurl="#">SoftwarePlus</a></li>         <li><a href="#" _fcksavedurl="#">MagicDriver</a></li>         <li><a href="#" _fcksavedurl="#">GreatFX</a></li>         <li><a href="#" _fcksavedurl="#">SampleSoft</a></li>         <li><a href="#" _fcksavedurl="#">UnDoIt</a></li>         <li><a href="#" _fcksavedurl="#">100% CSS Menu</a></li>         <li><a href="#;" _fcksavedurl="#;">With Cross-Browser</a></li>         <li><a href="#;" _fcksavedurl="#;">Dropdowns</a></li>         <li><a href="#;" _fcksavedurl="#;">Absolutely NO Javascript</a></li>         <li><a href="#;" _fcksavedurl="#;">Being Used On</a></li>         <li><a href="#;" _fcksavedurl="#;">These Menus</a></li>         <li> </li>         <li><a href="#;" _fcksavedurl="#;">Example Of a Divider</a></li>         <li><a href="#;" _fcksavedurl="#;">With No Title</a></li>     </ul>     </li>     <li> </li>     <li><a class="item-primary" href="#" _fcksavedurl="#">Quality</a>     <ul style="width: 150px;">         <li><a href="#" _fcksavedurl="#">SoftwarePlus</a></li>         <li><a href="#" _fcksavedurl="#">MagicDriver</a></li>         <li><a href="#" _fcksavedurl="#">GreatFX</a></li>         <li><a href="#" _fcksavedurl="#">SampleSoft</a></li>         <li><a href="#" _fcksavedurl="#">UnDoIt</a></li>         <li><a href="#" _fcksavedurl="#">100% CSS Menu</a></li>         <li><a href="#;" _fcksavedurl="#;">With Cross-Browser</a></li>         <li><a href="#;" _fcksavedurl="#;">Dropdowns</a></li>         <li><a href="#;" _fcksavedurl="#;">Absolutely NO Javascript</a></li>         <li><a href="#;" _fcksavedurl="#;">Being Used On</a></li>         <li><a href="#;" _fcksavedurl="#;">These Menus</a></li>         <li> </li>         <li><a href="#;" _fcksavedurl="#;">Example Of a Divider</a></li>         <li><a href="#;" _fcksavedurl="#;">With No Title</a></li>     </ul>     </li>     <li> </li>     <li><a class="item-primary" href="#" _fcksavedurl="#">Services</a>     <ul style="width: 150px;">         <li><span class="item-secondary-title">Title For Links</span></li>         <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li>         <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li>         <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li>         <li> </li>         <li><span class="item-secondary-title">Title After Divider</span></li>         <li><a href="#" _fcksavedurl="#">Once Again...</a></li>         <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li>         <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li>         <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li>     </ul>     </li>     <li> </li>     <li><a class="item-primary" href="#;" _fcksavedurl="#;">Very Long Item</a>     <ul style="width: 150px;">         <li><span class="item-secondary-title">Title For Links</span></li>         <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li>         <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li>         <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li>         <li> </li>         <li><span class="item-secondary-title">Title After Divider</span></li>         <li><a href="#" _fcksavedurl="#">Once Again...</a></li>         <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li>         <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li>         <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li>     </ul>     </li>     <li> </li>     <li><a class="item-primary" href="#;" _fcksavedurl="#;">Fully Flexible</a>     <ul style="width: 150px;">         <li><span class="item-secondary-title">Title For Links</span></li>         <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li>         <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li>         <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li>         <li> </li>         <li><span class="item-secondary-title">Title After Divider</span></li>         <li><a href="#" _fcksavedurl="#">Once Again...</a></li>         <li><a href="#" _fcksavedurl="#">These Links Still Appear</a></li>         <li><a href="#" _fcksavedurl="#">Just Like The Others</a></li>         <li><a href="#" _fcksavedurl="#">Even When Under A Title</a></li>     </ul>     </li>     <li class="clear"> </li> </ul> </div>

MENU CSS

MENU CSS

MENU APPLE

Contenido Aqui here

Contenido Aqui here

Contenido Aqui here

Contenido Aqui here

Contenido Aqui here

Codigo menu apple

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/javascript" src="http://img26.xooimage.com/files/3/7/e/ddaccordion-d2e107.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Visita http://www.codeslife.es.tl
***********************************************/

</script>   <script type="text/javascript">

ddaccordion.init({
   headerclass: "silverheader", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
   revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
   onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})

</script>   <style type="text/css">  .applemenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; }  .applemenu div.silverheader a{ background: black url(http://img6.xooimage.com/files/6/e/4/silvergradientover-c6ca55.gif) repeat-x center left; font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 5px 0; padding-left: 8px; text-decoration: none; }   .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{ color: white; }   .applemenu div.selected a, .applemenu div.silverheader a:hover{ background-image: url(http://img6.xooimage.com/files/6/e/4/silvergradientover-c6ca55.gif); color: white; }  .applemenu div.submenu{ /*DIV that contains each sub menu*/ background: white; padding: 5px; height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/ }    </style>     <div align="center"> <div class="applemenu"> <div class="silverheader"><a href="#" _fcksavedurl="#">Dynamic Drive</a></div> <div class="submenu">Contenido Aqui here</div> <div class="silverheader"><a href="#" _fcksavedurl="#">CSS Examples</a></div> <div class="submenu">Contenido Aqui here</div> <div class="silverheader"><a href="#" _fcksavedurl="#">JavaScript Kit</a></div> <div class="submenu">Contenido Aqui here</div> <div class="silverheader"><a href="#" _fcksavedurl="#">CSS Drive</a></div> <div class="submenu">Contenido Aqui here<br /> <img alt="" src="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" /></div> <div class="silverheader"><a href="#" _fcksavedurl="#">JavaScript Kit</a></div> <div class="submenu">Contenido Aqui here</div>

MENU ELEGANTE BLACK

MENU ELEGANTE BLACK

<br /><style type="text/css"> #menu {padding:0 0 0 5px; margin:0; list-style:none; height:35px;  background:#fff url("http://cssplantillas.netau.net/ap/archivos/9c19d0b445.png"); border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444; width:100%; /* esto modifica el ancho del menu */} #menu li {float:left;} #menu li a {display:block; float:left; height:35px; line-height:40px;  color:#ccc; text-decoration:none; font-size:12px;  font-family:arial, verdana, sans-serif; font-weight:bold;  text-align:center; padding:0 0 0 8px; cursor:pointer;} #menu li a b {float:left; display:block; padding:0 16px 0 8px;} #menu li.current a {color:#fff; background:url("http://cssplantillas.netau.net/ap/archivos/5c5c6e37d9.png");} #menu li.current a b {background:url("img/menu2.png") no-repeat right top;} #menu li a:hover {color:#fff;background:#000 url("http://cssplantillas.netau.net/ap/archivos/fd442c4b65.png");} #menu li a:hover b {background:url("http://cssplantillas.netau.net/ap/archivos/fd442c4b65.png") no-repeat right top;} #menu li.current a:hover {color:#fff;  background:#000 url("http://cssplantillas.netau.net/ap/archivos/5c5c6e37d9.png"); cursor:default;} #menu li.current a:hover b {background:url("http://cssplantillas.netau.net/ap/archivos/5c5c6e37d9.png") no-repeat right top;} </style> <ul id="menu"> <li><a href="#" _fcksavedurl="#"><b>Inicio</b></a></li> <li><a href="#" _fcksavedurl="#"><b>Link's 2</b></a></li> <li><a href="#" _fcksavedurl="#"><b>Link's 3</b></a></li> <li><a href="#" _fcksavedurl="#"><b>Link's 4</b></a></li> <li><a href="#" _fcksavedurl="#"><b>Link's 5</b></a></li> <li><a href="#" _fcksavedurl="#"><b>Link's 6</b></a></li> <li><a href="#" _fcksavedurl="#"><b>LINK</b></a></li> </ul>

MENU VERTICAL

Online Tools Image Optimizer FavIcon Generator Email Riddler htaccess Password Gradient Image Button Maker

Support Us Recommend Us Link to Us Web Resources

Partners JavaScript Kit CSS Drive CodingForums CSS Examples

Test Current Current or not Current or not Current or not Current or not

MENU VERTICAL DESPEGABLE

ConstruccionWeb

Recent Posts

Recent Comments

Categories

Archives

menus

Tags

Calendar

Categories

October 2009
M	T	W	T	F	S	S
« Sep
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

ConstruccionWeb

Recent Posts

Recent Comments

Categories

Archives

menus

Site Search

Tags

Calendar

Categories