Hola Amigos, estoy desarollando un tema para Wordpress. Lo tengo casi completo pero a la hora de crear el menú de navegación con Bootstrap me pasa que no cuando agrego el dropdown-menu se me oculta bien el submenú, pero al darle clic la clase open no se ejecuta vamos que no se desplaza el menú.
Pensé que era algun problema de la configuración en PHP no se. Nunca he usado Bootstrap pero resulta que me puse a hacer un menú aparte, solo en HTML, y tampoco me funciona. Me he leído ya no se ni cuantos artículos.
En fin aquí os dejo el código y por favor que alguien me diga si algo está mal, porque la única neurona que me queda me va a explotar. He usado bootstrap.css y bootstrap.min.css, las he usado juntas (que no debería), las he usado separadas, he usado la funcion JavaScript y nada.
Este es el código:
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/bootstrap.min.css" /> <script type="text/javascript" href="./js/bootstrap.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container-fuid"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-collapse"> <span class="sr-only">Cambiar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">devcode</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toogle" data-toggle="dropdown">menu3<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> </ul>
</li> </ul> </div> </nav> </div> </div> </div> </body> </html>
Respuestas
El único error que veo de primeras está en estas líneas:
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-collapse"> <span class="sr-only">Cambiar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">devcode</a> </div>
Concretamente, en el valor del atributo data-target te falta un punto:
<!-- Esto es lo que tienes --> <button type="button" ... data-target="navbar-ex1-collapse"> <!-- Esto es lo que deberías tener --> <button type="button" ... data-target=".navbar-ex1-collapse">
Como supongo que este cambio no solucionará todos los problemas, explícanos por favor con un poco más de detalle cuál es exactamente el problema porque no he acabado de entenderlo leyendo tu primer mensaje. Gracias.
@javiereguiluz
Amigo, creo que esto puede ayudarte. Si mal no entendi, creo que tienes problemas al desplegar el sub menu de un boton desplegable. Si esto es asi, tuve el mismo problema y lo solvente con este video. Solo tuve que descargar unos Scripts que permitian la funcion del boton desplegable. Este es el link: https://www.youtube.com/watch?v=1YE6ypJUwyU Espero poder haberte ayudado. Saludos....
@ChristRM
El problema es la version de jQery. Prueba esta otra versión:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
@LucioDiruggiero
Con la url a mí también me funcionó ... 100% funcional puesto que yo intenté meter un datepicker y cambié el jquery.min.js y desde ahí inicio todo mi tormento de fallos.
Error corregido con la librería antes mencionada gracias a @LucioDiruggiero .
Saludos!!!
@HERYACUA
Es necesario actualizar a la ultima version de Jquery, y listo funcionara el menu desplegable en cualquier aplicacion web responsive :) https://developers.google.com/speed/libraries/#jquery
@2062nandes
Hola vi en este link http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html
ADVERTENCIA La barra de navegación responsive requiere el uso del plugin collapse de JavaScript incluido en Bootstrap 3.
Saludos.
@lgaedo