Difference between revisions of "Template:Nymu-menu2"
(Created page with "<!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- Start of CSS--> <style type="text/css"> →WIKI SETTINGS: /* Hide first heading...") |
|||
(52 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | a.anchor { | |
− | + | display: block; | |
− | + | position: relative; | |
− | + | top: -80px; | |
− | + | visibility: hidden; | |
− | + | } | |
− | + | #inthis{ | |
− | + | position:absolute; | |
− | + | z-index:1; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | # | + | #cssmenu2, |
− | # | + | #cssmenu2 ul, |
− | # | + | #cssmenu2 ul li, |
− | # | + | #cssmenu2 ul li a, |
− | # | + | #cssmenu2 #menu-button { |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 48: | Line 32: | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
+ | z-index:2; | ||
+ | |||
} | } | ||
− | # | + | #cssmenu2:after, |
− | # | + | #cssmenu2 > ul:after { |
content: "."; | content: "."; | ||
display: block; | display: block; | ||
Line 59: | Line 45: | ||
height: 0; | height: 0; | ||
} | } | ||
− | # | + | #cssmenu2 #menu-button { |
display: none; | display: none; | ||
} | } | ||
− | # | + | #cssmenu2 { |
font-family: Montserrat, sans-serif; | font-family: Montserrat, sans-serif; | ||
background-color: #339933; | background-color: #339933; | ||
− | + | margin-left: 7.5%; | |
− | + | position: fixed; | |
− | + | width: 90%; | |
− | + | z-index 2; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | position: | + | |
− | width: | + | |
− | z-index | + | |
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); | box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | #cssmenu2.align-center > ul { |
font-size: 0; | font-size: 0; | ||
text-align: center; | text-align: center; | ||
} | } | ||
− | # | + | #cssmenu2.align-center > ul > li { |
display: inline-block; | display: inline-block; | ||
padding-left:20px; | padding-left:20px; | ||
float: none; | float: none; | ||
} | } | ||
− | # | + | #cssmenu2.align-center ul ul { |
text-align: left; | text-align: left; | ||
} | } | ||
− | # | + | #cssmenu2.align-right > ul > li { |
float: right; | float: right; | ||
} | } | ||
− | # | + | #cssmenu2 > ul > li > a { |
− | + | ||
font-size: 18px; | font-size: 18px; | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
Line 107: | Line 83: | ||
font-weight: 700; | font-weight: 700; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
+ | padding-bottom:5px; | ||
+ | padding-top:10px; | ||
+ | |||
+ | |||
} | } | ||
− | # | + | #cssmenu2 > ul > li:hover > a { |
color: #ffffff; | color: #ffffff; | ||
} | } | ||
− | # | + | #cssmenu2 > ul > li.has-sub > a { |
padding-right: 30px; | padding-right: 30px; | ||
} | } | ||
− | # | + | #cssmenu2 > ul > li.has-sub > a:after { |
position: absolute; | position: absolute; | ||
top: 22px; | top: 22px; | ||
Line 124: | Line 104: | ||
content: ''; | content: ''; | ||
} | } | ||
− | # | + | #cssmenu2 > ul > li.has-sub > a:before { |
position: absolute; | position: absolute; | ||
top: 19px; | top: 19px; | ||
Line 139: | Line 119: | ||
transition: all .25s ease; | transition: all .25s ease; | ||
} | } | ||
− | # | + | #cssmenu2 > ul > li.has-sub:hover > a:before { |
top: 23px; | top: 23px; | ||
height: 0; | height: 0; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul { |
position: absolute; | position: absolute; | ||
left: -9999px; | left: -9999px; | ||
} | } | ||
− | # | + | #cssmenu2.align-right ul ul { |
text-align: right; | text-align: right; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul li { |
height: 0; | height: 0; | ||
-webkit-transition: all .25s ease; | -webkit-transition: all .25s ease; | ||
Line 158: | Line 138: | ||
transition: all .25s ease; | transition: all .25s ease; | ||
} | } | ||
− | # | + | #cssmenu2 li:hover > ul { |
left: auto; | left: auto; | ||
} | } | ||
− | # | + | #cssmenu2.align-right li:hover > ul { |
left: auto; | left: auto; | ||
right: 0; | right: 0; | ||
} | } | ||
− | # | + | #cssmenu2 li:hover > ul > li { |
height: 35px; | height: 35px; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul ul { |
margin-left: 100%; | margin-left: 100%; | ||
top: 0; | top: 0; | ||
} | } | ||
− | # | + | #cssmenu2.align-right ul ul ul { |
margin-left: 0; | margin-left: 0; | ||
margin-right: 100%; | margin-right: 100%; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul li a { |
border-bottom: 1px solid rgba(150, 150, 150, 0.15); | border-bottom: 1px solid rgba(150, 150, 150, 0.15); | ||
padding: 11px 15px; | padding: 11px 15px; | ||
Line 186: | Line 166: | ||
background: #333333; | background: #333333; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul li:last-child > a, |
− | # | + | #cssmenu2 ul ul li.last-item > a { |
border-bottom: 0; | border-bottom: 0; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul li:hover > a, |
− | # | + | #cssmenu2 ul ul li a:hover { |
color: #ffffff; | color: #ffffff; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul li.has-sub > a:after { |
position: absolute; | position: absolute; | ||
top: 16px; | top: 16px; | ||
Line 204: | Line 184: | ||
content: ''; | content: ''; | ||
} | } | ||
− | # | + | #cssmenu2.align-right ul ul li.has-sub > a:after { |
right: auto; | right: auto; | ||
left: 11px; | left: 11px; | ||
} | } | ||
− | # | + | #cssmenu2 ul ul li.has-sub > a:before { |
position: absolute; | position: absolute; | ||
top: 13px; | top: 13px; | ||
Line 223: | Line 203: | ||
transition: all .25s ease; | transition: all .25s ease; | ||
} | } | ||
− | # | + | #cssmenu2.align-right ul ul li.has-sub > a:before { |
right: auto; | right: auto; | ||
left: 14px; | left: 14px; | ||
Line 230: | Line 210: | ||
− | # | + | #cssmenu2 ul ul > li.has-sub:hover > a:before { |
top: 17px; | top: 17px; | ||
height: 0; | height: 0; | ||
} | } | ||
+ | |||
+ | |||
+ | #jumpup{ | ||
+ | display: inline-block; | ||
+ | position: fixed; | ||
+ | z-index: 98; | ||
+ | bottom: 3%; | ||
+ | right:4%; | ||
+ | cursor:pointer; | ||
+ | width: 90px; | ||
+ | } | ||
+ | |||
+ | #jumpup div.pic { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/6/62/Nymu-Top.jpg) no-repeat; | ||
+ | background-size: 110px; | ||
+ | height: 110px; | ||
+ | width: 110px; | ||
+ | } | ||
+ | |||
+ | #jumpup div.infotop { | ||
+ | padding-right:30px; | ||
+ | display: none; | ||
+ | background: url(https://static.igem.org/mediawiki/2015/b/b8/Nymu-top2.png) no-repeat; | ||
+ | background-size: 70px; | ||
+ | height: 70px; | ||
+ | width: 70px; | ||
+ | } | ||
+ | |||
Line 239: | Line 247: | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | |||
+ | //totop | ||
+ | $('#jumpup').on('click',function(){$('body, html').animate({scrollTop: 0},1);}) | ||
+ | .on('mouseover',function(){$(this).find('div.infotop').css('display','block');}) | ||
+ | .on('mouseout',function(){$(this).find('div.infotop').css('display','none'); } | ||
+ | ); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div id= ' inthis'> | ||
− | <div id=' | + | <div id='cssmenu2' class='align-center'> |
<ul> | <ul> | ||
− | <li><a href='https://2015.igem.org/ | + | <li><a href='https://2015.igem.org/Team:NYMU-Taipei' class="homenav">HOME</a></li> |
− | <li | + | <li><a ='#'class="overnav">OVERVIEW</a> |
<ul> | <ul> | ||
<li><a href='https://2015.igem.org/Template:NYMU-2015project-overview'>Background</a></li> | <li><a href='https://2015.igem.org/Template:NYMU-2015project-overview'>Background</a></li> | ||
− | <li><a href='https://2015.igem.org/ | + | |
− | <li><a href='https://2015.igem.org/Template:NYMU-2015project- | + | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Collaborations' >Collaboration</a></li> |
− | + | <li><a href='https://2015.igem.org/Template:NYMU-2015project-Achievement'>Achievement</a></li> | |
− | <li><a href='https://2015.igem.org/ | + | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Parts'>Parts</a> |
+ | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Attributions'>Attributions</a></li> | ||
<ul> | <ul> | ||
</li> | </li> | ||
Line 262: | Line 286: | ||
− | <li | + | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab'class="projnav">PROJECT</a> |
<ul> | <ul> | ||
− | + | ||
− | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab'>Experiment</a> | + | |
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab#experiment'>Experiment</a> | ||
</li> | </li> | ||
− | <li><a href='https://2015.igem.org/Template:NYMU-2015project- | + | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab#modeling'>Modeling</a> |
− | + | </li> | |
− | + | <li><a href="https://2015.igem.org/Team:NYMU-Taipei/Design">Functional<br>Prototype</a> | |
− | + | ||
− | + | ||
− | + | ||
</li> | </li> | ||
− | |||
</ul> | </ul> | ||
</li> | </li> | ||
− | <li><a href=' | + | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Practices' class="ppnav">POLICY PRACTICES</a></li> |
− | <li | + | <li><a href='https://2015.igem.org/Template:NYMU-2015project-safety' class="bsnav">BIOSAFETY</a> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</li> | </li> | ||
Line 302: | Line 317: | ||
− | <li class= | + | <li><a class="ntnav">NOTEBOOK</a> |
− | + | <ul> | |
− | <li><a href=' | + | <li><a href='https://2015.igem.org/wiki/index.php?title=Template:NYMU-2015notebook-calendar'>Calendar</a></li> |
− | <li><a href=' | + | <li><a href='https://2015.igem.org/wiki/index.php?title=Template:NYMU-2015notebook-lab'>Lab</a></li> |
+ | <li><a href='https://2015.igem.org/wiki/index.php?title=Template:NYMU-2015notebook-protocol'>Protocol</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
− | <li><a href=' | + | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Team'class="teamnav">TEAM</a></li> |
</ul> | </ul> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div id='jumpup'> | ||
+ | <div class='infotop'></div> | ||
+ | <div class='pic'></div> | ||
+ | </div> | ||
</div> | </div> | ||
</html> | </html> |
Latest revision as of 16:39, 18 September 2015