Menu

Buscar

domingo, 9 de octubre de 2011

Menu dropdown desplegable para blogger

¡Aqui os dejo un tutorial para hacer un menu desplegable para tu Blog! Para todos los sepais algo de HTML/CSS os resultara bastante facil seguir los pasos y modificar el codigo a vuestro gusto!! Los demas.... a aprender xD




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(300);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>

<style type="text/css">

#nav{
padding: 0;
list-style-type:none;
list-style-position:outside;
position:relative;
width: 720px;
overflow: visible;
}

#nav a{
display:block;
text-decoration:none;
overflow: visible;
}

#nav li{
float:left;
position:relative;
min-width: 40px;
overflow: visible;
}

#nav li li{
overflow: visible;
}

#nav li .doble{
height: 30px;
overflow: visible;
}

#nav ul {
margin:0;
padding:0;
position:absolute;
width: 150px;
height: 30px;
list-style-type:none;
z-index:30;
overflow: visible;
visibility: hidden;
}

#nav li ul a{
min-width: 150px;
float:left;
height: 30px;
overflow: visible;
}

#nav ul ul{
height: 30px;
overflow: visible;
}

#nav li ul ul {
margin-left: 185px;
height: 30px;
margin-top: -1px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

#menu{
margin: 0 auto;
}
</style>



<div id="menu">
<ul id="nav">
<li><a href="#">MENU-1</a></li>
<li><a href="#">MENU-2</a>
<ul>
<li><a href="#">SUBMENU-1</a>
<ul>
<li><a href="#">SUBMENU-2</a></li>
<li><a href="#">SUBMENU-2.2</a></li>
<li><a href="#">SUBMENU-2.3</a></li>
</ul>
</li>
<li><a href="#">SUBMENU-1.2</a></li>
<li><a href="#">SUBMENU-1.3</a></li>
</ul>
</li>
<li><a href="#">MENU-3</a>
<ul>
<li><a href="#">SUBMENU-3</a></li>
</ul>
</li>
<li><a href="#">MENU-4</a></li>
</ul>
</div>


43 comentarios:

  1. Muy buen tutorial. Lo he probado en mi blog y funciona perfectamente. Muchas gracias

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. no entiendo del todo... como quieres que los separe?

    ResponderEliminar
  4. ahhhh!!!! perdon el codigo es asi de largo mil disculpas!!! tuve que mirar el vudeo 3 veces para entender igual gracias por contestar!!!

    ResponderEliminar
  5. en la almohadilla que pones debemos copiar el enlace al cual queremos que se dirija? por ejemplo copio el enlace de mi pagina principal y lo pego ahi???

    ResponderEliminar
  6. si el código siempre es lo que tiene el fondo blanco (para que quede resaltado) =D

    si la almohadilla es para sustituirla por el enlace que tu quieras ;)

    ResponderEliminar
  7. gracias gracias !!!! lo hago y comento como me fue! xD

    ResponderEliminar
  8. hola buen bueno ya lo tengo en mi blog.. pero me gustaria cambiar el color y hacerlo un poco mas colorido con bordes y esas cosas como hago alli?

    ResponderEliminar
    Respuestas
    1. pues eso se hace con el css... te aconsejo ver mi otro turorial para enterder algo mejor como funciona esto, te dejo el link aqui -> http://www.youtube.com/watch?feature=player_embedded&v=s65yzIFCIRQ

      saludos

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Hola tu tutorial me resultó excelente... La estaba buscando. Quisiera que me ayude con el tipo de letra que aparece. ¿Cómo se cambia el tipo de letra en el código?

    ResponderEliminar
    Respuestas
    1. el tipo de letra no lo tengo definido en el codigo pero puedes cambiarlo con por ejemplo font-family: Arial; o el tipo de letra que quieras ;)

      Eliminar
  11. Hola son super tus tutoriales me han ayudado un monton pero tengo un problema con mi menú desplegable te dejo mi dirección de blog para que revises porfavor y me digas porque razon no se ven completos los menus cuando se despliegan.GRACIAS.
    http://soulofhansik.blogspot.com/p/entrevistas-y-mas.html

    ResponderEliminar
    Respuestas
    1. este menu lo hice solo para una plantilla como explico en el tutorial ;) aqui te dejo uno que si funcionara en tu blog. http://programalotu.blogspot.de/2011/11/menu-dropdown-desplegable-para-todas.html

      Eliminar
  12. UPS, que tonta, de todas formas muchísimas gracias la verdad explicas que hasta el mas tonto puede hacerle ;) jejeje, muchas gracias ya lo cambio, saludos.

    ResponderEliminar
  13. Tu tutorial es genial, además muchas gracias por explicar un poco sobre el uso de los códigos. Pero resulta que cuando trato de aplicarlo en mi blog, en una plantilla de awesome no se me despliega nada...que cosas debería cambiar?
    Muchas gracias y un saludo

    ResponderEliminar
    Respuestas
    1. prueba con este otro menu... que esta configurado para todas las plantillas http://programalotu.blogspot.de/2011/11/menu-dropdown-desplegable-para-todas.html

      Eliminar
  14. Gracias por el tutorial pero no entiendo en que parte pongo el link para donde se dirija gracias :)

    ResponderEliminar
  15. gracias por tu tuto me ha servido mucho
    pero tengo una pregunta en que parte del codigo puedo cambiar el tipo de letra???
    es que no le se muy bien a esto
    gracias!!

    ResponderEliminar
  16. Hola, tengo un problema...el menu se queda por detras de las imágenes, es posible hacer algo para que se vea por delante??

    Dejo el enlace para que eches un vistazo,
    Muchas gracias

    http://recamotos.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. yo lo veo por delante lo unico que no tienes color de fondo del menu... ;)

      Eliminar
  17. Gracias por atenderme, he intentado darle color de fondo y sigue saliendo el menu desplegable x la parte trasera de la imagen, no consigo colocarlo por delante.... =( jeje.
    Te suvido una captura de pantaya al blog para que veas de la manera ke lo veo yo, muchas gracias por tu atencion, un saludo!! =)

    ResponderEliminar
  18. He aplicado el tutoraial y el menu desplegable me ha quedado muy bien, gracias. No obstante tengo un pequeño problema pues no sé como introducir el saliera el contenido correspondiente a cada submenú, me gustaria clicar y que se viera el contenido correspondiente !!seguro que lago no he hecho bien!! espero tu ayuda, gracias!!

    ResponderEliminar
  19. MUY BUENO COMO DECISMO LOS ARGENTINO PIPI CUCU

    ResponderEliminar
  20. HOLA!!!
    LO PRIMERO GRACIAS POR EL TUTORIAL Y AHORA MISMO TE AGREGAREMOS AL FACEBOOK!
    POR OTRO LADO, TENEMOS UN PROBLEMA. EL MENU HA QUEDADO MUY BIEN SIN EMBARGO, NO NOS DEJA INTRODUCIR INFORMACION DENTRO DE CADA MENU Y SUBMENU.NO SABEMOS. TE PEDIMOS POR FAVOR QUE NOS CONTESTES.
    UN ABRAZO

    ResponderEliminar
  21. Hola me gustaría saber porque este menú no funciona en Internet Explorer? un saludo

    ResponderEliminar
    Respuestas
    1. porque el internet explorer no es un navegador sino una enfermedad!!

      a todos los codigos "normales" hay que añadirles extras para solo para que el IE entienda de que va la cosa y como yo soy partidario de que el IE lo eliminen para siempre de la faz de la tierra, escribo muy pocos codigos extra para IE... es muy raro que en TODOS los demas navegadores los codigos funcionen a la perfeccion (o casi xD) pero en el IE no y como los de microsoft no hacen nada por mejorar, yo tampoco me veo en la obligacion de apoyar esa filosofia ;)

      Eliminar
  22. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. La verdad que nose exactamente a que te refieres pero supongo que si quieres que el link lleve fuera de tu blog lo que tienes que hacer es simplemente poner la url del sitio a donde quieres que lleve... si lo que quieres es que se abra una nueva pestaña lo que tienes que poner es target="_blank"

      Eliminar
  23. se puede centrar el menu?

    ResponderEliminar
  24. Funciona perfectamente, excelente aporte. Me gustaria saber si tienes un tutorial donde pueda hacer calculos matemáticos sencillos. Me explico, un cuadro donde poner el peso y talla de una persona y en otro cuadro me salga automaticamente su índice de masa corporal.
    Gracias

    ResponderEliminar
  25. buenas:
    como hago para hacer etiquetas desplegables o algo asín???
    pongo la etiqueta manga y cuando leden un click se abra y salga todos los nombres de mangas de esa etiqueta para ahorarme espacio en mi blog.
    gracias por tus tutos .

    ResponderEliminar
  26. excelente tuto ..fue muy combince lo hise emi blog ...gratias..

    ResponderEliminar
  27. Como le cambio el color? Mi blog es de fondo negro y no queda bien, me gustaría cambiarle el color a los submenus desplegables.

    ResponderEliminar
  28. Hola, He hecho el menu desplegable segun tu tutorial parece que me ha salido bastante bien, pero cuando pincho en el menu no me lleva a ningun sitio. Estoy muy verde en eso y me gustaria que me hechas una mano por favor. Gracias Aqui te dejo mi enlace http://tartasporencargomadrid.blogspot.com.es/

    ResponderEliminar
  29. Después de ver algunos tutoriales, sin duda este es el que mejor reesultado me ha dado aunque me he liado uin poco al mdificarlo. Pero funciona correctamente.

    ResponderEliminar
  30. Amigo enhorabuena buen tutorial, la única pega que al añadir yo dos pestañas mas me parecen con un puntito. Espero tu respuesta.

    http://detroitpistonsbadboys.blogspot.com.es/

    ResponderEliminar
  31. Hola, ojala puedas ayudarme, este es mi blog:
    http://avart-arielvarelaarteyteatro.blogspot.com/

    no puedo abrir el menú desplegable para acceder a la configuración del mismo. (sólo me sucede en ese blogg)
    puedo publicar entradas sin problema, pero no puedo ajustar la apariencia del mismo. agradecería mucho que me ayudasen en este dilema.

    ResponderEliminar
  32. seria posible que me explicaras como puedo hacer para que el menu abra mas rapido te dejo mi correo
    ragoca69@hotmail.es

    ResponderEliminar