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

Line 3: Line 3:
 
<head>
 
<head>
 
<style>
 
<style>
 +
/* NavigationBar */
 +
.navbar {
 +
  height: 70px;
 +
  background-color: transparent;
 +
  border: none;
 +
  color: #E4FDE1;
 +
  z-index: 100;
 +
  transition: background-color 1s ease 0s; }
 +
 +
.navbar-default .navbar-brand {
 +
  margin-top: 10px;
 +
  color: #E4FDE1; }
 +
  .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; }
 +
 +
/* Solid class attached on scroll past first section */
 +
/* #E4FDE1 = rgb(228, 253, 225) */
 +
.navbar.solid {
 +
  background-color: rgba(228, 253, 225, 0.95);
 +
  transition: background-color 1s ease 0s; }
 +
  .navbar.solid .navbar-brand {
 +
    color: #028090;
 +
    transition: color 1s ease 0s; }
 +
  .navbar.solid .navbar-nav > li > a {
 +
    color: #028090;
 +
    transition: color 1s ease 0s; }
 +
 +
/* Dropdown */
 +
 +
/*# sourceMappingURL=header.component.css.map */
  
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<nav class="navbar navbar-default navbar-fixed-top">
+
 
−
      <div class="container">
+
−
        <div class="navbar-header">
+
−
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+
−
          aria-expanded="false" aria-controls="navbar">
+
−
            <span class="sr-only">Toggle navigation</span>
+
−
            <span class="icon-bar"></span>
+
−
            <span class="icon-bar"></span>
+
−
            <span class="icon-bar"></span>
+
−
          </button>
+
−
          <a class="navbar-brand" href="https://2017.igem.org/Team:NCKU_Tainan">iGEM NCKU Tainan</a>
+
−
        </div>
+
−
        <div id="navbar" class="collapse navbar-collapse">
+
−
          <ul class="nav navbar-nav navbar-right">
+
−
            <li class="menus-dropdown">
+
−
              <a [routerLink]="['/project']">Project</a>
+
−
              <ul class="dropdown">
+
−
                <li><a href="#">Background</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/Design">Design</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/Notebook">Notebook</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/InterLab">InterLab</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Contribution">Contribution</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/Results">Results</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate">Demonstrate</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Improve">Improve</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Attributions">Attributions</a></li>
+
−
              </ul>
+
−
          </li>     
+
−
          </ul>
+
−
        </div><!--/.nav-collapse -->
+
−
      </div>
+
−
    </nav>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:52, 10 August 2017