Difference between revisions of "Template:NCTU Formosa/Navigation"

Line 1: Line 1:
−
 
+
<html lang="en">
−
<html>
+
  
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
−
     <title>Untitled Document</title>
+
     <title>navigation</title>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
−
     <link href="Home.css" rel="stylesheet" type="text/css">
+
     <meta name="description" content="DESCRIPTION">
−
     <script src="Home.js" type="text/javascript"></script>
+
     <link rel="stylesheet" href="navigation.css" type="text/css">
 
     <style>
 
     <style>
−
/* Clear the default wiki settings */
+
        #nav,
−
+
        #nav ul,
−
#home_logo, #sideMenu { display:none; }
+
        #nav li,
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
        #nav a {
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
            border: none;
−
body {background-color:white; }
+
            line-height: 1;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
            margin: 0;
 +
            padding: 0;
 +
        }
  
−
    ul.navigation {
+
        #nav {
−
        list-style-type: none;
+
            height: 37px;
−
        margin: 0;
+
            display: block;
−
        padding: 0;
+
            width: auto;
−
         overflow: hidden;
+
            margin: 0;
−
    }
+
            padding: 0;
 +
         }
  
−
    li.navigation {
 
−
        float: left;
 
−
    }
 
  
−
    li.dropdown {
+
        #nav>ul {
−
        display: inline-block;
+
            list-style: inside none;
−
    }
+
            margin: 0;
 +
            padding: 0;
 +
        }
  
−
    .navigation li {
+
        #nav>ul>li {
−
        float: left;
+
            list-style: inside none;
−
    }
+
            float: right;
 +
            right: 5%;
 +
            display: inline-block;
 +
            position: relative;
 +
            margin: 0;
 +
            padding: 0;
 +
        }
  
−
    .navigation li a, .dropbtn {
+
        #nav.align-center>ul {
−
        display: inline-block;
+
            text-align: center;
−
        text-align: center;
+
         }
−
         padding: 14px 16px;
+
−
        text-decoration: none;
+
−
    }
+
  
−
    .navigation li a:hover, .dropdown:hover .dropbtn {
+
        #nav.align-center>ul>li {
−
        background-color: red;
+
            float: none;
−
    }
+
            margin-left: -3px;
 +
        }
  
−
    .dropdown-content {
+
        #nav.align-center ul ul {
−
        display: none;
+
            text-align: left;
−
        position: absolute;
+
         }
−
        background-color: #f9f9f9;
+
−
         min-width: 160px;
+
−
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
        z-index: 1;
+
−
    }
+
  
−
    .dropdown-content a {
+
        #nav.align-center>ul>li:first-child>a {
−
        color: black;
+
            border-radius: 0;
−
        padding: 12px 16px;
+
         }
−
        text-decoration: none;
+
−
         display: block;
+
−
        text-align: left;
+
−
    }
+
  
−
    .dropdown-content a:hover {background-color: #f1f1f1}
+
        #nav>ul>li>a {
 +
            outline: none;
 +
            display: block;
 +
            position: relative;
 +
            text-align: center;
 +
            text-decoration: none;
 +
            font-weight: 700;
 +
            font-size: 13px;
 +
            font-family: Arial, Helvetica, sans-serif;
 +
            color: #000000;
 +
            padding: 12px 20px;
 +
        }
  
−
    .dropdown:hover .dropdown-content {
+
        #nav>ul>li:first-child>a {
−
        display: block;
+
            border-radius: 0;
−
    }
+
        }
  
 +
        #nav>ul>li>a:after {
 +
            content: "";
 +
            position: absolute;
 +
            top: -1px;
 +
            bottom: -1px;
 +
            right: -2px;
 +
            z-index: 99;
 +
        }
 +
 +
        #nav ul li.has-sub:hover>a:after {
 +
            top: 0;
 +
            bottom: 0;
 +
        }
 +
 +
        #nav>ul>li.has-sub>a:before {
 +
            content: "";
 +
            position: absolute;
 +
            top: 18px;
 +
            right: 6px;
 +
            border: 5px solid transparent;
 +
            border-top: 5px solid #000000;
 +
        }
 +
 +
        #nav>ul>li.has-sub:hover>a:before {
 +
            top: 19px;
 +
        }
 +
 +
        #nav>ul>li.has-sub:hover>a {
 +
            padding-bottom: 14px;
 +
            z-index: 999;
 +
            border-color: #3f3f3f;
 +
        }
 +
 +
        #nav ul li.has-sub:hover>ul,
 +
        #nav ul li.has-sub:hover>div {
 +
            display: block;
 +
        }
 +
 +
        #nav>ul>li.has-sub>a:hover,
 +
        #nav>ul>li.has-sub:hover>a {
 +
            background: #D1D1D1;
 +
            border-color: #D1D1D1;
 +
        }
 +
 +
        #nav ul li>ul,
 +
        #nav ul li>div {
 +
            display: none;
 +
            width: auto;
 +
            position: absolute;
 +
            top: 38px;
 +
            background: #D1D1D1;
 +
            border-radius: 0px 5px 5px 5px;
 +
            /*第一層navigation圖形*/
 +
            z-index: 999;
 +
            padding: 10px 0;
 +
        }
 +
 +
        #nav ul li>ul {
 +
            width: 140px;
 +
        }
 +
 +
        #nav ul ul ul {
 +
            position: absolute;
 +
        }
 +
 +
        #nav ul ul li:hover>ul {
 +
            left: -100%;
 +
            top: -10px;
 +
            border-radius: 5px;
 +
        }
 +
 +
        #nav ul li>ul li {
 +
            display: block;
 +
            list-style: inside none;
 +
            position: relative;
 +
            margin: 0;
 +
            padding: 0;
 +
        }
 +
 +
        #nav ul li>ul li a {
 +
            outline: none;
 +
            display: block;
 +
            position: relative;
 +
            font: 10pt Arial, Helvetica, sans-serif;
 +
            color: #000000;
 +
            text-decoration: none;
 +
            margin: 0;
 +
            padding: 8px 20px;
 +
        }
 +
 +
        #nav,
 +
        #nav ul ul>li:hover>a,
 +
        #nav ul ul li a:hover {
 +
            background: #ffffff;
 +
            background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
 +
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
 +
            background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
 +
            background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%);
 +
            background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
 +
            background: linear-gradient(top, #ffffff 0%, #ffffff 100%);
 +
        }
 +
 +
        #nav>ul>li>a:hover {
 +
            background: #080808;
 +
            color: #ffffff;
 +
        }
 +
 +
        #nav ul ul a:hover {
 +
            color: #000000;
 +
        }
 +
 +
        #nav>ul>li.has-sub>a:hover:before {
 +
            border-top: 5px solid #000000;
 +
        }
 +
 +
        */
 
     </style>
 
     </style>
 
</head>
 
</head>
  
 
<body>
 
<body>
−
     <ul class="navigation">
+
     <div id="nav">
−
        <li> <a>Home</a> </li>
+
        <ul>
−
        <li class="dropdown"> <a>Project</a>
+
            <li class="active has-sub"><a href="#"><span>Team</span></a>
−
             <div class="dropdown-content">
+
                <ul>
−
                 <div> <a>Description</a> </div>
+
                    <li><a href="#"><span>Members</span></a></li>
−
                 <div> <a>Parabase</a> </div>
+
                    <li><a href="#"><span>Instructors</span></a></li>
−
                 <div> <a>IoT</a> </div>
+
                    <li class="has-sub"><a href="#">Documents</a>
−
                 <div> <a>Biobricks &amp; Validation</a> </div>
+
                        <ul>
−
                 <div> <a>Results</a> </div>
+
                            <li><a href="#"><span>Protocal</span></a></li>
−
                 <div> <a>Demostration</a> </div>
+
                            <li><a href="#"><span>Notebook</span></a></li>
−
                 <div> <a>Improvement</a> </div>
+
                        </ul>
−
             </div>
+
                    </li>
−
         </li>
+
                </ul>
 +
             </li>
 +
            <li class="active has-sub"><a href="#"><span>Achievement</span></a>
 +
                 <ul>
 +
                    <li><a href="#"><span>Medal Criteria</span></a></li>
 +
                    <li><a href="#"><span>Awards</span></a></li>
 +
                    <li><a href="#"><span>Attribution</span></a></li>
 +
                 </ul>
 +
            </li>
 +
            <li class="active has-sub"><a href="#"><span>Human Practice</span></a>
 +
                <ul>
 +
                    <li><a href="#"><span>Study</span></a></li>
 +
                    <li><a href="#"><span>Education</span></a></li>
 +
                    <li><a href="#"><span>Collaboration</span></a></li>
 +
                    <li><a href="#"><span>Activity</span></a></li>
 +
                 </ul>
 +
            </li>
 +
            <li class="active has-sub"><a href="#"><span>Parts</span></a>
 +
                <ul>
 +
                    <li><a href="#"><span>Basic Parts</span></a></li>
 +
                    <li><a href="#"><span>Composite Parts</span></a></li>
 +
                 </ul>
 +
            </li>
 +
            <li class="active has-sub"><a href="#"><span>Validation</span></a>
 +
                <ul>
 +
                    <li><a href="#"><span>Peptide Experiment</span></a></li>
 +
                    <li><a href="#"><span>Fungal Experiment</span></a></li>
 +
                    <li><a href="#"><span>Plant</span></a></li>
 +
                    <li><a href="#"><span>Result</span></a></li>
 +
                    <li><a href="#"><span>Safety</span></a></li>
 +
                 </ul>
 +
            </li>
 +
            <li class="active has-sub"><a href="#"><span>Modeling</span></a>
 +
                <ul>
 +
                    <li><a href="#"><span>Parabase Modeling</span></a></li>
 +
                    <li><a href="#"><span>IoT Prediction Modeling</span></a></li>
 +
                    <li><a href="#"><span>Results</span></a></li>
 +
                 </ul>
 +
            </li>
 +
            <li class="active has-sub"><a href="#"><span>Project</span></a>
 +
                 <ul>
 +
                    <li><a href="#"><span>Description</span></a></li>
 +
                    <li class="has-sub"><a href="#"><span>Parabase</span></a>
 +
                        <ul>
 +
                            <li><a href="#"><span>Data Aggregation</span></a></li>
 +
                            <li><a href="#"><span>Peptide Prediction</span></a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="has-sub"><a href="#"><span>IoT</span></a>
 +
                        <ul>
 +
                            <li><a href="#"><span>IoT Talk</span></a></li>
 +
                            <li><a href="#"><span>Timing Prediction</span></a></li>
 +
                            <li><a href="#"><span>Hardware</span></a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li><a href="#"><span>Biobricks &amp; Validation</span></a></li>
 +
                    <li><a href="#"><span>Demonstration</span></a></li>
 +
                    <li><a href="#"><span>Improvement</span></a></li>
 +
                </ul>
 +
             </li>
 +
         </ul>
 +
 
 +
    </div>
  
−
        <li class="dropdown"> <a>Parts</a>
 
−
            <div class="dropdown-content">
 
−
                <div><a>Parts</a></div>
 
−
                <div><a>Basic Parts</a></div>
 
−
                <div><a>Composite Parts</a></div>
 
−
                <div><a>Part Collection</a></div>
 
−
            </div>
 
−
        </li>
 
−
        <li class="dropdown"> <a>Dry Lab</a>
 
−
            <div class="dropdown-content">
 
−
                <div> <a>Parabase Modeling</a> </div>
 
−
                <div> <a>IoT Prediction Modeling</a> </div>
 
−
            </div>
 
−
        </li>
 
−
        <li class="dropdown"> <a>Web Lab</a>
 
−
            <div class="dropdown-content">
 
−
                <div> <a>Peptides Experiment</a> </div>
 
−
                <div> <a>Fungal Experiment</a> </div>
 
−
                <div> <a>Plants</a> </div>
 
−
                <div> <a>Safety</a> </div>
 
−
            </div>
 
−
</li>
 
−
        <li class="dropdown"> <a>Human Practics</a>
 
−
            <div class="dropdown-content">
 
−
                <div> <a>Education</a> </div>
 
−
                <div> <a>Collaboration</a> </div>
 
−
                <div> <a>Study</a> </div>
 
−
                <div> <a>Activity</a> </div>
 
−
                <div> <a>Further Consideration</a> </div>
 
−
            </div>
 
−
</li>
 
−
        <li class="dropdown"> <a>Achievement</a>
 
−
            <div class="dropdown-content">
 
−
                <div> <a>Medal Criteria</a> </div>
 
−
                <div> <a>Awards</a> </div>
 
−
                <div> <a>Attributiton</a> </div>
 
−
            </div>
 
−
</li>
 
−
        <li class="dropdown"> <a>Team</a>
 
−
            <div class="dropdown-content">
 
−
                <div> <a>Members</a> </div>
 
−
                <div> <a>Instructors</a> </div>
 
−
                <div> <a>Documents</a> </div>
 
−
            </div>
 
−
        </li>
 
−
    </ul>
 
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 08:29, 14 September 2017

navigation