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

(Header template)
 
Line 1: Line 1:
−
<!DOCTYPE html>
+
<html>
−
<!-- saved from url=(0022)http://localhost:4000/ -->
+
<link rel="stylesheet" type="text/css"
−
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="generator" content="Hexo 3.9.0">
+
    href="https://2019.igem.org/Template:USTC-Software/css/default?action=raw&ctype=text/css">
−
   
+
<link rel="stylesheet" type="text/css"
−
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+
    href="https://2019.igem.org/Template:USTC-Software/css/bootstrap?action=raw&ctype=text/css">
−
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
<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 {
 +
        justify-content: center;
 +
    }
  
−
     <title></title>
+
     .nav-link {
−
    <meta name="author" content="John Doe">
+
        margin-left: 20px;
−
      
+
     }
−
   
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
  
−
      
+
     .dropdown-menu.show {
−
     <meta property="og:site_name" content="Hexo">
+
        display: flex;
 +
        flex-direction: column;
 +
        text-align: center;
 +
        top: 46px;
 +
     }
 +
    .dropdown-menu.show a:visited {
 +
        color: #007bff;
 +
    }
 +
</style>
  
−
   
+
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
−
    <meta property="og:image" content="">
+
     <a class="navbar-brand" href="#">USTC-SOFTWARE</a>
−
   
+
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
−
    <!-- https://2019.igem.org/Template:USTC-Software/Header -->
+
         <span class="navbar-toggler-icon"></span>
−
    <link rel="icon" type="image/png" href="http://localhost:4000/favicon.png">
+
    </button>
−
     <link rel="alternate" href="http://localhost:4000/atom.xml" title="Hexo" type="application/atom+xml">
+
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
−
    <style>
+
        <ul class="navbar-nav">
−
    {{USTC-Software/materialize.min.css}}
+
            <li class="nav-item dropdown">
−
    {{USTC-Software/font-awesome.min.css}}
+
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">TEAM</a>
−
    {{USTC-Software/style.css}}
+
                 <div class="dropdown-menu">
−
    </style>
+
                     <a href="#" class="drop-item">Team Members</a>
−
   
+
                     <a href="#" class="drop-item">Collaborations</a>
−
     <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
−
</head>
+
−
<body>
+
−
 
+
−
 
+
−
    <div class="material-placeholder"><img src="./localhost_files/weixin_favicon.png" style="position: absolute; left: -9999px; opacity: 0; filter: alpha(opacity=0);" class="materialboxed initialized" data-caption=" "></div>
+
−
 
+
−
    <nav class="indigo">
+
−
    <div class="nav-wrapper">
+
−
         <a href="http://localhost:4000/#" data-activates="main-menu" class="button-collapse">
+
−
            <i class="fa fa-navicon"></i>
+
−
        </a>
+
−
        <div class="">
+
−
            <a href="http://localhost:4000/" class="brand-logo hide-on-med-and-down">Hexo</a>
+
−
            <ul class="right hide-on-med-and-down">
+
−
               
+
−
                    <li>
+
−
                        <a class="menu-home " href="http://localhost:4000/">
+
−
                            <i class="fa fa-home "></i>
+
−
                           
+
−
                            Home
+
−
                        </a>
+
−
                    </li>
+
−
                  
+
−
                    <li>
+
−
                        <a class="menu-archive " href="http://localhost:4000/archives">
+
−
                            <i class="fa fa-archive "></i>
+
−
                           
+
−
                            Archives
+
−
                        </a>
+
−
                    </li>
+
−
               
+
−
                    <li>
+
−
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu">
+
−
                            <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">
+
    </div>
−
                <a class="waves-effect menu-search modal-trigger " href="http://localhost:4000/#search">
+
</nav>
−
                    <i class="fa fa-search "></i>
+
<br>
−
                   
+
−
                    Search
+
−
                </a>
+
−
            </li>
+
−
       
+
−
    </ul>
+
  
−
    <ul class="side-nav indigo darken-1" id="category-menu" style="transform: translateX(-100%);">
+
<div class="container">
−
      
+
     <h3>折叠导航栏</h3>
−
 
+
    <p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
−
           
+
     <p>提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。</p>
−
 
+
−
     </ul>
+
 
</div>
 
</div>
  
−
        </div>
 
−
    </div>
 
−
</nav>
 
−
</body>
 
 
</html>
 
</html>

Latest revision as of 10:49, 25 July 2019


折叠导航栏

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

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