Best IT Recipes

Twitter Bootstrap Dropdown Menu Does Not Work in Any Browser

I am trying to make a drop down menu and it seems to work in Jsfiddle. It seems that javascript and css files are uploaded correctly: http://imgur.com/YYiJS4p

But this does not work in any of my browsers. I tested it in Firefox 19.0.2, Google Chrome 25.0.1364.172 and Internet Explorer 9.0.2. Javascript is up and running.

Javascript is included before loading and bootstrap-dropdown.js is the only boot file that I included, I mean that I did not include bootstrap.js.

There are no errors in my console.

Thanks in advance.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } </style> <link href="./css/bootstrap-responsive.min.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="shortcut icon" href="../assets/ico/favicon.ico"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <a class="brand" href="#">w3resource</a> <li class="active"><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li class="divider"></li> <li><a href="#">JavaScript</a></li> <li><a href="#">HTML5</a></li> </ul> </li> </ul> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Componentes</li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> </div> <!--/.well --> </div> <!--/span--> <div class="span9"> <div class="row-fluid"> <div class="span4"> <h2>Canvas</h2> <canvas id="myCanvas">Tu explorador no soporta canvas.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#AA0000"; ctx.fillRect(0,0,150,75); </script> </div> <!--/span--> <!--/row--> </div> <!--/span--> </div> <!--/row--> </div> <!--/.fluid-container--> <!-- Placed at the end of the document so the pages load faster --> <hr> <footer> <p>© Company 2013</p> </footer> <script src="./js/jquery-1.9.1.js"></script> <script src="./js/bootstrap-dropdown.js"></script> </body> </html>
+4
drop-down-menu twitter-bootstrap
Mar 23 '13 at 9:15
source share
4 answers

This is what I download:

  <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.js"></script>

I tried my code by downloading bootrasp, which I have on my machine, and jquery from the site. and it works great in FF, chrome and safari. I do not have a guide to test it.

+5
Mar 23 '13 at 22:31
source share

I had a similar problem, but found that I download both

bootstrap.min.js

and

bootstrap.dropdown.js

this caused a conflict in my code, you do not need to load both, as the dropdown code is included in bootstrap.min.js

+3
Aug 07 '13 at 15:25
source share

You need to load bootstrap.min.js or bootstrap.js before loading bootstrap-dropdown.js. The Bootstrap popup window is a js plugin with a dependency on the Bootstrap structure.

The footer section will look like this:

 <footer> <p>© Company 2013</p> </footer> <script src="./js/jquery-1.9.1.js"></script> <script src="./js/bootstrap.js"></script> <script src="./js/bootstrap-dropdown.js"></script>

You can customize your Bootstrap assembly, then you do not need to separately enable bootstrap-dropdown.js - it will be loaded using Bootstrap.

Download bootstrap boot: http://twitter.github.com/bootstrap/customize.html

+1
Apr 01 '13 at 17:20
source share

The "min" versions cause problems several times (I encounter problems with .min files occasionally with ASP.NET MVC)

I had the same problem as with bootstrap.js and everything works fine!

Try the same at the end.

+1
May 6 '14 at 4:56
source share


More articles:


All Articles