Autor
Mensaje
estaciondescargas
Nuevo
06-10-2011, 20:16 (UTC) Título del mensaje : [CSS-jQuery] Menu Vertical
Hola PGW !
Les traigo un menu desplegable que me pareció bastante bueno :
>>>Vista Previa Online<<<
Código: <script type="text/javascript" src="http://asdasd.fileave.com/codigo.js"></script><script type="text/javascript" src="http://asdasd.fileave.com/estaciondescargas.js"></script>
</script>
<div id="wrap">
<div id="accordion">
<h3 class="toggler"><a class="anasayfa" href="#">Inicio</a></h3>
<div class="element">
<ul>
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
</ul>
</div>
<h3 class="toggler"><a class="kategori" href="#">Contenido</a></h3>
<div class="element">
<ul class="kategori">
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
</ul>
</div>
<h3 class="toggler"><a class="baglanti" href="#">Redes Sociales</a></h3>
<div class="element">
<ul class="link">
<li><a href="#">Mootools</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Adobe</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">FrienFeed</a></li>
</ul>
</div>
<h3 class="toggler"><a class="besleme" href="#">RSS</a></h3>
<div class="element">
<ul class="rss">
<li><a href="#">Estacion Descargas</a></li>
<li><a href="#">Estacion Descargas</a></li>
</ul>
</div>
</div>
</div>
<style type="text/css">
#wrap { width:250px; margin:0 auto; } #accordion { margin:20px 0px; width:250px; } h3.toggler { cursor: pointer; border: 1px solid #999; font:bold 14px arial, verdana, helvetica, sans-serif; background: #222 url(http://img.webme.com/pic/c/catlak-site55/h3main.gif); color: #fff; margin: 0 0 2px 0; padding: 6px; } h3.toggler:hover {background: #222 url(http://img.webme.com/pic/c/catlak-site55/h3main2.gif);color:#333;border: 1px solid #B0EC52} .anasayfa {} a.anasayfa {background:transparent url(http://img.webme.com/pic/c/catlak-site55/pagge.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.anasayfa {background:transparent url(http://img.webme.com/pic/c/catlak-site55/pagge.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} .besleme {} a.besleme {background:transparent url(http://img.webme.com/pic/c/catlak-site55/feed.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.besleme {background:transparent url(http://img.webme.com/pic/c/catlak-site55/feed.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} .kategori {} a.kategori {background:transparent url(http://img.webme.com/pic/c/catlak-site55/page_copy.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.kategori {background:transparent url(http://img.webme.com/pic/c/catlak-site55/page_copy.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} .baglanti {} a.baglanti {background:transparent url(http://img.webme.com/pic/c/catlak-site55/cursor.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.baglanti {background:transparent url(http://img.webme.com/pic/c/catlak-site55/cursor.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} div.element p, div.element h4 { margin:0px; padding:4px; font:11px arial, verdana, helvetica, sans-serif; } ul {margin:0; padding:0px; list-style:none;display:block;} li {display:block;margin:0;padding:0px;list-style-type:none;} li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(http://img.webme.com/pic/c/catlak-site55/ana1.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#333 url(http://img.webme.com/pic/c/catlak-site55/ana2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} /* Ana başlıkların altındaki menülerin ayrı ayrı stilleri burada tanımlanmıştır */ .link ul {margin:0; padding:0px; list-style:none;display:block;} .link li {display:block;margin:0;padding:0px;list-style-type:none;} .link li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(http://img.webme.com/pic/c/catlak-site55/link.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} .link li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#ff9900 url(http://img.webme.com/pic/c/catlak-site55/link2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} .rss ul {margin:0; padding:0px; list-style:none;display:block;} .rss li {display:block;margin:0;padding:0px;list-style-type:none;} .rss li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(http://img.webme.com/pic/c/catlak-site55/rss1.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} .rss li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#3196F4 url(http://img.webme.com/pic/c/catlak-site55/rss2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} .kategori ul {margin:0; padding:0px; list-style:none;display:block;} .kategori li {display:block;margin:0;padding:0px;list-style-type:none;} .kategori li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(http://img.webme.com/pic/c/catlak-site55/kat1.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} .kategori li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#B0F017 url(http://img.webme.com/pic/c/catlak-site55/kat2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} .info {font:11px arial, verdana, helvetica, sans-serif;} .info a{color:#333;background:#fff;padding:2px;text-decoration:none;display:inline;} .info a:hover{color:#2e83ff;background:#fff;padding:2px;text-decoration:none;} blockquote { padding:5px 20px; }</style>
Ultima edición por estaciondescargas el Jue Oct 06, 2011 4:47 pm; editado 1 vez
↑
insaniquarium-deluxe
since-2007
Ubicación: Santiago, Chile
06-10-2011, 20:20 (UTC) Título del mensaje :
Está buenísimo se ve bastante bien! Gracias por el aporte
______________
↑
radiovijaer
Semi-Experto
Ubicación: El Salvador
06-10-2011, 20:34 (UTC) Título del mensaje :
Este aporte me da muxias ideas! Graz por compartirlo amiguizo.
______________
https://radiovijaer.es.tl/
↑
nuestrasxarlas
Semi-Experto
Ubicación: España
06-10-2011, 20:54 (UTC) Título del mensaje :
↑
supermarioworldsnes
Semi-Experto
07-10-2011, 18:23 (UTC) Título del mensaje :
Son fantasticos tus Menus
Saludos
______________
Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
↑
revolutionteam-css
Destacado
07-10-2011, 21:18 (UTC) Título del mensaje :
Fantastico ;D me gusto el menu , suerte
______________
Votame
Click aqui
↑