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

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
  <title>Cascading Menus</title>
  
−
<style>
+
  <style>
−
.dropbtn {
+
  * {
−
    background-color: #D9EDEB;
+
      margin: 0px;
−
    color: grey;
+
      padding: 0px;
−
    padding: 10px 15px;
+
    }
−
    font-family:GeosansLight;
+
 
−
    font-size: 22px;
+
  body {
−
    letter-spacing: 1.5px;
+
      font-family: GeosansLight;
−
    -webkit-text-stroke: 0.9px;
+
      background-color: #D9EDEB;
−
    border: none;
+
      padding: 50px;
−
    margin-top: -1000px;
+
      }
−
    margin-left: 50px;
+
−
}
+
  h1 {
 +
      text-align: center;
 +
      border-bottom: 2px solid #009;
 +
      margin-bottom: 50px;
 +
      }
  
−
.dropdown {
+
  /* rules for navigation menu */
−
    position: fixed;
+
  /* ==================================== */
−
    display: inline-block;
+
−
}
+
  ul#navmenu, ul.sub1 {
 +
      list-style-type: none;
 +
      }
  
−
.dropdown-content {
+
  ul#navmenu li {
−
    display: none;
+
    width: 125px;
−
    position: absolute;
+
    text-align: center;
−
    background-color: #45827A;
+
    position: relative;
−
    width: 140px;
+
    float: left;
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
  }
−
    margin-left: 50px;
+
−
}
+
  
−
.dropdown-content a {
+
  </style>
−
    color: white !important;
+
−
    font-family: GeosansLight;
+
−
    font-size: 15px;
+
−
    letter-spacing: 1px;
+
−
    padding: 5px 16px;
+
−
    text-decoration: none !important;
+
−
    display: block;
+
−
    font-weight:normal !important;
+
−
}
+
−
 
+
−
.dropdown-content a:hover {background-color: #22645B;}
+
−
 
+
−
.dropdown:hover .dropdown-content {display: block;}
+
−
 
+
−
.dropdown:hover .dropbtn {background-color: #C4DFDD;}
+
−
 
+
−
 
+
−
</style>
+
 
</head>
 
</head>
 +
<body>
  
−
<div class="dropdown">
+
<ul id="navmenu">
−
  <button class="dropbtn"><center>PROJECT</center></button>
+
  <li><a href="#">hyperlink 1</a></li>
−
  <div class="dropdown-content">
+
      <ul class="sub1">
−
    <a href="https://2018.igem.org/Team:British_Columbia/Description">DESCRIPTION</a>
+
          <li><a href="#">hyperlink 1.1</a></li>
−
    <a href="https://2018.igem.org/Team:British_Columbia/Naringenin">NARINGENIN</center></a>
+
          <li><a href="#">hyperlink 1.2</a></li>
−
    <a href="https://2018.igem.org/Team:British_Columbia/Biosensor">BIOSENSOR</a>
+
          <li><a href="#">hyperlink 1.3</a></li>
−
    <a href="https://2018.igem.org/Team:British_Columbia/Kaempferol">KAEMPFEROL</a>
+
          <li><a href="#">hyperlink 1.4</a></li>
−
  </div>
+
      </ul>
−
</div>
+
  </li>
 +
  <li><a href="#">hyperlink 2</a></li>
 +
  <li><a href="#">hyperlink 3</a></li>
 +
      <ul class="sub1">
 +
          <li><a href="#">hyperlink 3.1</a></li>
 +
          <li><a href="#">hyperlink 3.2</a></li>
 +
          <li><a href="#">hyperlink 3.3</a></li>
 +
          <li><a href="#">hyperlink 3.4</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="#">hyperlink 4</a></li>
 +
      <ul class="sub1">
 +
          <li><a href="#">hyperlink 4.1</a></li>
 +
          <li><a href="#">hyperlink 4.2</a></li>
 +
          <li><a href="#">hyperlink 4.3</a></li>
 +
          <li><a href="#">hyperlink 4.4</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="#">hyperlink 5</a></li>
 +
      <ul class="sub1">
 +
          <li><a href="#">hyperlink 5.1</a></li>
 +
          <li><a href="#">hyperlink 5.2</a></li>
 +
          <li><a href="#">hyperlink 5.3</a></li>
 +
          <li><a href="#">hyperlink 5.4</a></li>
 +
      </ul>
 +
  </li>
 +
</ul>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 04:37, 19 August 2018

Cascading Menus