Difference between revisions of "Team:SIAT-SCIE/Templates/Navigationbar"

 
Line 1: Line 1:
 +
<html>
  
−
body {
+
 
−
     margin: 10px 0 0 0;
+
 
−
    padding: 0;}
+
 
−
#top-section {
+
<!--- THIS IS WHERE THE HTML BEGINS --->
−
    width: 965px;
+
 
−
    height: 0;
+
<script>
−
     margin: 0 auto;
+
</script>
−
    padding: 0;
+
<style>
−
    border: none;}
+
/* Clear the default wiki settings */
−
#menubar {
+
−
    font-size: 65%;
+
#home_logo, #sideMenu { display:none; }
−
    top: -14px;}
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
.left-menu:hover {
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
−
    background-color: transparent;}
+
    body {
−
#menubar li a {
+
        background-color: #444444;
−
    background-color: transparent;}
+
        margin-left:auto;
−
#menubar:hover {
+
        margin-right:auto;
−
    color: white;}
+
        width:1263px;
−
#menubar li a {
+
       
−
    color: transparent;}
+
     }
−
#menubar:hover li a {
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
    color: white;}
+
 
 +
 
 +
    .const{
 +
        margin-bottom: -10px;
 +
        position:fixed;
 +
        top:-2px;
 +
        width:1263px;
 +
        left:auto;
 +
        right:auto;
 +
        z-index:9999;
 +
       
 +
       
 +
    }
 +
   
 +
    /*#logo{
 +
        margin-top:15px;
 +
       
 +
       
 +
       
 +
        float:right;
 +
    }
 +
        #logo p img {
 +
            height: 47px;
 +
            width: 70px;
 +
            background-color:rgba(8,8,8,0.4)
 +
        }
 +
    /* Actually this make the navigation bar bigger and better*/
 +
    #nav {
 +
        margin: 0 0 0 0;
 +
        padding:0;
 +
        padding-top: 20px;
 +
        padding-bottom: 20px;
 +
 
 +
        width:1263px;
 +
        left:auto;
 +
        right:auto;
 +
       
 +
 
 +
        font-family: sans-serif;
 +
        font-weight:100;
 +
        background-color: rgba(8,8,8,0);
 +
       
 +
 
 +
     }
 +
 
 +
        /*place the first line 'inline', and the interval to be 20px*/
 +
        #nav ul li {
 +
            display: inline;
 +
            margin:0px;
 +
            padding: 0 10px 0 10px;
 +
           
 +
 
 +
        }
 +
       
 +
 
 +
        #nav ul {
 +
           
 +
 
 +
 
 +
            list-style-type: none;
 +
            margin: 0;
 +
            padding: 0;
 +
            padding-left: 10px;
 +
            padding-right: 10px;
 +
            overflow: hidden;
 +
            background-color: rgba(15,15,15,0.4);
 +
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
        }
 +
 
 +
        #nav li {
 +
            float: left;
 +
        }
 +
 
 +
 
 +
            #nav li a, .dropbtn {
 +
                display: inline-block;
 +
                color: white;
 +
                text-align: center;
 +
                padding: 14px 16px;
 +
                text-decoration: none;
 +
                font-size:large;
 +
               
 +
            }
 +
 
 +
                #nav li a:hover, #nav .dropdownlist:hover .dropbtn {
 +
                    color:black;
 +
                    background-color:#f9f9f9;
 +
                    transition-property: background-color, color;
 +
                    transition-duration: 0.5s;
 +
                    transition-timing-function: ease-out;
 +
                }
 +
                #nav li a:hover {
 +
                    text-decoration:underline;
 +
                }
 +
            #nav li.dropdownlist {
 +
                display: inline-block;
 +
            }
 +
 
 +
        #nav .dropdown_content {
 +
            display: none;
 +
            position: absolute;
 +
            background-color: #f9f9f9;
 +
            min-width: 160px;
 +
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
            z-index: 1;
 +
        }
 +
 
 +
            #nav .dropdown_content a {
 +
                color: black;
 +
                padding: 12px 16px;
 +
                text-decoration: none;
 +
                display: block;
 +
                text-align: left;
 +
            }
 +
 
 +
                #nav .dropdown_content a:hover {
 +
                    background-color: rgba(15,15,15,0.4);
 +
                   
 +
                    color: white;
 +
                    /*recent modify */
 +
                    transition-duration: initial;
 +
                   
 +
                }
 +
 
 +
        #nav .dropdownlist:hover .dropdown_content {
 +
            display: block;
 +
        }
 +
 
 +
        /*not working out yet*/
 +
   
 +
   
 +
</style>
 +
 
 +
<head>
 +
 
 +
<!-- This tells the browser that your page is responsive -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
</head>
 +
<body>
 +
    <div class="const" style="padding-left:-30px;padding-right:-30px;">
 +
       
 +
        <div id="nav">
 +
            <ul  >
 +
                <li><a href="https://2017.igem.org/Team:SIAT-SCIE/Home" title="Home" style="font-family:'Avenir';">Home</a></li>
 +
                <li class="dropdownlist">
 +
                   
 +
                    <a href="javascript:void(0)" class="dropbtn" style="font-family:'Avenir';">Project</a>
 +
 
 +
                    <div class="dropdown_content">
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Project_Description" style="font-family:'Avenir';" alt="Description">Description</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Results" style="font-family:'Avenir';"alt="Results">Results</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Mechanism" style="font-family:'Avenir';"alt="Mechanism">Mechanism</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Demonstrate" style="font-family:'Avenir';"alt="Demonstrate">Demonstrate</a>
 +
                       
 +
                    </div>
 +
 
 +
                </li>
 +
                <li class="dropdownlist">
 +
 
 +
                    <a href="javascript:void(0)" class="dropbtn"style="font-family:'Avenir';">Notebook</a>
 +
                    <div class="dropdown_content">
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/IGEM_Diary"style="font-family:'Avenir';" alt="iGEM Diary">iGEM Diary</a>
 +
                       
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Protocol" style="font-family:'Avenir';"alt="Protocol">Protocol</a>
 +
                    </div>
 +
 
 +
                </li>
 +
                <li class="dropdownlist">
 +
 
 +
                    <a href="javascript:void(0)" style="font-family:'Avenir';"class="dropbtn">Parts</a>
 +
                    <div class="dropdown_content">
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Parts_Overview" style="font-family:'Avenir';"alt="Parts Overview">Parts Overview</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Basic_Parts"style="font-family:'Avenir';" alt="Basic Parts">Basic Parts</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Composite_Parts"style="font-family:'Avenir';" alt="Composite Parts">Composite Parts</a>
 +
                       
 +
                    </div>
 +
 
 +
                </li>
 +
                <li class="dropdownlist">
 +
 
 +
                    <a href="https://2017.igem.org/Team:SIAT-SCIE/Award" style="font-family:'Avenir';"class="dropbtn">Award</a>
 +
                 
 +
 
 +
                </li>
 +
                <li><a href="https://2017.igem.org/Team:SIAT-SCIE/Model" style="font-family:'Avenir';"title="Modeling">Modeling</a></li>
 +
                <li class="dropdownlist">
 +
 
 +
                    <a href="javascript:void(0)" style="font-family:'Avenir';" class="dropbtn">Team</a>
 +
                    <div class="dropdown_content">
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/About_us" style="font-family:'Avenir';" alt="About us">About us</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Attributions" style="font-family:'Avenir';" alt="Attribution">Attribution</a>
 +
                       
 +
 
 +
                    </div>
 +
 
 +
                </li>
 +
                <li class="dropdownlist">
 +
                    <a href="javascript:void(0)"style="font-family:'Avenir';" class="dropbtn">Human Practice</a>
 +
                    <div class="dropdown_content">
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/HP/Gold_Integrated" style="font-family:'Avenir';"alt="Gold Intergrated">Gold Intergrated</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/HP/Silver" style="font-family:'Avenir';"alt="Silver">Silver Intergrated</a>
 +
                        <a href="https://2017.igem.org/Team:SIAT-SCIE/Collaborations" style="font-family:'Avenir';" alt="Collaborations">Collaborations</a>
 +
                    </div>
 +
                </li>
 +
                <li><a href="https://2017.igem.org/Team:SIAT-SCIE/InterLab" style="font-family:'Avenir';"title="InterLab">InterLab</a></li>
 +
 
 +
            </ul>
 +
       
 +
        </div>
 +
    </div>
 +
</body>
 +
</html>

Latest revision as of 14:27, 29 September 2018