MateToeroek (Talk | contribs) |
MateToeroek (Talk | contribs) |
||
Line 90: | Line 90: | ||
</script> | </script> | ||
<!-- Navbar --> | <!-- Navbar --> | ||
− | < | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | <nav class="navbar navbar-inverse"> |
+ | <div class="container-fluid"> | ||
+ | <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="#"><img src="/images/logo.png" style=" width:20px;"> </a></div> | ||
+ | <div class="collapse navbar-collapse" id="myNavbar"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active"><a href="#">Home</a></li> | ||
+ | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | .dropbtn { | ||
+ | background-color: inherit; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
− | + | .dropdown { | |
− | + | position: relative; | |
− | + | display: inline-block; | |
− | + | } | |
− | <a href="# | + | |
− | <a href="# | + | .dropdown-content { |
− | + | display: none; | |
− | + | position: absolute; | |
− | + | background-color: #f9f9f9; | |
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover {background-color: #f1f1f1} | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropbtn { | ||
+ | background-color: red; | ||
+ | } | ||
+ | </style> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Team</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="#">Members</a> | ||
+ | <a href="#">Mentors</a> | ||
+ | <a href="#">Attributions</a> | ||
+ | <a href="#">Pictures</a> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Project</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="#">Summary</a> | ||
+ | <a href="#">Article</a> | ||
+ | <a href="#">Presentation</a> | ||
+ | <a href="#">Poster</a> | ||
+ | <a href="#">Scientific Laboratory</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Human Practices</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="#">Survey</a> | ||
+ | <a href="#">Methane</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Laboratory</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="#">Safety</a> | ||
+ | <a href="#">Methods</a> | ||
+ | <a href="#">Lab Equipments</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </ul> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | <li><a href="#">METHUNGENY</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
<!-- Header --> | <!-- Header --> |
Revision as of 10:23, 2 September 2017