CODEWITHSUNDEEP
twitter-bootstrap
Mohamed Taboubi
Mohamed Taboubi

Reputation: 7021

Bootstrap dropdown menu with href link

I'm using bootsrtap to build a toggleable dropdown menu.

So I use an "a" tag that when I click on it it open a dropdown menu, here is my code : 

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="dropdown">
        <a id="my-dropdown" href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</a>
    
        <ul class="dropdown-menu">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    
    </div>

What I'm trying to do is to open a href link in the same time when the dropdown :

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="dropdown">
        <a id="my-dropdown" href="#section=mysection" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</a>
    
        <ul class="dropdown-menu">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    
    </div>

But it doesn't work,

Any idea ?

Upvotes: 0

Views: 8074

Answers (2)

Codeone
Codeone

Reputation: 1201

Use - Bootstrap CDN correctly <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="dropdown">
        <a id="my-dropdown" href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</a>
    
        <ul class="dropdown-menu">
           <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
        </ul>
    
    </div>

Upvotes: 2

Marc Giroux
Marc Giroux

Reputation: 192

Try to remove the "#" before the "section". I'm not totally sure that will fix your issue.

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="dropdown">
        <a id="my-dropdown" href="section=mysection" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</a>
    
        <ul class="dropdown-menu">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    
    </div>

Upvotes: -1

Related Questions