Difference between revisions of "Team:Oxford/Templates/Navi"

Line 1: Line 1:
−
 
+
<html lang="en">
−
<html>
+
 
<head>
 
<head>
 +
  <title>Bootstrap Case</title>
 +
  <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
   <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.4/jquery.min.js"></script>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
−
 
−
<style type="text/css">
 
−
#sideMenu, #top_title {
 
−
display: none;
 
−
}
 
−
</style>
 
 
</head>
 
</head>
 
<body>
 
<body>
−
     <div class="dropdown">
+
 
−
       <a class="dropdown-toggle" id="dropdownMenu1" href="#">Dropdown trigger</a>
+
<nav class="navbar navbar-inverse">
−
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+
  <div class="container-fluid">
−
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+
     <div class="navbar-header">
−
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+
        <span class="icon-bar"></span>
−
        <li role="presentation" class="divider"></li>
+
        <span class="icon-bar"></span>
−
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+
        <span class="icon-bar"></span>
 +
      </button>
 +
      <a class="navbar-brand" href="#">WebSiteName</a>
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav">
 +
        <li class="active"><a href="#">Home</a></li>
 +
         <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Page 1-1</a></li>
 +
            <li><a href="#">Page 1-2</a></li>
 +
            <li><a href="#">Page 1-3</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a href="#">Page 2</a></li>
 +
         <li><a href="#">Page 3</a></li>
 +
      </ul>
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
 +
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
 
       </ul>
 
       </ul>
 
     </div>
 
     </div>
−
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+
  </div>
−
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
+
</nav>
−
    <script>
+
 
−
      $(document).ready(function() {
+
<div class="container">
−
          $("a.dropdown-toggle").click(function(ev) {
+
  <h3>Collapsible Navbar</h3>
−
              $("a.dropdown-toggle").dropdown("toggle");
+
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
−
              return false;
+
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
−
          });
+
</div>
−
          $("ul.dropdown-menu a").click(function(ev) {
+
−
              $("a.dropdown-toggle").dropdown("toggle");
+
−
              return false;
+
−
          });
+
−
      });
+
−
    </script>
+
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 18:40, 20 July 2016

Bootstrap Case

Collapsible Navbar

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.