Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje06-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>



Espero que les sirva.
______________



Facebook

Web


Ultima edición por estaciondescargas el Jue Oct 06, 2011 4:47 pm; editado 1 vez
Mensaje06-10-2011, 20:20 (UTC)    
Título del mensaje:

Está buenísimo se ve bastante bien! Gracias por el aporte
______________
Mensaje06-10-2011, 20:34 (UTC)    
Título del mensaje:

Este aporte me da muxias ideas! Graz por compartirlo amiguizo.
______________


https://radiovijaer.es.tl/
Mensaje06-10-2011, 20:54 (UTC)    
Título del mensaje:

Mensaje07-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
Mensaje07-10-2011, 21:18 (UTC)    
Título del mensaje:

Fantastico ;D me gusto el menu , suerte
______________
Votame
Click aqui
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group