Menus
Aqui el un menu horizontal
Donde quieras que salga el menu:
| Código: |
| <ul id="nav"> <li id="nav-1"><a href="http://gen-avanzados.es.tl">Menu 1</a></li> <li id="nav-2"><a href="http://gen-avanzados.es.tl">Menu 2</a></li> <li id="nav-3"><a href="http://gen-avanzados.es.tl">Menu 3</a></li> <li id="nav-4"><a href="http://gen-avanzados.es.tl">Menu 4</a></li> <li id="nav-5"><a href="http://gen-avanzados.es.tl">Menu 5</a></li> <li id="nav-6"><a href="http://gen-avanzados.es.tl">Menu 6</a></li> </ul> |
Css code sin style tags:
| Código: |
| body { font-family: Verdana, Arial, sans-serif; font-size: small; } h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin:0; padding:0; } hr { border:none; border-top:1px solid #CCCCCC; height:1px; margin-bottom:25px; } #nav { float: left; width: 100%; margin: 0; padding: 0; list-style: none; background: #ccc; border-bottom: 1px solid #999; } #nav li { float: left; margin: 0; padding: 0; } #nav a { float: left; display: block; padding: 6px 30px 6px 5px; text-decoration: none; font-weight: bold; font-size: 90%; color: #666; background: #ccc url(http://img43.xooimage.com/files/4/c/5/slant-1571962.gif) no-repeat top right; } #nav #nav-1 a { padding-left: 20px; } #nav a:hover { color: #000; } |
Menu circular
Texto Por Encima De La Pagina
| Código: |
| <style type="text/css"> #info {padding-bottom:100px;} /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/circular.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(http://img40.xooimage.com/files/6/c/3/background-de5f16.gif) no-repeat;} #circularMenu li {display:block; width:60px; height:60px; position:absolute;} #circularMenu li.home {left:120px; top:4px; background:url(http://img22.xooimage.com/files/b/1/5/home-de5f20.gif) no-repeat center center;} #circularMenu li.chat {left:200px; top:40px; background:url(http://img40.xooimage.com/files/5/d/0/chat-de5f30.gif) no-repeat center center;} #circularMenu li.upload {left:35px; top:40px; background:url(http://img28.xooimage.com/files/2/6/9/photo-de5f3c.gif) no-repeat center center;} #circularMenu li.email {left:230px; top:115px; background:url(http://img26.xooimage.com/files/b/6/c/email-de5f42.gif) no-repeat center center;} #circularMenu li.address {left:5px; top:115px; background:url(http://img22.xooimage.com/files/f/4/0/address-de5f4c.gif) no-repeat center center;} #circularMenu li.shop {left:200px; top:190px; background:url(http://img48.xooimage.com/files/d/7/d/shop-de5f59.gif) no-repeat center center;} #circularMenu li.search {left:35px; top:190px; background:url(http://img48.xooimage.com/files/3/7/2/search-de5f63.gif) no-repeat center center;} #circularMenu li.delivery {left:120px; top:225px; background:url(http://img24.xooimage.com/files/8/0/b/delivery-de5f79.gif) no-repeat center center;} #circularMenu li a b {display:none;} #circularMenu li a {display:block; width:60px; height:60px; text-align:center;} #circularMenu li a:hover {background:url(http://www.cssplay.co.uk/menus/circular/circle.gif); text-decoration:none; font-family:georgia, serif;} #circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;} #circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;} #circularMenu li.home a:hover b {left:-22px; top:100px;} #circularMenu li.chat a:hover b {left:-102px; top:64px;} #circularMenu li.upload a:hover b {left:63px; top:64px;} #circularMenu li.email a:hover b {left:-132px; top:-11px;} #circularMenu li.address a:hover b {left:93px; top:-11px;} #circularMenu li.shop a:hover b {left:-102px; top:-87px;} #circularMenu li.search a:hover b {left:63px; top:-87px;} #circularMenu li.delivery a:hover b {left:-22px; top:-121px;} </style> |
Codigo Del Menu (Editar Links)
| Código: |
| <div id="circularMenu"> <li class="home"><a href="inicio.htm"><b>Inicio<br><span>Ve Al Inicio</span></b></a></li> <li class="chat"><a href="gracias.htm"><b>Contactame<br><span>Enviame Tus Dudas o Comentarios</span></b></a></li> <li class="email"><a href="construccion.htm"><b>Mi Email<br><span>Enviame Correos</span></b></a></li> <li class="shop"><a href="construccion.htm"><b>Lo Nuevo<br><span>Encuentra Lo Nuevo De la Web</span></b></a></li> <li class="delivery"><a href="afiliados.htm"><b>Afiliados<br><span>Web Amigas</span></b></a></li> <li class="search"><a href="gracias.htm"><b>Afiliate!!<br><span>Te Gustaria Estar En Mi Web?</span></b></a></li> <li class="address"><a href="http://www.paginawebgratis.es"><b>Pagina Web Gratis<br><span>Te Gustaria Una Web Como Esta?</span></b></a></li> <li class="upload"><a href="http://www.piczuela.co.cc"><b>UPLOAD<br><span>Sube Imagenes!!</span></b></a></li> </div> |
Otro menu horizontal editable
Texto por encima de la pagina
| Cita: |
| <script type="text/javascript" src="http://www.fileden.com/files/2008/6/10/1953689/chrome.txt"></script> <script type="text/javascript" src="http://www.fileden.com/files/2008/6/10/1953689/jquery.txt "></script> <script type="text/javascript" src="http://www.fileden.com/files/2008/6/10/1953689/jquery.bgpos.txt"></script> <style> #MainMenu { height:37px; background:#FFF; border:0; margin:0; } #tab { top:0; height:0; background:repeat-x top; margin:0; } #tab ul { list-style:none; float:left; margin:0; padding:0; } #tab li { display:inline; float:left; margin:0; padding:0; } #tab a { background:url(http://img14.imageshack.us/img14/611/bright109.gif) no-repeat right top; text-decoration:none; border:0; display:block; float:left; margin:0; padding:0; } #tab a span { display:block; background:url(http://img394.imageshack.us/img394/5919/bleft109r.gif) no-repeat left top; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFF; font-weight:700; line-height:37px; padding:0 25px; } #tab a:hover,#tab li.item_active a { background-position:right bottom; } #tab a:hover span,#tab li.item_active a span { background-position:left bottom; color:#000; font-weight:700; font-style:normal; text-decoration:none; } .dropmenudiv { position:absolute; top:0; float:left; display:block; visibility:hidden; border:0; background:#FFF; color:#FFF; z-index:100; text-decoration:none; padding:0; } .dropmenudiv ul { list-style:none; margin:0; padding:0; } .dropmenudiv li { display:inline; margin:0; padding:0; } .dropmenudiv a:link,.dropmenudiv a:visited { width:180px; display:block; border:0; color:#FFF; background:url(http://img394.imageshack.us/img394/5919/bleft109r.gif) no-repeat left top; font-weight:700; font-style:normal; text-decoration:none; margin:0; padding:0; } .dropmenudiv a span { display:block; line-height:37px; background:url(http://img14.imageshack.us/img14/611/bright109.gif) no-repeat right top; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFF; float:none; padding:0 25px; } .dropmenudiv a:hover { border:0; background-position:left bottom; font-weight:700; font-style:normal; text-decoration:none; color:#000; } .dropmenudiv a:hover span { background-position:right bottom; color:#000; font-weight:700; } </style> |
Lo que esta en rojo son las imagenes. (deben de estar como estan en la imagen original)
Donde quieres el menu
| Cita: |
| <div id="MainMenu"> <div id="tab"> <ul> <li><a href="link"><span>texto</span></a></li> <li><a href="link"><span>texto</span></a></li> <li><a href="link"><span>texto</span></a></li> </ul> </div> </div> |
Menu horizontal desplegable
Primero se pegas este codigo :
| Código: |
| <link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jquerycssmenu.css" /> <!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://img10.xooimage.com/files/1/8/a/jquerycssmenu-b581fe.js"></script> <br /><br /> |
Para agregar esto :
| Código: |
<div id="myjquerymenu" class="jquerycssmenu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> <br style="clear: left" /> </div> |
