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

Line 5: Line 5:
 
<style>
 
<style>
 
   /*------------Get rid of iGEM stuff----------------------------------*/
 
   /*------------Get rid of iGEM stuff----------------------------------*/
 +
 
   #home_logo,
 
   #home_logo,
 
   #sideMenu {
 
   #sideMenu {
Line 17: Line 18:
  
 
   #content {
 
   #content {
−
     margin-left: 30px;
+
     margin-left: 0px;
 
     margin-top: -7px;
 
     margin-top: -7px;
 
     padding: 0px;
 
     padding: 0px;
Line 25: Line 26:
 
   /*-------------------------------------------------------------------*/
 
   /*-------------------------------------------------------------------*/
  
−
  /*----Top Navigation Styling-----*/
+
/*----------------------Header Styling-------------------------*/
  
−
.topnav-box {
 
−
  float: left;
 
−
  background-color: #002855;
 
−
  width: 100%;
 
−
}
 
−
#topnav {
 
−
display: table;
 
−
background-color: #002855;
 
−
margin: 0;
 
−
text-align: center;
 
−
white-space: nowrap;
 
−
    padding: 10px;
 
−
    float: right;
 
−
}
 
  
−
#topnav li {
 
−
display: table-cell;
 
−
text-decoration: none;
 
−
display: inline-block;
 
−
line-height: 50px;
 
−
width: 220px;
 
−
}
 
  
−
#topnav a:visited {
+
/**/
−
color: #abb2b8;
+
#topnav {
−
}
+
display: flex;
 +
justify-content: center;
 +
background-color: #002855;
 +
margin: 0;
 +
list-style: none;
 +
padding: 40px;
  
−
.dropdown-main,
+
}
−
.nav-item {
+
#topnav div, a {
−
text-decoration: none;
+
  text-decoration: none;
−
font-size: 20px;
+
}
−
color: #abb2b8;
+
#topnav .nav-item:visited {
−
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
+
  color: white;
−
}
+
}
 +
#topnav .b-nav-item:visited {
 +
  color: #525b65;
 +
}
 +
.dropdown {
 +
  padding-left: 15px;
 +
  padding-right: 15px;
 +
}
 +
.dropdown-main,
 +
.nav-item {
 +
  font-size: 15px;
 +
  color: white;
 +
}
  
−
.no-dropdown {
+
.dropdown-content {
−
text-decoration: none;
+
display: none;
−
}
+
position: absolute;
 +
background-color: #f9f9f9;
 +
min-width: 200px;
 +
border-radius: 7px;
 +
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
z-index: 1;
 +
}
  
−
.dropdown-content {
+
.dropdown-content a {
−
display: none;
+
float: none;
−
position: absolute;
+
font-size: 14px;
−
background-color: #f9f9f9;
+
color: #525b65;
−
min-width: 150px;
+
padding: 12px 16px;
−
margin-left: 30px;
+
display: block;
−
    border-radius:7px;
+
text-align:left;
−
}
+
}
 +
.dropdown:hover .dropdown-content {
 +
display: block;
 +
}
  
−
.dropdown-content a {
+
.dropdown-content a:hover {
−
color: #525b65;
+
color: black;
−
padding: 6px 8px;
+
−
text-decoration: none;
+
−
display: block;
+
−
text-align: left;
+
−
    font-weight: bold; 
+
−
}
+
−
  .dropdown-content a:hover {
+
−
    color: black;
+
 
}
 
}
  
 +
/*-----------Burger Menu Styling-------------*/
  
−
#topnav li a:hover {
+
#topnav .burger {
−
text-decoration: none;
+
  display: none;
−
}
+
  margin-right: 20px;
−
.dropdown:hover .dropdown-content {
+
  color: #d9a900;
−
display: block;
+
  font-size: 18px;
−
}
+
}
  
−
/*--------------------------------*/
+
.burger-content {
 +
  display: none;
 +
  position: absolute;
 +
  background-color: #f9f9f9;
 +
  border-radius: 7px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 +
  z-index: 1;
 +
  width: 200px;
 +
  margin-left: -200px;
  
−
</style>
+
}
  
 +
.b-dropdown-main {
 +
font-weight: bold;
 +
font-size: 15px;
 +
color: #525b65;
 +
padding: 12px 16px;
 +
display: block;
 +
text-align: left;
 +
overflow: hidden;
 +
}
 +
.b-dropdown-content {
 +
  display: none;
 +
  position: block;
 +
  color: #525b65;
 +
  padding: 12px;
 +
}
 +
.b-dropdown-content a {
 +
  display: block;
 +
  padding: 5px;
 +
  color: #525b65;
 +
  font-weight: normal;
 +
  font-size: 14px;
  
 +
}
 +
#topnav .b-dropdown:hover .b-dropdown-content {
 +
  display: block;
 +
}
 +
#topnav .b-dropdown-content a:hover {
 +
  color: black;
 +
}
 +
#topnav .b-dropdown-content a:visited {
 +
  color: black;
 +
}
  
−
<body>
+
input[type=checkbox]{
 +
  display: none;
 +
}
 +
input[type=checkbox]:checked ~ .burger-content {
 +
  display: block;
 +
}
  
−
<!--______________Top Navigation Bar_________________________-->
+
@media screen and (max-width:720px) {
−
<div class="topnav-box">
+
  #topnav li {
−
<ul id="topnav">
+
    display: none;
−
<li class="dropdown"><a href="Project" class="dropdown-main">Project</a>
+
  }
 +
  #topnav {
 +
    justify-content: flex-end;
 +
  }
 +
 
 +
  #topnav li.burger {
 +
    display: block;
 +
  }
 +
}
 +
 
 +
</style>
 +
<body>
 +
  <!--______________Top Navigation Bar_________________________-->
 +
<ul = id="topnav">
 +
<li class="dropdown"><a href="PROJECT" class="dropdown-main">PROJECT</a>
 
<div class="dropdown-content">
 
<div class="dropdown-content">
−
<a href="#">Link 1</a>
+
        <a href="#">Design</a>
−
<a href="#">Link 2</a>
+
        <a href="#">Results</a>
−
<a href="#">Link 3</a>
+
        <a href="#">Modelling</a>
 +
        <a href="#">InterLab</a>
 
</div>
 
</div>
 
</li>
 
</li>
−
<li class="dropdown"><a href="Practices" class="dropdown-main">Practices</a>
+
<li class="dropdown"><a href="Human-Resources" class="dropdown-main">HUMAN RESOURCES</a>
 
<div class="dropdown-content">
 
<div class="dropdown-content">
−
<a href="#">Link 1</a>
+
        <a href="#">Motivation</a>
−
<a href="#">Link 2</a>
+
        <a href="#">Outreach</a>
−
<a href="#">Link 3</a>
+
        <a href="#">Policy</a>
 
</div>
 
</div>
 
</li>
 
</li>
−
<li class="dropdown"><a href="Tools" class="dropdown-main">Tools</a>
+
<li class="dropdown"><a href="Parts" class="dropdown-main">PARTS</a>
 
<div class="dropdown-content">
 
<div class="dropdown-content">
−
<a href="#">Link 1</a>
+
        <a href="#">Basic</a>
−
<a href="#">Link 2</a>
+
        <a href="#">Composite</a>
−
<a href="#">Link 3</a>
+
        <a href="#">Parts Collection</a>
 
</div>
 
</div>
 
</li>
 
</li>
−
<li class="dropdown"><a href="Acknowledgements" class="dropdown-main">Acknowledgements</a>
+
    <li class="navlogo"><img src="" alt=""></li>
 +
<li class="dropdown"><a href="Lab" class="dropdown-main">LAB WORK</a>
 
<div class="dropdown-content">
 
<div class="dropdown-content">
−
<a href="#">Link 1</a>
+
        <a href="#">Notebook</a>
−
<a href="#">Link 2</a>
+
        <a href="#">Methods and Materials</a>
−
<a href="#">Link 3</a>
+
        <a href="#">Safety</a>
 +
</div>
 +
</li>
 +
<li class="dropdown"><a href="Team" class="nav-item">TEAM</a>
 +
      <div class="dropdown-content">
 +
        <a href="#">Meet the Team</a>
 +
        <a href="#">Advisors</a>
 +
        <a href="#">Sposors</a>
 +
</div>
 +
  </li>
 +
  <li class="dropdown"><a href="Achievements" class="nav-item">ACHIEVEMENTS</a>
 +
    <div class="dropdown-content">
 +
      <a href="#">Medal Requirements</a>
 +
      <a href="#">Outreach</a>
 +
    </div>
 +
</li>
 +
 
 +
<!--___________________________________Burger Menu____________________________________________-->
 +
<li class="burger"><input type="checkbox" id="b-control"><label for="b-control">&#9776;</label>
 +
<div class="burger-content">
 +
<div class="b-dropdown"><a href="PROJECT" class="b-dropdown-main">Project</a>
 +
<div class="b-dropdown-content">
 +
            <a href="#">Design</a>
 +
            <a href="#">Results</a>
 +
            <a href="#">Modelling</a>
 +
            <a href="#">InterLab</a>
 +
</div>
 +
</div>
 +
<div class="b-dropdown"><a href="Human-Resources" class="b-dropdown-main">Human Resources</a>
 +
<div class="b-dropdown-content">
 +
            <a href="#">Motivation</a>
 +
            <a href="#">Outreach</a>
 +
            <a href="#">Policy</a>
 +
</div>
 +
</div>
 +
<div class="b-dropdown"><a href="Parts" class="b-dropdown-main">Parts</a>
 +
<div class="b-dropdown-content">
 +
            <a href="#">Basic</a>
 +
            <a href="#">Composite</a>
 +
            <a href="#">Parts Collection</a>
 +
</div>
 +
</div>
 +
<div class="b-dropdown"><a href="Lab" class="b-dropdown-main">Lab Work</a>
 +
<div class="b-dropdown-content">
 +
            <a href="#">Notebook</a>
 +
            <a href="#">Methods and Materials</a>
 +
            <a href="#">Safety</a>
 +
</div>
 +
</div>
 +
        <div class="b-dropdown"><a href="Team" class="b-dropdown-main">Team</a>
 +
<div class="b-dropdown-content">
 +
            <a href="#">Meet the Team</a>
 +
            <a href="#">Advisors</a>
 +
            <a href="#">Sposors</a>
 +
</div>
 +
</div>
 +
        <div class="b-dropdown"><a href="Achievements" class="b-dropdown-main">Achievements</a>
 +
<div class="b-dropdown-content">
 +
            <a href="#">Medal Requirements</a>
 +
            <a href="#">Outreach</a>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</li>
 
</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>
 
</ul>
−
</div>
+
<!--__________________________________________________________________________________________-->
−
 
+
−
<!--_________________________________________________________-->
+
−
 
+
  
 +
<!--______________________________________________________________________________-->
  
 
</body>
 
</body>
−
 
  
  
 
</html>
 
</html>

Revision as of 00:53, 9 August 2018

iGEM