Difference between revisions of "Template:Melbourne"

(Modifying the navbar)
(Adding drop down)
Line 113: Line 113:
 
     background-color: #ddd;
 
     background-color: #ddd;
 
     color: black;
 
     color: black;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
/* The subnavigation menu */
 +
.subnav {
 +
  float: left;
 +
  overflow: hidden;
 +
}
 +
 +
/* Subnav button */
 +
.subnav .subnavbtn {
 +
  font-size: 16px;
 +
  border: none;
 +
  outline: none;
 +
  color: white;
 +
  padding: 14px 16px;
 +
  background-color: inherit;
 +
  font-family: inherit;
 +
  margin: 0;
 +
}
 +
 +
/* Add a red background color to navigation links on hover */
 +
.subnav:hover .subnavbtn {
 +
  background-color: red;
 +
}
 +
 +
/* Style the subnav content - positioned absolute */
 +
.subnav-content {
 +
  display: none;
 +
  position: absolute;
 +
  left: 0;
 +
  background-color: red;
 +
  width: 100%;
 +
  z-index: 1;
 +
}
 +
 +
/* Style the subnav links */
 +
.subnav-content a {
 +
  float: left;
 +
  color: white;
 +
  text-decoration: none;
 +
}
 +
 +
/* Add a grey background color on hover */
 +
.subnav-content a:hover {
 +
  background-color: #eee;
 +
  color: black;
 +
}
 +
 +
/* When you move the mouse over the subnav container, open the subnav content */
 +
.subnav:hover .subnav-content {
 +
  display: block;
 
}
 
}
  
Line 570: Line 631:
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<div id="navbar">
 
<div id="navbar">
−
  <a href="#home" class="nav_icon"><img src="http://www.ampc.ms.unimelb.edu.au/srg/index_files/UOM.png" width="115px", height="95px"></a>
+
 
−
   <a href="#home" class="nav_text">Home</a>
+
<div class="subnav">
 +
    <img class="subnavbtn" src="http://www.ampc.ms.unimelb.edu.au/srg/index_files/UOM.png" width="115px", height="95px"><i class="fa fa-caret-down"></i></img>
 +
    <div class="subnav-content">
 +
<a href="#home" class="nav_text">Parts</a>
 +
<a href="#home" class="nav_text">Awards</a>
 +
<a href="#home" class="nav_text">Human Practices</a>
 +
<a href="#home" class="nav_text">Judging Form</a>
 +
    </div>
 +
   </div>
 +
 
 +
 
 +
<a href="#home" class="nav_text">Home</a>
 
   <a href="#home" class="nav_text">Team</a>
 
   <a href="#home" class="nav_text">Team</a>
 
   <a href="#home" class="nav_text">Project</a>
 
   <a href="#home" class="nav_text">Project</a>
−
  <a href="#home" class="nav_text">Parts</a>
 
 
   <a href="#home" class="nav_text">Safety</a>
 
   <a href="#home" class="nav_text">Safety</a>
−
<a href="#home" class="nav_text">Awards</a>
+
<br>
−
  <a href="#home" class="nav_text">Human Practices</a>
+
 
−
<a href="#home" class="nav_text">Judging Form</a>
+
 
 +
 
 +
 
 +
 
 +
 
  
 
</div>
 
</div>

Revision as of 14:44, 6 October 2018