Difference between revisions of "Template:Nymu-menu2"
(31 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 22: | Line 32: | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | z-index: | + | z-index:2; |
} | } | ||
− | # | + | #cssmenu2:after, |
− | # | + | #cssmenu2 > ul:after { |
content: "."; | content: "."; | ||
display: block; | display: block; | ||
Line 35: | 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- | + | background-color: #339933; |
− | + | margin-left: 7.5%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | margin-left: | + | |
− | + | ||
position: fixed; | position: fixed; | ||
− | width: | + | width: 90%; |
− | z-index | + | z-index 2; |
− | + | 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; | |
− | + | } | |
− | # | + | #cssmenu2.align-right > ul > li { |
+ | float: right; | ||
+ | } | ||
+ | #cssmenu2 > ul > li > a { | ||
font-size: 18px; | font-size: 18px; | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
text-decoration: none; | text-decoration: none; | ||
− | color: # | + | color: #dddddd; |
font-weight: 700; | font-weight: 700; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
− | padding-bottom: | + | padding-bottom:5px; |
padding-top:10px; | padding-top:10px; | ||
} | } | ||
− | # | + | #cssmenu2 > ul > li:hover > a { |
− | color: # | + | color: #ffffff; |
+ | } | ||
+ | #cssmenu2 > ul > li.has-sub > a { | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | #cssmenu2 > ul > li.has-sub > a:after { | ||
+ | position: absolute; | ||
+ | top: 22px; | ||
+ | right: 11px; | ||
+ | width: 8px; | ||
+ | height: 2px; | ||
+ | display: block; | ||
+ | background: #dddddd; | ||
+ | content: ''; | ||
+ | } | ||
+ | #cssmenu2 > ul > li.has-sub > a:before { | ||
+ | position: absolute; | ||
+ | top: 19px; | ||
+ | right: 14px; | ||
+ | display: block; | ||
+ | width: 2px; | ||
+ | height: 8px; | ||
+ | background: #dddddd; | ||
+ | content: ''; | ||
+ | -webkit-transition: all .25s ease; | ||
+ | -moz-transition: all .25s ease; | ||
+ | -ms-transition: all .25s ease; | ||
+ | -o-transition: all .25s ease; | ||
+ | transition: all .25s ease; | ||
+ | } | ||
+ | #cssmenu2 > ul > li.has-sub:hover > a:before { | ||
+ | top: 23px; | ||
+ | height: 0; | ||
+ | } | ||
+ | #cssmenu2 ul ul { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | } | ||
+ | #cssmenu2.align-right ul ul { | ||
+ | text-align: right; | ||
+ | } | ||
+ | #cssmenu2 ul ul li { | ||
+ | height: 0; | ||
+ | -webkit-transition: all .25s ease; | ||
+ | -moz-transition: all .25s ease; | ||
+ | -ms-transition: all .25s ease; | ||
+ | -o-transition: all .25s ease; | ||
+ | transition: all .25s ease; | ||
+ | } | ||
+ | #cssmenu2 li:hover > ul { | ||
+ | left: auto; | ||
+ | } | ||
+ | #cssmenu2.align-right li:hover > ul { | ||
+ | left: auto; | ||
+ | right: 0; | ||
+ | } | ||
+ | #cssmenu2 li:hover > ul > li { | ||
+ | height: 35px; | ||
+ | } | ||
+ | #cssmenu2 ul ul ul { | ||
+ | margin-left: 100%; | ||
+ | top: 0; | ||
+ | } | ||
+ | #cssmenu2.align-right ul ul ul { | ||
+ | margin-left: 0; | ||
+ | margin-right: 100%; | ||
+ | } | ||
+ | #cssmenu2 ul ul li a { | ||
+ | border-bottom: 1px solid rgba(150, 150, 150, 0.15); | ||
+ | padding: 11px 15px; | ||
+ | width: 170px; | ||
+ | font-size: 18px; | ||
+ | text-decoration: none; | ||
+ | color: #dddddd; | ||
+ | font-weight: 400; | ||
+ | background: #333333; | ||
+ | } | ||
+ | #cssmenu2 ul ul li:last-child > a, | ||
+ | #cssmenu2 ul ul li.last-item > a { | ||
+ | border-bottom: 0; | ||
+ | } | ||
+ | #cssmenu2 ul ul li:hover > a, | ||
+ | #cssmenu2 ul ul li a:hover { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #cssmenu2 ul ul li.has-sub > a:after { | ||
+ | position: absolute; | ||
+ | top: 16px; | ||
+ | right: 11px; | ||
+ | width: 8px; | ||
+ | height: 2px; | ||
+ | display: block; | ||
+ | background: #dddddd; | ||
+ | content: ''; | ||
+ | } | ||
+ | #cssmenu2.align-right ul ul li.has-sub > a:after { | ||
+ | right: auto; | ||
+ | left: 11px; | ||
+ | } | ||
+ | #cssmenu2 ul ul li.has-sub > a:before { | ||
+ | position: absolute; | ||
+ | top: 13px; | ||
+ | right: 14px; | ||
+ | display: block; | ||
+ | width: 2px; | ||
+ | height: 8px; | ||
+ | background: #dddddd; | ||
+ | content: ''; | ||
+ | -webkit-transition: all .25s ease; | ||
+ | -moz-transition: all .25s ease; | ||
+ | -ms-transition: all .25s ease; | ||
+ | -o-transition: all .25s ease; | ||
+ | transition: all .25s ease; | ||
+ | } | ||
+ | #cssmenu2.align-right ul ul li.has-sub > a:before { | ||
+ | right: auto; | ||
+ | left: 14px; | ||
} | } | ||
+ | #cssmenu2 ul ul > li.has-sub:hover > a:before { | ||
+ | top: 17px; | ||
+ | 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 98: | 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=' | + | |
+ | |||
+ | <div id= ' inthis'> | ||
+ | |||
+ | |||
+ | <div id='cssmenu2' class='align-center'> | ||
− | <ul> | + | <ul> |
− | <li><a href='https://2015.igem.org/Template:NYMU-2015project- | + | |
− | + | <li><a href='https://2015.igem.org/Team:NYMU-Taipei' class="homenav">HOME</a></li> | |
− | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab- | + | |
− | + | <li><a ='#'class="overnav">OVERVIEW</a> | |
+ | <ul> | ||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-overview'>Background</a></li> | ||
+ | |||
+ | <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/Team:NYMU-Taipei/Parts'>Parts</a> | ||
+ | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Attributions'>Attributions</a></li> | ||
+ | <ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab'class="projnav">PROJECT</a> | ||
+ | <ul> | ||
+ | |||
+ | |||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab#experiment'>Experiment</a> | ||
+ | </li> | ||
+ | <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> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Practices' class="ppnav">POLICY PRACTICES</a></li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-safety' class="bsnav">BIOSAFETY</a> | ||
+ | |||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li><a class="ntnav">NOTEBOOK</a> | ||
+ | <ul> | ||
+ | <li><a href='https://2015.igem.org/wiki/index.php?title=Template:NYMU-2015notebook-calendar'>Calendar</a></li> | ||
+ | <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> | ||
+ | </li> | ||
+ | |||
+ | <li><a href='https://2015.igem.org/Team:NYMU-Taipei/Team'class="teamnav">TEAM</a></li> | ||
+ | |||
+ | |||
</ul> | </ul> | ||
</div> | </div> | ||
− | + | <div id='jumpup'> | |
+ | <div class='infotop'></div> | ||
+ | <div class='pic'></div> | ||
+ | </div> | ||
+ | </div> | ||
</html> | </html> |
Latest revision as of 16:39, 18 September 2015