CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user2333842
user2333842

Reputation:

Navbar Dropdown in Bootstrap 3

I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website.

I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far.

<!DOCTYPE html>
<html>
  <head>
    <title>WEBSITE NAME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<h1>WEBSITE NAME</h1>

    <nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Software</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
      <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?

EDIT: I used the Safari web inspector and the resource "jquery.js" is red (indicating it is missing). This comes from the lines: I am writing this based off the default basic page from the Bootstrap site. I'm not sure what to change the path to in order to correct it. There is no 'jquery.js' file in the project folder provided.

Upvotes: 4

Views: 13454

Answers (4)

user2333842
user2333842

Reputation:

Success!

I noticed that the 'code.jquery.com/jquery.js' file was unreachable in the Safari web inspector. The issue was this line:

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

The file could not be reached. For some reason, the http: part was missing. Changing the code to

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

fixed the issue! Huzzah!

Additional Note: It think that, if this were run online and not locally, the http: part would not be required.

Upvotes: 1

WebDev67
WebDev67

Reputation: 34

I loaded this exact file onto my WAMP server locally and everything worked perfectly fine: You might want to change this at the bottom of the page: src="http://code.jquery.com/jquery.js" There is nothing wrong with your code and the HTML5 shiv and respond.js has nothing to do with your menu not working...

You might however want to use Google Chrome and use the inspect element to make sure your reference points are correct.

Hover doesn't work out of the box in BS3, you can use a custom javascript to get that working... I use it here: http://thisamericanjourney.com/ hover over the about menu item: //This allows the user to hover over the menu without clicking on it

   $(function() {


$('ul.nav li.dropdown').hover(function() {
    $('.dropdown-menu', this).fadeIn('fast');
}, function() {
    $('.dropdown-menu', this).fadeOut('fast');
});

    });

Upvotes: 0

db9dreamer
db9dreamer

Reputation: 1715

the section:-

<ul class="nav navbar-nav navbar-right">
  <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
  <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
    </ul>
  </li>
</ul>

has an extra </ul> and </li> - which is probably not causing your problem, but won't be helping...

Upvotes: 0

Lloyd Banks
Lloyd Banks

Reputation: 36648

I ran your code after taking out the "html5shiv" and "respond.min" references and the dropdown menu works fine. I suspect the jQuery and Bootstrap JS files may have their file paths stated incorrectly.

Upvotes: 0

Related Questions