Difference between revisions of "Template:UFlorida/Menu"

(Created page with "<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bo...")
 
Line 9: Line 9:
 
<body>
 
<body>
  
−
<div class="container-fluid">
+
<nav class="navbar navbar-default">
−
  <h1>My First Bootstrap Page</h1>
+
  <div class="container-fluid">
−
   <p>This is some text.</p>  
+
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <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>
 +
    </div>
 +
  </div>
 +
</nav>
 +
 
 +
<div class="container">
 +
  <h3>Collapsible Navbar</h3>
 +
  <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).
 +
   <p>Only when the button is clicked, the navigation bar will be displayed.</p>
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 00:34, 10 September 2017

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.