Difference between revisions of "Template:SZU-China/Nav demo"

 
(4 intermediate revisions by 2 users not shown)
Line 219: Line 219:
 
</style>
 
</style>
  
−
 
−
<style>
 
−
.header-nav {
 
−
position: fixed;
 
−
top: 16px;
 
−
left: 0;
 
−
width: 100%;
 
−
padding-top: 0;
 
−
padding-bottom: 5px;
 
−
background-color: #020202;
 
−
box-shadow: 0 0 6px 0 #333;
 
−
opacity: 0.7;
 
−
z-index: 1000;
 
−
-webkit-transition: all 0.3s;
 
−
transition: all 0.3s;
 
−
text-align: center;
 
−
height: 45px;
 
−
}
 
−
.header-nav:hover{
 
−
opacity: 1;
 
−
}
 
−
.nav-item1{
 
−
font-size: 20px;
 
−
font-weight: 700;
 
−
padding-right: 15px;
 
−
padding-left: 15px;
 
−
 
−
}
 
−
.nav-sub-item{
 
−
font-size: 20px;
 
−
padding: 5px 10px;
 
−
top:0;
 
−
text-align: center
 
−
}
 
−
.sub_menu{
 
−
position: absolute;
 
−
z-index: 1000;
 
−
float: left;
 
−
min-width: 160px;
 
−
list-style: none;
 
−
font-size: 12px;
 
−
background-color: #464646;
 
−
border: 1px solid #cccccc;
 
−
color: #fff;
 
−
border: 1px solid rgba(0, 0, 0, 0.15);
 
−
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 
−
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 
−
-webkit-background-clip: padding-box;
 
−
background-clip: padding-box;
 
−
}
 
−
.nav-sub-item:hover{
 
−
background-color: rgb(171,171,171);
 
−
 
−
}
 
−
.nav-sub-item a{
 
−
text-decoration: none;
 
−
color:white;
 
−
}
 
−
.nav-1-item{
 
−
font-size: 16px;
 
−
font-weight: 700;
 
−
padding: 0px 11px;
 
−
        display:block;
 
−
        height: 42px;
 
−
        float: right;
 
−
        color: white !important;
 
−
}
 
−
    .animated {
 
−
        -webkit-animation-duration: 1s;
 
−
        animation-duration: 1s;
 
−
        -webkit-animation-fill-mode: both;
 
−
        animation-fill-mode: both;
 
−
    }
 
−
    .bounce {
 
−
        -webkit-animation-name: bounce;
 
−
        animation-name: bounce;
 
−
        -webkit-transform-origin: center bottom;
 
−
        transform-origin: center bottom;
 
−
    }
 
−
    @keyframes bounce {
 
−
        0%, 20%, 53%, 80%, 100% {
 
−
            -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
−
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
−
            -webkit-transform: translate3d(0,0,0);
 
−
            transform: translate3d(0,0,0);
 
−
        }
 
−
        40%, 43% {
 
−
            -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
−
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
−
            -webkit-transform: translate3d(0, -30px, 0);
 
−
            transform: translate3d(0, -30px, 0);
 
−
        }
 
−
        70% {
 
−
            -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
−
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
−
            -webkit-transform: translate3d(0, -15px, 0);
 
−
            transform: translate3d(0, -15px, 0);
 
−
        }
 
−
        90% {
 
−
            -webkit-transform: translate3d(0,-4px,0);
 
−
            transform: translate3d(0,-4px,0);
 
−
        }
 
−
    }
 
−
</style>
 
  
 
<body>
 
<body>
−
<!-- Navbar_down -->
+
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;position:relative;z-index:1000;">
−
<div style="height: 16px;width: 100%"></div>
+
−
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
+
 
<a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
 
<a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
 
<img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
 
<img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
Line 334: Line 228:
 
<div style="height: 56px;width: 60%;float: right;text-align: right;padding-top: 14px">
 
<div style="height: 56px;width: 60%;float: right;text-align: right;padding-top: 14px">
 
<a class="nav-1-item" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
 
<a class="nav-1-item" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
−
<a class="nav-1-item father" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Human_Practices" id="nav1_5" data-id="5">Human Practices</a>
+
<a class="nav-1-item father" id="nav1_5" data-id="5" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
 
<a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a>
 
<a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a>
 
<a class="nav-1-item father" id="nav1_3" data-id="3">Project</a>
 
<a class="nav-1-item father" id="nav1_3" data-id="3">Project</a>
Line 373: Line 267:
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
−
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; Public engagement</a></div>
+
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education&Public engagement</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 
     </div>
 
     </div>
 
</div>
 
</div>
 
<div class="header-nav" style="text-align: center;display: none">
 
<div class="header-nav" style="text-align: center;display: none">
−
<div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;" id="header_list">
+
<div style="width: 100%;height: 45px;text-align: center;" id="header_list">
−
<a class="nav-item1 nav-father" id="nav1" data-id="1">Awards</a>
+
<a class="nav-item1" id="nav0" style="color: white;" href="https://2018.igem.org/Team:SZU-China">Home</a>
−
<a class="nav-item1 nav-father" id="nav2" data-id="2">Team</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav1" data-id="1">Awards</a>
−
<a class="nav-item1 nav-father" id="nav3" data-id="3">Project</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav2" data-id="2">Team</a>
−
<a class="nav-item1 nav-father" id="nav4" data-id="4">Experiment</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav3" data-id="3">Project</a>
−
<a class="nav-item1 nav-father" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Human_Practices" id="nav5" data-id="5">Human Practices</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav4" data-id="4">Experiment</a>
 +
<a class="nav-item1 nav-father" style="display:inline-block;height:45px;color: white;" id="nav5" data-id="5" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
 
<a class="nav-item1" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
 
<a class="nav-item1" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
 
</div>
 
</div>
Line 419: Line 314:
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
−
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; Public engagement</a></div>
+
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education&Public engagement</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 
     </div>
 
     </div>
Line 449: Line 344:
 
     });
 
     });
 
</script>
 
</script>
−
<!-- Navbar_down -->
 
−
 
−
 
  
 
     <script type="text/javascript">
 
     <script type="text/javascript">

Latest revision as of 20:04, 17 October 2018