Template:Team:UIUC Illinois/Navbar
From 2014.igem.org
(Difference between revisions)
(105 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
- | < | + | <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'> |
- | + | <style type="text/css"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* Navigation Menu */ | |
- | + | .navmenubkg { | |
- | + | position:fixed; | |
- | + | display:block; | |
- | + | z-index:50; | |
- | + | top:0; | |
- | + | height:40px; | |
- | + | left:0; | |
- | + | right:0; | |
- | + | background:white; | |
- | + | } | |
- | + | .subnav { | |
- | + | position:fixed; | |
- | + | display:none; | |
- | + | z-index:50; | |
- | + | top:43px; | |
- | + | height:40px; | |
- | + | left:0; | |
- | + | right:0; | |
- | + | background-color: #CCA36F; | |
- | + | } | |
- | + | #navmenubox { | |
- | + | padding:0; | |
- | + | margin-left:auto; | |
- | + | margin-right:auto; | |
- | + | width:1100px; | |
- | + | height:40px; | |
- | + | z-index:100; | |
- | + | display:block; | |
- | + | background:transparent; | |
- | + | color: rgb(46,43,52); | |
- | + | text-align:center; | |
- | + | border-bottom:4px solid rgba(80,66,45,0.9); | |
- | + | } | |
- | + | .sidelogos { | |
- | + | float:left; | |
- | + | display:block; | |
+ | margin-left:auto; | ||
+ | height:100%; | ||
+ | width:auto; | ||
+ | } | ||
+ | .sidelogos a { | ||
+ | display:block; | ||
+ | top:0; | ||
+ | bottom:0; | ||
+ | } | ||
+ | #hicon{ | ||
+ | width:30px; | ||
+ | } | ||
+ | #sicon{ | ||
+ | width:30px; | ||
+ | } | ||
+ | |||
+ | #igemlogo{ | ||
+ | width:55px; | ||
+ | } | ||
+ | |||
+ | #hicon img, #sicon img, #igemlogo img{ | ||
+ | background-color:rgb(46,43,52); | ||
+ | margin-top:8px; | ||
+ | margin-bottom:2px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #picon img{ | ||
+ | background-color:"white"; | ||
+ | margin-top:8px; | ||
+ | margin-bottom:2px; | ||
+ | } | ||
+ | |||
+ | #hicon:hover img, #sicon:hover img{ | ||
+ | background-color:rgb(255,203,139); | ||
+ | } | ||
+ | #igemlogo:hover img { | ||
+ | background-color:rgb(0,153,102); | ||
+ | } | ||
+ | #picon{ | ||
+ | width:15px; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | margin-left:1100px; | ||
+ | } | ||
+ | |||
+ | ul#nav { | ||
+ | display:block; | ||
+ | float:left; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | list-style: none; | ||
+ | height:40px; | ||
+ | width:890px; | ||
+ | background:none; | ||
+ | z-index:100; | ||
+ | font-family: 'Archivo Narrow', sans-serif; | ||
+ | } | ||
+ | ul#nav a { | ||
+ | display:block; | ||
+ | top:0; | ||
+ | bottom:0; | ||
+ | } | ||
+ | ul#nav ul { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | background:transparent; | ||
+ | z-index:100; | ||
+ | } | ||
+ | ul#nav li { | ||
+ | float:left; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | width:127px; | ||
+ | margin-top:13px; | ||
+ | line-height:27px; | ||
+ | height:27px; | ||
+ | font-size:15px; | ||
+ | font-weight:600; | ||
+ | background:transparent; | ||
+ | font-weight:normal; | ||
+ | z-index:100; | ||
+ | } | ||
+ | ul#nav li:hover, ul#nav li.over, ul#nav li:hover a, ul#nav li.over a { | ||
+ | color: rgb(255,203,139); | ||
+ | border-bottom:4px solid rgb(255,255,255); | ||
+ | } | ||
+ | ul#nav a{ | ||
+ | padding:0px; | ||
+ | margin:0px; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | text-decoration:none; | ||
+ | background:transparent; | ||
+ | color:rgb(46,43,52); | ||
+ | } | ||
+ | ul#nav a:hover{ | ||
+ | color: rgb(255,203,139); | ||
+ | } | ||
+ | #nav li ul { | ||
+ | display:block; | ||
+ | margin:0; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | padding:0; | ||
+ | list-style: none; | ||
+ | width:1100px; | ||
+ | height:40px; | ||
+ | background:transparent; | ||
+ | color:rgb(46,43,52); | ||
+ | z-index:100; | ||
+ | } | ||
+ | #nav li ul li { | ||
+ | margin:0px; | ||
+ | padding:0; | ||
+ | float:left; | ||
+ | background:none; | ||
+ | height:100%; | ||
+ | line-height:40px; | ||
+ | height:40px; | ||
+ | width:127px; | ||
+ | color:rgb(46,43,52); | ||
+ | z-index:100; | ||
+ | } | ||
+ | #nav li:hover .subnav { | ||
+ | display:block; | ||
+ | } | ||
+ | #nav li .subnav:hover { | ||
+ | display:block; | ||
+ | } | ||
+ | ul#nav li:hover li a, ul#nav li.over li a { | ||
+ | color: rgb(46,43,52); | ||
+ | font-weight:normal; | ||
+ | border:none; | ||
+ | } | ||
+ | ul#nav li li:hover, ul#nav li li.over, ul#nav li li:hover a, ul#nav li li.over a { | ||
+ | color:rgb(225, 203, 139); | ||
+ | border:none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <div style="clear: both;"></div> | ||
+ | <div class="navmenubkg"> | ||
+ | <div id="navmenubox"> | ||
+ | |||
+ | <!--Redirects to Home Page--> | ||
+ | <div id="hicon" class="sidelogos"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois" title="Home Page"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/1/17/PB_LogoHome.gif" height="30px"/> | ||
+ | </a> | ||
</div> | </div> | ||
+ | |||
+ | <ul id="nav"> | ||
+ | <!--Redirects to Project Tree--> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Project/PuppyProbiotic" title="PuppyProbiotic">PROJECT</a> | ||
+ | <div class="subnav"> | ||
+ | <ul> | ||
+ | <li style="margin-left:14.5px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Project/PuppyProbiotic" title="PuppyProbiotic">PUPPY PROBIOTIC</a> </li> | ||
+ | <li style="width:220px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Project/Future" title="Future Directions">FUTURE DIRECTIONS</a> </li> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Modeling" title="Bioreactor">MODELING</a> </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <!--Redirects to Achievements Tree--> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Results" title="Achievements">ACHIEVEMENTS</a> | ||
+ | <div class="subnav"> | ||
+ | <ul> | ||
+ | <li style="margin-left:45px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Results" title="Results">RESULTS</a> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Parts" title="Parts">PARTS</a></li> | ||
+ | <li style="width:167px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Medal_Fulfillment" title="Medal Fulfillment">MEDAL FULFILLMENT</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <!--Redirects to Software Tree--> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Software/Cutsultant" title="Cutsultant">SOFTWARE</a> | ||
+ | <div class="subnav"> | ||
+ | <ul> | ||
+ | |||
+ | <li style="margin-left: 200px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Software/Cutsultant" title="Cutsultant">CUTSULTANT</a></li> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Software/Evolvalvability" title="Evolvability">EVOLVABILITY</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Human_Practice/ethics" title="ethics">HUMAN PRACTICE</a> | ||
+ | <div class="subnav"> | ||
+ | <ul> | ||
+ | |||
+ | <li style="margin-left:250px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Human_Practice/ethics" title="ethics">ETHICS</a></li> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Human_Practice/Outreach" title="Outreach">OUTREACH</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Safety" title="Safety">SAFETY</a> | ||
+ | <div class="subnav"> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Notebook" title="Notebook">NOTEBOOK</a> | ||
+ | <div class="subnav"> | ||
+ | <ul> | ||
+ | <li style="margin-left:570px"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Notebook" title="Notes">NOTES</a> </li> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Protocols" title="Protocols">PROTOCOLS</a> </li> | ||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Bibliography" title="Bibliography">BIBLIOGRAPHY</a> </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> <a href="https://2014.igem.org/Team:UIUC_Illinois/Team" title="Team">TEAM</a> | ||
+ | <div class="subnav"> | ||
+ | <ul> | ||
+ | <li style="margin-left:622.5px;"> <a href="https://2014.igem.org/Team:UIUC_Illinois/Team" title="Team">OUR TEAM</a></li> | ||
+ | <li> <a href="https://igem.org/Team.cgi?year=2014&team_name=UIUC_Illinois" title="Official">OFFICIAL PROFILE</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | <div id="igemlogo" class="sidelogos"> | ||
+ | <a href="https://2014.igem.org/Main_Page" title="iGEM 2014" target="_blank"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/d/d0/PB_LogoiGEM.gif" height="30px"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div id="picon"> | ||
+ | <a onclick="changemenu()" title="iGEM wiki buttons"> | ||
+ | <img id="ooswitch" src="https://static.igem.org/mediawiki/2014/0/0c/1408579301_wrench_sticker.png" style="margin-top:0px;" height="15px"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | <div style="clear: both;"></div> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | ||
- | </ | + | <script type="text/javascript"> |
+ | function changemenu(){ | ||
+ | if($('.left-menu').is(":visible")) { | ||
+ | $('.left-menu').hide(); | ||
+ | $('.right-menu').hide(); | ||
+ | document.getElementById('ooswitch').style.backgroundColor = "white"; | ||
+ | }else{ | ||
+ | $('.left-menu').show(); | ||
+ | $('.right-menu').show(); | ||
+ | document.getElementById('ooswitch').style.backgroundColor = "rgb(255,203,139)"; | ||
+ | } | ||
+ | } | ||
+ | </script> |
Latest revision as of 03:52, 18 October 2014