Difference between revisions of "Template:NCKU Tainan/Header"

 
(48 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{NCKU_Tainan/bootstrap_min_css}}
 
{{NCKU_Tainan/bootstrap_min_css}}
 +
{{NCKU_Tainan/font-awesome_min_css}}
 
{{NCKU_Tainan/Style}}
 
{{NCKU_Tainan/Style}}
 
<html>
 
<html>
 
<head>
 
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
<style>
 
<style>
  
  
 
/* NavigationBar */
 
/* NavigationBar */
−
.navbar {
+
@import url("https://fonts.googleapis.com/css?family=Roboto|Open+Sans|Raleway|Montserrat");
−
  height: 70px;
+
 
−
   background-color: transparent;
+
 
−
   border: none;
+
.navbar{
−
   color: #E4FDE1;
+
   background-color: rgba(255,255,255,0.8);
−
  z-index: 100;
+
   border: 0px;
−
  transition: background-color 1s ease 0s;
+
   padding-top: 10px;
 
}
 
}
−
.navbar-default .navbar-brand {
+
@media (min-width: 992px) {
−
   margin-top: 10px;
+
   .navbar{
−
  color: #E4FDE1;
+
     padding-left: 80px;
−
}
+
    padding-right: 80px;
−
.navbar-default .navbar-brand:hover {
+
   }
−
     color: #cdf4c8;
+
−
}
+
−
.navbar-default .navbar-nav > li > a {
+
−
  color: #E4FDE1;
+
−
  font-family: 'Athiti', sans-serif;
+
−
  font-size: 17px;
+
−
  margin: 10px 5px 5px 5px;
+
−
}
+
−
.navbar-default .navbar-nav > li > a:hover {
+
−
  color: #cdf4c8;
+
−
}
+
−
.navbar-default .navbar-nav > li > a:focus {
+
−
  color: #cdf4c8;
+
−
}
+
−
.navbar-default .navbar-nav > li > a:active {
+
−
  color: #E4FDE1;
+
−
}
+
−
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+
−
  background-color: transparent;
+
−
  color: #cdf4c8;
+
−
}
+
−
.navbar-default .navbar-nav .menus-dropdown {
+
−
  position: relative;
+
−
}
+
−
.navbar-default .navbar-nav .menus-dropdown:hover .dropdown {
+
−
  visibility: visible;
+
−
  opacity: 1;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown {
+
−
  position: absolute;
+
−
  opacity: 0;
+
−
  visibility: hidden;
+
−
  border: 1px solid #ECECEC;
+
−
  padding: 10px 30px;
+
−
  z-index: 999;
+
−
   background: rgba(228, 225, 253, 0.7);
+
−
  width: auto;
+
−
  margin-top: 0;
+
−
  transition: all 0.2s ease-in-out;
+
−
  -webkit-transition: all 0.2s ease-in-out;
+
−
  -moz-transition: all 0.2s ease-in-out;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown li {
+
−
  line-height: 30px;
+
−
  float: none;
+
−
  list-style: none;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown a {
+
−
  font-size: 17px;
+
−
  font-family: 'Athiti', sans-serif;
+
−
  font-weight: normal;
+
−
  color: #020709;
+
−
  text-decoration: none;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown a:hover {
+
−
  color: #456990;
+
−
}
+
−
.navbar-default .navbar-toggle {
+
−
  border-color: #028090;
+
−
}
+
−
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+
−
  background-color: #490D40;
+
−
}
+
−
.navbar-default .navbar-toggle .icon-bar {
+
−
  color: #C57ED3;
+
−
  background-color: #028090;
+
−
}
+
−
.navbar-default .navbar-collapse.collapse.in ul {
+
−
  background-color: #490D40;
+
 
}
 
}
  
Line 94: Line 28:
 
/* #E4FDE1 = rgb(228, 253, 225) */
 
/* #E4FDE1 = rgb(228, 253, 225) */
 
.navbar.solid {
 
.navbar.solid {
−
   background-color: rgba(228, 253, 225, 0.95);
+
   background-color: rgba(255, 255, 255, 0.75);
 
   transition: background-color 1s ease 0s;
 
   transition: background-color 1s ease 0s;
 
}
 
}
−
.navbar.solid .navbar-brand {
+
/*.navbar.solid .navbar-brand {
 
   color: #028090;
 
   color: #028090;
 
   transition: color 1s ease 0s;
 
   transition: color 1s ease 0s;
Line 103: Line 37:
 
.navbar.solid .navbar-nav > li > a {
 
.navbar.solid .navbar-nav > li > a {
 
   color: #028090;
 
   color: #028090;
−
   transition: color 1s ease 0s; }
+
   transition: color 1s ease 0s;
 +
}*/
  
−
/* Dropdown */
+
.dropdown-li{
 +
  font-size: 22px;
 +
}
 +
.dropdown-menu {
 +
  background-color: rgba(255, 255, 255, 0.8);
 +
  box-shadow: none;
 +
}
 +
 
 +
.navbar span {
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-size: 22px;
 +
  font-weight: normal;
 +
  color: #333;
 +
}
 +
 
 +
 
 +
.navbar .brand {
 +
  font-size: 32px;
 +
  font-weight: normal;
 +
  margin-top: 16px;
 +
}
 +
 
 +
.logo {
 +
  height: 40px;
 +
  width: auto;
 +
  display: inline-block;
 +
  margin-top: -9px;
 +
}
 +
@media (min-width:992px) {
 +
  .dropdown-toggle::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 30px;
 +
    height: 0px;
 +
    left: 35%;
 +
    bottom: 9px;
 +
    border-bottom: 3px solid #f9cb8f;
 +
  }
 +
  .dropdown-toggle {
 +
    position: relative;
 +
  }
 +
  .dropdown-toggle:hover::after {
 +
    border: none;
 +
  }
 +
  .dropdown-hp::after {
 +
    left: 42%;
 +
  }
 +
  .navbar-default .navbar-nav>.open>a::after, .navbar-default .navbar-nav>.open>a:hover::after, .navbar-default .navbar-nav>.open>a:focus::after {
 +
    border: none;
 +
  }
 +
}
  
−
/*# sourceMappingURL=header.component.css.map */
 
  
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<nav class="navbar navbar-default navbar">
+
<nav class="navbar navbar-default navbar-fixed-top">
−
      <div class="container">
+
  <div class="container-fluid">
−
        <div class="navbar-header">
+
    <div class="navbar-header">
−
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
−
          aria-expanded="false" aria-controls="navbar">
+
        <span class="sr-only">Toggle navigation</span>
−
            <span class="sr-only">Toggle navigation</span>
+
        <span class="icon-bar"></span>
−
            <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
−
            <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
−
            <span class="icon-bar"></span>
+
      </button>
−
          </button>
+
      <a class="pull-left" [routerLink]="['/home']" >
−
          <a class="navbar-brand" href="https://2017.igem.org/Team:NCKU_Tainan">iGEM NCKU Tainan</a>
+
        <!-- <img src="#" alt="NCKU_Tainan logo" class="logo">--!>
−
        </div>
+
      </a>
−
        <div id="navbar" class="collapse navbar-collapse">
+
      <a href="https://2017.igem.org/Team:NCKU_Tainan"><span class="pull-left brand">&nbsp;NCKU Tainan</span></a>
−
          <ul class="nav navbar-nav navbar-right">
+
    </div>
−
            <li class="menus-dropdown">
+
    <div id="navbar" class="collapse navbar-collapse">
−
              <a href="#">Team</a>
+
      <ul class="nav navbar-nav navbar-right">
−
              <ul class="dropdown">
+
        <li class="dropdown">
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Team">Team</a></li>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Project</span></a>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Collaborations">Collabrations</a></li>
+
          <ul class="dropdown-menu">
−
              </ul>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Description"><span class="dropdown-li">Description</span></a></li>
−
            </li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Design"><span class="dropdown-li">Design</span></a></li>
−
             <li class="menus-dropdown">
+
             <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Results"><span class="dropdown-li">Results</span></a></li>
−
              <a href="#">Project</a>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Model"><span class="dropdown-li">Model</span></a></li>
−
              <ul class="dropdown">
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Contribution"><span class="dropdown-li">Contribution</span></a></li>
−
                <li><a href="#">Background</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Improve"><span class="dropdown-li">Improve</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Description">Description</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Safety"><span class="dropdown-li">Safety</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Design">Design</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Notebook"><span class="dropdown-li">Notebook</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Experiments">Experiments</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Protocol"><span class="dropdown-li">Protocol</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Notebook">Notebook</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Parts"><span class="dropdown-li">Parts</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/InterLab">InterLab</a></li>
+
          </ul>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Contribution">Contribution</a></li>
+
        </li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Model">Model</a></li>
+
        <li class="dropdown">
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Results">Results</a></li>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Device</span></a>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate">Demonstrate</a></li>
+
          <ul class="dropdown-menu">
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Improve">Improve</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Hardware"><span class="dropdown-li">Hardware</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Attributions">Attributions</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate"><span class="dropdown-li">Demonstrate</span></a></li>
−
              </ul>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Software"><span class="dropdown-li">Software</span></a></li>
−
            </li>
+
          </ul>
−
            <li class="menus-dropdown">
+
        </li>
−
              <a href="#">Parts</a>
+
        <li class="dropdown">
−
                <ul class="dropdown">
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Team</span></a>
−
                  <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Parts">Parts</a></li>
+
          <ul class="dropdown-menu">
−
                  <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Basic_Part">Basic Part</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Team"><span class="dropdown-li">Team</span></a></li>
−
              <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Composite_Part">Composite Part</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Attributions"><span class="dropdown-li">Attributions</span></a></li>
−
              <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Part_Collection">Part Collection</a></li>
+
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Collaborations"><span class="dropdown-li">Collaboration</span></a></li>
−
                </ul>
+
          </ul>
−
             </li>
+
        </li>
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle dropdown-hp" data-toggle="dropdown" href="#"><span>Human Practice</span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Overview"><span class="dropdown-li">Overview</span></a></li>
 +
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/HP/Silver"><span class="dropdown-li">Human Practice</span></a></li>
 +
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/HP/Gold_Integrated"><span class="dropdown-li">Integrated Practice</span></a></li>
 +
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Engagement"><span class="dropdown-li">Public Engagement</span></a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Awards</span></a>
 +
          <ul class="dropdown-menu">
 +
              
 +
            <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Measurement"><span class="dropdown-li">Measurement</span></a></li>
  
−
          <li class="menus-dropdown">
 
−
                <a href="#">Human Practices</a>
 
−
                  <ul class="dropdown">
 
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/HP/Silver">Silver</a></li>
 
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/HP/Gold_Integrated">Gold_Integrated</a></li>
 
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Engagement">Engagement</a></li>
 
−
                  </ul>
 
−
            </li>
 
−
          <li class="menus-dropdown">
 
−
                <a href="#">Awards</a>
 
−
                  <ul class="dropdown">
 
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Applied_Design">Applied Design</a></li>
 
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Entrepreneurship">Entrepreneurship</a></li>
 
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Measurement">Measurement</a></li>
 
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Model">Model</a></li>
 
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Plant">Plant</a></li>
 
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Software">Software</a></li>
 
−
                  </ul>
 
−
                </li>
 
 
           </ul>
 
           </ul>
−
         </div><!--/.nav-collapse -->
+
         </li>
−
      </div>
+
 
−
    </nav>
+
 
 +
      </ul>
 +
    </div>
 +
    <!--/.nav-collapse -->
 +
  </div>
 +
</nav>
 +
 
 +
 
 +
 
 +
<script src="https://2017.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="https://2017.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="https://2017.igem.org/Template:NCKU_Tainan/js/main_js?action=raw&amp;ctype=text/javascript"></script>
 +
 
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 19:16, 1 November 2017