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

Line 1: Line 1:
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<html lang="en">
+
<html>
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
−
<title>iGEM Oxford 2016 - Cure for Copper -</title>
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
+
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+
 
<style type="text/css">
 
<style type="text/css">
 
.bs-example{
 
.bs-example{
Line 16: Line 13:
 
display: none;
 
display: none;
 
}
 
}
−
</style>
 
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="bs-example">
+
 
−
  <div class="dropdown">
+
<div class="container">
−
        <a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
+
  <h2>Dropdown Example</h2>
−
        <ul class="dropdown-menu">
+
  <div class="dropdown">
−
            <li><a href="#">Action</a></li>
+
    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
−
            <li><a href="#">Another action</a></li>
+
    <span class="caret"></span></button>
−
        </ul>
+
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
−
     </div>
+
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
 +
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
 +
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
 +
      <li role="presentation" class="divider"></li>
 +
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
 +
     </ul>
 +
  </div><br>
 +
  <p><strong>Note:</strong> The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.</p>
 
</div>
 
</div>
 +
 +
<script>
 +
$(document).ready(function(){
 +
    $(".dropdown-toggle").dropdown();
 +
});
 +
</script>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:48, 20 July 2016

<!DOCTYPE html>