CODEWITHSUNDEEP
javascripttwitter-bootstrap
Richlewis
Richlewis

Reputation: 15374

Bootstrap JS and Navbar Button

I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.

i am calling Jquery within the header

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

And I am calling my bootstrap.js file 

<script src="js/bootstrap.js" type="text/javascript"></script>

The css for the navbar is as follows 

 <div class="container">
  <div class="navbar">
    <div class="navbar-inner">
     <div class="container">

  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>


  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse">
    <ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
  </div>

</div>

Am i missing something blindly obvious because the button is not responding?

Any help appreciated

Upvotes: 2

Views: 18083

Answers (2)

Richlewis
Richlewis

Reputation: 15374

The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine

Upvotes: 1

xqwzts
xqwzts

Reputation: 3538

Have you included the required bootstrap.css stylesheet?

 <link href="css/bootstrap.min.css" rel="stylesheet">

Edit 1:

Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.

Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.

Edit 2:

To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item

<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>

And then retrieve them with jQuery's selectors and attach click handlers:

$("#home").click(function() {
  alert('home clicked');
});

$("#about").click(function() {
  alert('about clicked');
});

I've edited the jsbin to add this example.

Upvotes: 7

Related Questions