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

 
(76 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>   
 
<html>   
−
         <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #7ae26f;">
+
    <!-- navbar -->
−
             <a class="navbar-brand" href="https://2018.igem.org/Team:NCKU_Tainan">NCKU Tainan</a>
+
    <body>
 +
         <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #5DD789; padding-top: 15px;">
 +
             <a class="navbar-brand" href="https://2018.igem.org/Team:NCKU_Tainan" style="font-size: 30px; color: white;">NCKU Tainan</a>
 
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
                 <span class="navbar-toggler-icon"></span>
 
                 <span class="navbar-toggler-icon"></span>
Line 8: Line 10:
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
                 <ul class="navbar-nav mr-auto">
 
                 <ul class="navbar-nav mr-auto">
−
                     <li class="nav-item active">
+
                     <li class="nav-item dropdown">
−
                         <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
+
                         <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
                                Project
 +
                            <span class="caret"></span>
 +
                        </a>
 +
                       
 +
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">               
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Description">Description</a>
 +
                            <div class="dropdown-divider"></div>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Design">Design</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Improve">Improve</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Results">Results</a>                               
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Protocol">Protocol</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Measurement">Measurement</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Parts">Parts</a>           
 +
                        </div>
 
                     </li>
 
                     </li>
−
                     <li class="nav-item">
+
                     <li class="nav-item dropdown">
−
                         <a class="nav-link" href="#">Project</a>
+
                         <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
                            Model
 +
                            <span class="caret"></span>
 +
                        </a>
 +
                       
 +
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Model">Model</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Kinetic_Law">Kinetic Law</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Analysis">Analysis</a>             
 +
                        </div>
 
                     </li>
 
                     </li>
 
                     <li class="nav-item dropdown">
 
                     <li class="nav-item dropdown">
Line 20: Line 45:
 
                         </a>
 
                         </a>
 
                          
 
                          
−
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">              
+
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
−
                             <a class="dropdown-item" href="#">Overview</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Software">Software</a>
−
                             <div class="dropdown-divider"></div>
+
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Hardware">Hardware</a>
−
                             <a class="dropdown-item" href="#">Software</a>
+
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Demonstrate">Demonstrate</a>  
−
                             <a class="dropdown-item" href="#">Hardware</a>
+
                             <div class="dropdown-divider"></div>
−
                             <a class="dropdown-item" href="#">Demonstrate</a>            
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/pH_meter">pH Meter</a>  
 +
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Temperature">Thermometer</a>                                            
 +
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/wi_fi">Wi-Fi Module</a> 
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/CO2">CO<sub>2</sub> Sensor</a>          
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
 
                     <li class="nav-item">
 
                     <li class="nav-item">
−
                         <a class="nav-link" href="#">Safety</a>
+
                         <a class="nav-link" href="https://2018.igem.org/Team:NCKU_Tainan/Safety">Safety</a>
 
                     </li>
 
                     </li>
−
                     <li>
+
                     <li class="nav-item dropdown">
−
                         <a class="nav-link" href="#">Human Practice</a>
+
                         <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
                            Human Practices
 +
                            <span class="caret"></span>
 +
                        </a>
 +
                       
 +
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">               
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Human_Practices">About</a>
 +
                            <div class="dropdown-divider"></div>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Integrated_Human_Practices">Integrated Human Practices</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Public_Engagement">Education & Public Engagement</a>                         
 +
                        </div>
 +
                    </li>
 +
                    <li class="nav-item dropdown">
 +
                        <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
                            Product Design
 +
                            <span class="caret"></span>
 +
                        </a>
 +
                       
 +
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">               
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Applied_Design">Product design</a>
 +
                            <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Entrepreneurship">Entrepreneurship</a>               
 +
                        </div>
 
                     </li>
 
                     </li>
 
                     <li class="nav-item dropdown">
 
                     <li class="nav-item dropdown">
Line 40: Line 89:
 
                         </a>
 
                         </a>
 
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">                 
 
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">                 
−
                             <a class="dropdown-item" href="#">Team members</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Team">Team Members</a>
−
                             <a class="dropdown-item" href="#">Collaboration</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Collaborations">Collaborations</a>
−
                             <a class="dropdown-item" href="#">Attribution</a>               
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:NCKU_Tainan/Attributions">Attributions</a>               
 
                         </div>
 
                         </div>
 +
                    </li>
 +
                    <li class="nav-item">
 +
                        <a class="nav-link" href="https://2018.igem.org/Team:NCKU_Tainan/Notebook">Notebook</a>
 +
                    </li>
 +
                    <li class="nav-item">
 +
                        <a class="nav-link" href="https://2018.igem.org/Team:NCKU_Tainan/Judge">Awards</a>
 
                     </li>
 
                     </li>
 
                 </ul>
 
                 </ul>
Line 49: Line 104:
 
         </nav>
 
         </nav>
 
     <style>
 
     <style>
−
          body {
 
−
        background-color: #272625;
 
−
      }
 
−
      p {
 
−
        color: #eee;
 
−
      }
 
−
      .page-footer h5 {
 
−
        color: #7ae26f;
 
−
      }
 
−
      .page-footer a {
 
−
        color: gray
 
−
      }
 
 
       .navbar {
 
       .navbar {
 
         padding-top: 10px;
 
         padding-top: 10px;
Line 70: Line 113:
 
       .nav-link {
 
       .nav-link {
 
         font-size: 20px;
 
         font-size: 20px;
 +
        padding-right: 1rem !important;
 +
        padding-left: .5rem !important;
 +
      }
 +
      a.dropdown-item {
 +
        color: #4F7F52;
 +
      }
 +
      a.dropdown-item:active {
 +
        background-color: #4F7F52;
 
       }
 
       }
 
       .caret {
 
       .caret {
Line 84: Line 135:
 
       .dropdown-menu li:hover .sub-menu {visibility: visible;}
 
       .dropdown-menu li:hover .sub-menu {visibility: visible;}
 
       .dropdown:hover .dropdown-menu {display: block;}
 
       .dropdown:hover .dropdown-menu {display: block;}
−
 
+
     
−
       @media (min-width: 992px) {
+
       @media (min-width: 1335px) {
 
         .navbar {
 
         .navbar {
−
           padding-left: 80px;
+
           padding-left: 30px !important;
−
           padding-right: 80px;
+
           padding-right: 30px !important;
 +
        }
 +
      }
 +
      @media (max-width: 1335px) {
 +
        .nav-link {
 +
          padding-right: .5rem !important;
 +
          font-size: 18px !important;
 +
        }
 +
      }
 +
      @media (max-width: 1160px) {
 +
        .nav-link {
 +
          padding-right: .3rem !important;
 +
          padding-left: .3rem !important;
 +
          font-size: 15px !important;
 +
        }
 +
      }
 +
      @media (max-width: 992px) {
 +
        .nav-link {
 +
          font-size: 20px !important;
 
         }
 
         }
 
       }
 
       }
Line 94: Line 163:
 
         .navbar-right form {
 
         .navbar-right form {
 
           display: none;
 
           display: none;
 +
        }
 +
        .head {
 +
          font-size: 30px !important;
 
         }
 
         }
 
       }
 
       }
 
     </style>
 
     </style>
 +
    </body>
 
</html>
 
</html>

Latest revision as of 17:25, 15 November 2018