Difference between revisions of "Template:Nymu-menu2"
Line 7: | Line 7: | ||
− | # | + | #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 27: | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | z-index: | + | z-index:1; |
} | } | ||
− | # | + | #cssmenu2:after, |
− | # | + | #cssmenu2 > ul:after { |
content: "."; | content: "."; | ||
display: block; | display: block; | ||
Line 35: | Line 40: | ||
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-position: 60%; | background-position: 60%; | ||
border-top-width: 0px; | border-top-width: 0px; | ||
Line 50: | Line 56: | ||
border-left-style: none; | border-left-style: none; | ||
padding: 0px; | padding: 0px; | ||
− | margin-left: | + | margin-left: 10%; |
− | + | ||
position: fixed; | position: fixed; | ||
− | width: | + | width: 80%; |
− | z-index: | + | z-index: 1; |
− | + | 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; | ||
Line 85: | Line 93: | ||
} | } | ||
− | # | + | #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 252: | ||
+ | <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-wetlab- | + | |
− | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab- | + | <li><a href='https://2015.igem.org/wiki/index.php?title=Template:NYMU-Taipei2'>HOME</a></li> |
− | + | ||
− | <li><a href=' | + | <li class='active'><a href='#'>OVERVIEW</a> |
+ | <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-wetlab'>Result</a></li> | ||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-drylab'>Achievement</a></li> | ||
+ | |||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-hp'>Parts</a> | ||
+ | <ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li class='active'><a href='#'>PROJECT</a> | ||
+ | <ul> | ||
+ | |||
+ | |||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-wetlab-FYVE'>Experiment</a> | ||
+ | </li> | ||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015project-drylab-FYVE'>Modeling</a> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href='hthttps://2015.igem.org/Template:NYMU-2015project-hp'>POLICY PRACTICES</a></li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li class='active'><a href='https://2015.igem.org/Template:NYMU-2015projectsafety'>BIOSAFETY</a> | ||
+ | <ul> | ||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015projectsafety-lab'>Lab</a> | ||
+ | </li> | ||
+ | <li><a href='https://2015.igem.org/Template:NYMU-2015projectsafety-environment'>Environment</a> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li class='active'><a href='#'>NOTEBOOK</a> | ||
+ | <ul> | ||
+ | <li><a href='#'>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='#'>TEAM</a></li> | ||
+ | |||
+ | |||
</ul> | </ul> | ||
</div> | </div> | ||
− | + | <div id='jumpup'> | |
+ | <div class='infotop'></div> | ||
+ | <div class='pic'></div> | ||
+ | </div> | ||
+ | </div> | ||
</html> | </html> |
Revision as of 15:22, 26 August 2015