CODEWITHSUNDEEP
csstwitter-bootstrap
sark9012
sark9012

Reputation: 5737

Can't get the dropdown's to work?

Just looked at the Bootstrap toolkit and attempting to get the dropdown's working on the top menu.

The code I have for the menu is as follows

<div class="topbar">
  <div class="fill">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="/index.php">Home</a></li>
        <li><a href="/about.php">About Us</a></li>
        <li><a href="/news.php">Site News</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Community</a>
          <ul class="dropdown-menu">
            <li><a href="/chatroom.php">Chatroom</a></li>
            <li class="divider"></li>
            <li><a href="/forums.php">Forums</a></li>
          </ul>
        </li>
      </ul>

      <form class="pull-left" action="">
        <input type="text" placeholder="Search" />
      </form>
      <ul class="nav secondary-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Account</a>
          <ul class="dropdown-menu">

            <li><a href="/profile.php?id=<? echo $_SESSION['id'];?>">Profile</a></li>
            <li><a href="/settings.php">Settings</a></li>
            <li><a href="/messages.php">Messages</a></li>
            <li class="divider"></li>
            <li><a href="/maintenance/admin.php">Admin</a></li>
            <li class="divider"></li>
            <li><a href="/process.php">Logout</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>

</div>

The dropdown isn't doing anything when clicked?

I have included the following css file.

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

Can anyone help me here? Thanks.

Upvotes: 4

Views: 1488

Answers (4)

Ritikesh
Ritikesh

Reputation: 1228

Generally having Jquery referenced above Bootstrap does the trick. You don't even have to mention bootstrap-dropdown explicitly. worked for me on two different occasions. Hope it helps!

Upvotes: 1

StanK
StanK

Reputation: 4770

You need to make sure that you have a reference to jquery, and a reference to the bootstrap js in your page.

e.g

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>

Then, you either need to give one of your containers the attribute, data-dropdown="dropdown" , or explicitly set the container as a dropdown container using jquery, $('#mycontainerid').dropdown();

Upvotes: 1

Si Griffiths
Si Griffiths

Reputation: 333

Try adding the data-dropdown property to your initial <li> e.g.

<li class="dropdown" data-dropdown="dropdown">

Hope this helps.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try to add the JavaScript file for the dropdown functionality too - http://twitter.github.com/bootstrap/#javascript

Upvotes: 1

Related Questions