Difference between revisions of "Template:British Columbia/Header"

Line 1: Line 1:
−
<html>
+
<style>
 +
/* Style The Dropdown Button */
 +
.dropbtn {
 +
    background-color: #4CAF50;
 +
    color: white;
 +
    padding: 16px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
}
  
−
<div class="navbar">
+
/* The container <div> - needed to position the dropdown content */
−
    <ul>
+
.dropdown {
−
        <li>
+
     position: relative;
−
            <a href="/Team:British_Columbia">Project</a>
+
     display: inline-block;
−
            <ul>
+
}
−
                <li><a href="/Team:British_Columbia">Description</a></li>
+
−
            </ul>
+
−
        </li>
+
−
        <li>
+
−
            <a href="/Team:British_Columbia">Human Practices</a>
+
−
        </li>
+
−
        <li>
+
−
            <a href="/Team:British_Columbia">Team</a>
+
−
            <ul>
+
−
                <li><a href="/Team:British_Columbia">Members</a></li>
+
−
                <li><a href="/Team:British_Columbia">Attributions</a></li>
+
−
            </ul>
+
−
        </li>
+
−
    </ul>
+
−
</div>
+
−
<div class="mob-navbar"></div>
+
−
<a href="https://2018.igem.org/Team:British_Columbia" class="logoleft">
+
−
     <img src="https://2018.igem.org/File:T--British_Columbia--general_logo.png" width="70" height="46">
+
−
     <img class="dark" src="https://2018.igem.org/File:T--British_Columbia--general_logo.png" width="70" height="46">
+
−
</a>
+
  
−
<div class="menu-trigger"><span></span><span></span><span></span></div>
+
/* Dropdown Content (Hidden by Default) */
 +
.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;
 +
}
  
−
<div class="helper">
+
/* Links inside the dropdown */
−
    <img src="https://2018.igem.org/File:T--British_Columbia--general_logo.png" width="88" height="62">
+
.dropdown-content a {
−
     <p>use keyboard, swipe or scroll</p>
+
    color: black;
−
</div>
+
    padding: 12px 16px;
 +
    text-decoration: none;
 +
     display: block;
 +
}
  
−
</html>
+
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
/* Change the background color of the dropdown button when the dropdown content is shown */
 +
.dropdown:hover .dropbtn {
 +
    background-color: #3e8e41;
 +
}
 +
</style>
 +
 
 +
<div class="dropdown">
 +
  <button class="dropbtn">Dropdown</button>
 +
  <div class="dropdown-content">
 +
    <a href="#">https://2018.igem.org/Team:British_Columbia</a>
 +
    <a href="#">https://2018.igem.org/Team:British_Columbia</a>
 +
    <a href="#">https://2018.igem.org/Team:British_Columbia</a>
 +
  </div>
 +
</div>

Revision as of 19:33, 18 August 2018

<style> /* Style The Dropdown Button */ .dropbtn { 

   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
   cursor: pointer;

}

/* The container
- needed to position the dropdown content */

.dropdown { 

   position: relative;
   display: inline-block;

}

/* Dropdown Content (Hidden by Default) */ .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;

}

/* Links inside the dropdown */ .dropdown-content a { 

   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;

}

/* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { 

   display: block;

}

/* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { 

   background-color: #3e8e41;

} </style> 

 <button class="dropbtn">Dropdown</button>

   <a href="#">https://2018.igem.org/Team:British_Columbia</a>
   <a href="#">https://2018.igem.org/Team:British_Columbia</a>
   <a href="#">https://2018.igem.org/Team:British_Columbia</a>