Difference between revisions of "Template:UC Davis/header"

Line 5: Line 5:
 
<style>
 
<style>
 
   /*------------Get rid of iGEM stuff----------------------------------*/
 
   /*------------Get rid of iGEM stuff----------------------------------*/
−
 
+
body {
 +
  background-color: black;
 +
}
 
   #home_logo,
 
   #home_logo,
 
   #sideMenu {
 
   #sideMenu {
Line 26: Line 28:
 
   /*-------------------------------------------------------------------*/
 
   /*-------------------------------------------------------------------*/
  
−
/*----------------------Header Styling-------------------------*/
+
  /*----Top Navigation Styling-----*/
  
−
.header {
+
#topnav {
−
  overflow: hidden;
+
display: table;
 +
width: 100%;
 +
background-color: #002855;
 +
margin: 0;
 +
text-align: right;
 +
white-space: nowrap;
 +
}
  
−
  background-color: #002855;
+
#topnav li {
−
  padding: 20px 10px;
+
display: table-cell;
−
  margin: 0 0 0 0;
+
text-decoration: none;
−
  width: 100%;
+
display: inline-block;
−
}
+
line-height: 50px;
 +
width: 220px;
 +
}
  
−
.dropdown-main, .nav-item, .logo {
+
#topnav li a:hover {
−
  float: left;
+
text-decoration: none;
−
  color: white;
+
color: #123b68;
−
  text-align: center;
+
}
−
  padding: 12px;
+
−
  text-decoration: none;
+
−
  font-size: 14px;
+
−
  line-height: 35px;
+
−
  border-radius: 4px;
+
−
}
+
  
−
.header a.logo {
+
#topnav a:visited {
−
  font-size: 15px;
+
color: white;
−
  font-weight: bold;
+
}
−
}
+
  
 +
.dropdown-main,
 +
.nav-item {
 +
text-decoration: none;
 +
font-size: 20px;
 +
color: white;
 +
    border-radius: 80px;
 +
/*  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
 +
}
  
−
@media screen and (max-width: 500px) {
+
.no-dropdown {
−
  .header a {
+
text-decoration: none;
−
    float: none;
+
}
−
    display: inline-block;
+
−
    text-align: none;
+
−
  }
+
−
}
+
  
−
/**/
+
.dropdown-content {
−
#topnav {
+
display: none;
−
  text-align: center;
+
position: absolute;
 +
background-color: #f9f9f9;
 +
min-width: 150px;
 +
margin-left: 30px;
 +
    border-radius:7px;
 +
}
  
−
}
+
.dropdown-content a {
−
#topnav li ul{
+
color: black;
−
  position: absolute;
+
padding: 6px 8px;
−
  width: 150px;
+
text-decoration: none;
−
  display: none;
+
display: block;
−
}
+
text-align: left;
−
#topnav li ul li a {display:block !important;}
+
margin: 0;
−
/* The dropdown container */
+
}
−
.dropdown {
+
−
  display: inline-block
+
−
}
+
  
−
/* Dropdown button */
+
.dropdown:hover .dropdown-content {
−
.dropdown .dropbtn {
+
display: block;
−
  font-size: 15px;
+
}
−
  border: none;
+
−
  outline: none;
+
−
  color: white;
+
−
  padding: 14px 16px;
+
−
  background-color: inherit;
+
−
  font-family: inherit; /* Important for vertical align on mobile phones */
+
−
  margin: 0; /* Important for vertical align on mobile phones */
+
−
}
+
−
/* Adds navy blue color to backgroup to navbar links
+
−
#topnav li a:hover, .dropdown:hover .dropbtn {
+
−
background-color: #123b68;
+
−
}*/
+
−
/* Dropdown content (hidden by default) */
+
−
.dropdown-content {
+
−
display: none;
+
−
position: absolute;
+
−
background-color: #eff1f2;
+
−
min-width: 200px;
+
−
border-radius: 8px;
+
−
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
z-index: 1;
+
−
}
+
  
−
/* Links inside the dropdown */
+
/*--------------------------------*/
−
.dropdown-content a {
+
−
float: none;
+
−
color: black;
+
−
padding: 12px 16px;
+
−
text-decoration: none;
+
−
display: block;
+
−
text-align:left;
+
−
}
+
  
−
/* Add a grey background color to dropdown links on hover */
+
</style>
−
.dropdown-content a:hover {
+
−
background-color: #ddd;
+
−
}
+
  
−
/* Show the dropdown menu on hover */
 
−
.dropdown:hover .dropdown-content {
 
−
display: block;
 
−
}
 
−
hr {
 
−
    border-width: 0.05px;
 
  
−
}
 
  
−
</style>
 
 
<body>
 
<body>
−
  <!--______________Top Navigation Bar____________-->
 
−
  <div class="header">
 
−
  <ul id="topnav">
 
  
−
      <!--______________Logo____________-->
+
<!--______________Top Navigation Bar_________________________-->
−
      <!--______________Cenozoic____________-->
+
<ul id="topnav">
−
   
+
<li class="dropdown"><a href="Project" class="dropdown-main">Project</a>
 +
<div class="dropdown-content">
 +
<a href="#">Link 1</a>
 +
<a href="#">Link 2</a>
 +
<a href="#">Link 3</a>
 +
</div>
 +
</li>
 +
<li class="dropdown"><a href="Practices" class="dropdown-main">Practices</a>
 +
<div class="dropdown-content">
 +
<a href="#">Link 1</a>
 +
<a href="#">Link 2</a>
 +
<a href="#">Link 3</a>
 +
</div>
 +
</li>
 +
<li class="dropdown"><a href="Tools" class="dropdown-main">Tools</a>
 +
<div class="dropdown-content">
 +
<a href="#">Link 1</a>
 +
<a href="#">Link 2</a>
 +
<a href="#">Link 3</a>
 +
</div>
 +
</li>
 +
<li class="dropdown"><a href="Acknowledgements" class="dropdown-main">Acknowledgements</a>
 +
<div class="dropdown-content">
 +
<a href="#">Link 1</a>
 +
<a href="#">Link 2</a>
 +
<a href="#">Link 3</a>
 +
</div>
 +
</li>
 +
<li class="no-dropdown"><a href="Safety" class="nav-item">Safety</a></li>
 +
<li class="no-dropdown"><a href="iGEM" class="nav-item">iGEM</a></li>
 +
</ul>
 +
<!--_________________________________________________________-->
  
−
      <!--______________Project____________-->
 
−
      <div class="dropdown">
 
−
      <button class="dropbtn">Project</button>
 
−
      <div class="dropdown-content">
 
−
      <a href="https://2018.igem.org/Team:UC_Davis/InterLab">Interlab</a>
 
−
      <a href="#">Link 2</a>
 
−
      <a href="#">Link 3</a>
 
−
      </div>
 
−
      </div>
 
  
−
      <!--______________Human Resources____________-->
 
−
    <div class="dropdown">
 
−
    <button class="dropbtn">Human Resources</button>
 
−
    <div class="dropdown-content">
 
−
    <a href="#">Link 1</a>
 
−
    <a href="#">Link 2</a>
 
−
    <a href="#">Link 3</a>
 
−
    </div>
 
−
    </div>
 
  
−
    <!--______________Tools____________-->
+
</body>
−
    <div class="dropdown">
+
−
    <button class="dropbtn">Tools</button>
+
−
    <div class="dropdown-content">
+
−
    <a href="#">Link 1</a>
+
−
    <a href="#">Link 2</a>
+
−
    <a href="#">Link 3</a>
+
−
    </div>
+
−
    </div>
+
−
   
+
  
−
      <!--______________Safety____________-->
 
−
      <div class="dropdown">
 
−
      <button class="dropbtn">Safety</button>
 
−
      <div class="dropdown-content">
 
−
      <a href="#">Link 1</a>
 
−
      <a href="#">Link 2</a>
 
−
      <a href="#">Link 3</a>
 
−
      </div>
 
−
      </div>
 
−
 
−
      <!--______________Acknowledgements____________-->
 
−
      <div class="dropdown">
 
−
      <button class="dropbtn">Acknowledgements</button>
 
−
      <div class="dropdown-content">
 
−
      <a href="#">Link 1</a>
 
−
      <a href="#">Link 2</a>
 
−
      <a href="#">Link 3</a>
 
−
      </div>
 
−
      </div>
 
−
 
−
      <!--______________iGEM____________-->
 
−
      <div class="dropdown">
 
−
      <button class="dropbtn">iGEM</button>
 
−
      </div>
 
−
 
−
      </ul>
 
−
  <!--_________________________________________________________-->
 
−
  </div>
 
−
 
−
<div style='border-bottom: 2px solid #525B68'></div>
 
−
 
 
−
</body>
 
  
  
 
</html>
 
</html>

Revision as of 17:01, 31 July 2018

iGEM