Cant figure out how to make this nav tab a dropdown menu

Question

I just haven't been able to figure out the syntax I am trying to have a drop-down menu appear when I click on the second button.

<!DOCTYPE html>
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href=
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
  "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
  "anonymous" type="text/css" />

  <!-- Font Awesome  -->

  <script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>

<!-- My CSS  -->
<link rel="stylesheet" type="text/css" href="mystyle.css">


</head>

<body>


<ul class="nav nav-tabs">
  <li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li>

<!-- ****BEGIN THE DROPDOWN TAB-->

<li role="Presentation" class="dropdown-menu">
    <a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
     Community <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li>item</li>
    </ul>
  </li>




<!-- ***END  THE DROPDOWN TAB  -->


  <li role="presentation"><a href="#">Pet Help</a></li>
  <li role="presentation"><a href="#">Pets for Sale</a></li>
  <li role="presentation"><a href="#">Pet Services</a></li>

</ul>








 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
  "text/javascript">
</script>
</body>
</html>

My first attempt at making a nav menu. (For some reason, I am unable to submit this question without providing "details" so please forgive this meaningless text here)

Answer 1

I think you're missing the call to bootstrap's javascript library which is needed for the hamburger nav. Try adding this after you add the jquery reference (ie <script src="...jquery.min.js"... )

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

For more information, see the Bootstrap documentation page: Getting Started , as well as the updated code snippet below.

 <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type= "text/javascript"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Font Awesome --> <script src="https://use.fontawesome.com/926120954b.js" type="text/javascript"> </script> <!-- My CSS -- > <link rel="stylesheet" type="text/css" href="mystyle.css">--> <!--end head: </head> start body:<body>--> <ul class="nav nav-tabs"> <li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li> <!-- ****BEGIN THE DROPDOWN TAB--> <li role="Presentation" class="dropdown-menu"> <a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Community <span class="caret"></span> </a> <ul class="dropdown-menu"> <li>item</li> </ul> </li> <!-- ***END THE DROPDOWN TAB --> <li role="presentation"><a href="#">Pet Help</a></li> <li role="presentation"><a href="#">Pets for Sale</a></li> <li role="presentation"><a href="#">Pet Services</a></li> </ul>

Cant figure out how to make this nav tab a dropdown menu

Question

1 answers

solution1
4 ACCPTED 2016-10-03 05:18:19

Cant figure out how to make this nav tab a dropdown menu

Question

1 answers

solution1 4 ACCPTED 2016-10-03 05:18:19

solution1
4 ACCPTED 2016-10-03 05:18:19