Difference between revisions of "Team:USTC-Software/Header"

 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<html>
 +
<link rel="stylesheet" type="text/css"
 +
    href="https://2019.igem.org/Template:USTC-Software/css/default?action=raw&ctype=text/css">
 +
<link rel="stylesheet" type="text/css"
 +
    href="https://2019.igem.org/Template:USTC-Software/css/bootstrap?action=raw&ctype=text/css">
 +
<script type="text/javascript"
 +
    src="https://2019.igem.org/Template:USTC-Software/js/jquery?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript"
 +
    src="https://2019.igem.org/Template:USTC-Software/js/popper?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript"
 +
    src="https://2019.igem.org/Template:USTC-Software/js/bootstrap?action=raw&ctype=text/javascript"></script>
  
−
   
+
<style>
−
      
+
     #collapsibleNavbar {
−
    <html>
+
        justify-content: center;
−
<link rel="stylesheet" href="https://2019.igem.org/Template:USTC-Software/style?action=raw&ctype=text/css">
+
    }
−
<link rel="stylesheet" href="https://2019.igem.org/Template:USTC-Software/font-awesome">
+
−
<link rel="stylesheet" href="https://2019.igem.org/Template:USTC-Software/materialize">
+
  
−
        <nav class="indigo">
+
     .nav-link {
−
     <div class="nav-wrapper">
+
         margin-left: 20px;
−
         <a href="http://localhost:4000/#" data-activates="main-menu" class="button-collapse">
+
    }
−
            <i class="fa fa-navicon"></i>
+
 
−
         </a>
+
    .dropdown-menu.show {
−
         <div class="">
+
        display: flex;
−
            <a href="http://localhost:4000/" class="brand-logo hide-on-med-and-down">Hexo</a>
+
        flex-direction: column;
−
            <ul class="right hide-on-med-and-down">
+
         text-align: center;
−
               
+
         top: 46px;
−
                    <li>
+
    }
−
                        <a class="menu-home " href="http://localhost:4000/">
+
    .dropdown-menu.show a:visited {
−
                            <i class="fa fa-home "></i>
+
        color: #007bff;
−
                           
+
    }
−
                            Home
+
</style>
−
                        </a>
+
 
−
                    </li>
+
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
−
               
+
    <a class="navbar-brand" href="#">USTC-SOFTWARE</a>
−
                    <li>
+
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
−
                        <a class="menu-archive " href="http://localhost:4000/archives">
+
        <span class="navbar-toggler-icon"></span>
−
                            <i class="fa fa-archive "></i>
+
    </button>
−
                           
+
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
−
                            Archives
+
        <ul class="navbar-nav">
−
                        </a>
+
            <li class="nav-item dropdown">
−
                    </li>
+
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">TEAM</a>
−
               
+
                <div class="dropdown-menu">
−
                    <li>
+
                     <a href="#" class="drop-item">Team Members</a>
−
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu">
+
                     <a href="#" class="drop-item">Collaborations</a>
−
                            <i class="fa fa-bookmark "></i>
+
−
                           
+
−
                            Categories
+
−
                        </a>
+
−
                    </li>
+
−
               
+
−
                    <li>
+
−
                        <a class="menu-reading " href="http://localhost:4000/reading">
+
−
                            <i class="fa fa-book "></i>
+
−
                           
+
−
                            Reading
+
−
                        <span class="new badge pink"></span></a>
+
−
                    </li>
+
−
                  
+
−
                    <li>
+
−
                        <a class="menu-about " href="http://localhost:4000/about">
+
−
                            <i class="fa fa-user "></i>
+
−
                           
+
−
                            About
+
−
                        <span class="new badge pink"></span></a>
+
−
                     </li>
+
−
               
+
−
                    <li>
+
−
                        <a class="menu-search modal-trigger " href="http://localhost:4000/#search">
+
−
                            <i class="fa fa-search "></i>
+
−
                           
+
−
                            Search
+
−
                        </a>
+
−
                     </li>
+
−
               
+
−
            </ul>
+
−
            <div>
+
−
    <ul class="side-nav indigo darken-1" id="main-menu" style="transform: translateX(-100%);">
+
−
       
+
−
        <li class="side-user">
+
−
            <div class="row">
+
−
                <div class="col s4 no-padding">
+
−
                    <img class="avatar-image circle responsive-img" src="./localhost_files/74990035jw1f1rjkd681bj20rs0rsdhg.jpg" alt="User Avatar">
+
 
                 </div>
 
                 </div>
−
                 <div class="info col s8 valign-wrapper no-padding">
+
            </li>
−
                     <div class="valign">
+
            <li class="nav-item dropdown">
−
                        <p class="name">你的大名</p>
+
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">PROJECT</a>
−
                        <p class="desc">Web前端/iOS/技术宅</p>
+
                 <div class="dropdown-menu">
−
                     </div>
+
                    <a href="#" class="drop-item">Description</a>
 +
                     <a href="#" class="drop-item">Design</a>
 +
                    <a href="#" class="drop-item">Experiments</a>
 +
                    <a href="#" class="drop-item">Notebook</a>
 +
                    <a href="#" class="drop-item">Contribution</a>
 +
                    <a href="#" class="drop-item">Results</a>
 +
                     <a href="#" class="drop-item">Demonstrate</a>
 +
                    <a href="#" class="drop-item">Improve</a>
 +
                    <a href="#" class="drop-item">Attributions</a>
 
                 </div>
 
                 </div>
−
            </div>
 
−
        </li>
 
−
       
 
−
 
−
       
 
−
            <li class="no-padding">
 
−
                <a class="waves-effect menu-home " href="http://localhost:4000/">
 
−
                    <i class="fa fa-home "></i>
 
−
                   
 
−
                    Home
 
−
                </a>
 
 
             </li>
 
             </li>
−
       
+
             <li class="nav-item dropdown">
−
             <li class="no-padding">
+
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">PARTS</a>
−
                 <a class="waves-effect menu-archive " href="http://localhost:4000/archives">
+
                <div class="dropdown-menu">
−
                     <i class="fa fa-archive "></i>
+
                     <a href="#" class="drop-item">Parts Overview</a>
−
                      
+
                     <a href="#" class="drop-item">Basic Parts</a>
−
                     Archives
+
                     <a href="#" class="drop-item">Composite Parts</a>
−
                </a>
+
                    <a href="#" class="drop-item">Part Collection</a>
 +
                </div>
 
             </li>
 
             </li>
−
       
+
             <li class="nav-item">
−
             <li class="no-padding">
+
                 <a class="nav-link" href="#">SAFETY</a>
−
                 <a class="waves-effect menu-category category-menu" href="javascript:;" data-activates="category-menu">
+
−
                    <i class="fa fa-bookmark "></i>
+
−
                   
+
−
                    Categories
+
−
                </a>
+
 
             </li>
 
             </li>
−
       
+
             <li class="nav-item dropdown">
−
             <li class="no-padding">
+
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">HUMAN PRACTICE</a>
−
                 <a class="waves-effect menu-reading " href="http://localhost:4000/reading">
+
                <div class="dropdown-menu">
−
                     <i class="fa fa-book "></i>
+
                     <a href="#" class="drop-item">Human Practices</a>
−
                      
+
                     <a href="#" class="drop-item">Education & Engagement</a>
−
                    Reading
+
                </div>
−
                <span class="new badge pink"></span></a>
+
 
             </li>
 
             </li>
−
       
+
             <li class="nav-item dropdown">
−
             <li class="no-padding">
+
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">AWARDS</a>
−
                 <a class="waves-effect menu-about " href="http://localhost:4000/about">
+
                <div class="dropdown-menu">
−
                     <i class="fa fa-user "></i>
+
                     <a href="#" class="drop-item">Enterpreneurship</a>
−
                      
+
                     <a href="#" class="drop-item">Measurement</a>
−
                     About
+
                     <a href="#" class="drop-item">Model</a>
−
                <span class="new badge pink"></span></a>
+
                    <a href="#" class="drop-item">Plant</a>
 +
                    <a href="#" class="drop-item">Software</a>
 +
                </div>
 
             </li>
 
             </li>
−
          
+
         </ul>
−
            <li class="no-padding">
+
−
                <a class="waves-effect menu-search modal-trigger " href="http://localhost:4000/#search">
+
−
                    <i class="fa fa-search "></i>
+
−
                   
+
−
                    Search
+
−
                </a>
+
−
            </li>
+
−
       
+
−
    </ul>
+
−
 
+
−
    <ul class="side-nav indigo darken-1" id="category-menu" style="transform: translateX(-100%);">
+
−
   
+
−
 
+
−
           
+
−
 
+
−
    </ul>
+
−
</div>
+
−
 
+
−
        </div>
+
 
     </div>
 
     </div>
 
</nav>
 
</nav>
 +
<br>
 +
 +
<div class="container">
 +
    <h3>折叠导航栏</h3>
 +
    <p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
 +
    <p>提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。</p>
 +
</div>
  
 
</html>
 
</html>

Latest revision as of 10:38, 25 July 2019


折叠导航栏

通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。