Template:CalgaryMenu
From 2011.igem.org
(Difference between revisions)
(16 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | |||
<head> | <head> | ||
- | + | <style> | |
+ | /***Master styling of text components, because we like consistency***/ | ||
- | + | h1, h2, h3, h4, h5, p, a{ | |
+ | text-decoration: none; | ||
+ | border: 0; | ||
+ | font-family: Arial; | ||
+ | } | ||
- | + | #sidetext a, #sidetext p, #sidetext li a{ | |
- | + | color: white; | |
- | + | font-family: Arial; | |
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /***End master styling***/ | |
- | + | ||
- | + | /*** | |
+ | Minimal header: removes the search bar and header image and readjusts font colours in the menus. | ||
- | + | Thanks a lot to the 2011 Brown-Stanford iGEM team for snippets of their code! | |
+ | Check out their wiki at https://2011.igem.org/Team:Brown-Stanford | ||
+ | ***/ | ||
- | + | div#top-section{ /*the div containing the entire top bar*/ | |
- | + | height: 20px; | |
- | + | margin-left: auto; | |
+ | margin-right: auto; | ||
+ | margin-bottom: 0px !important; | ||
+ | margin-top: -14px; | ||
+ | padding:0px 0px 0px 0px;; | ||
+ | border: none; | ||
+ | width: 100%; | ||
+ | background: none; | ||
+ | color: black; | ||
+ | position:absolute; | ||
+ | } | ||
- | + | #p-logo { /*the header image*/ | |
- | + | height:0px; | |
- | + | overflow:hidden; | |
+ | border:none; | ||
+ | } | ||
- | + | #content{ | |
- | + | margin-top: 14px; | |
- | + | } | |
- | + | #search-controls { | |
- | + | overflow:hidden; | |
- | + | display:none; | |
+ | background: none; | ||
+ | position: absolute; | ||
+ | top: 170px; | ||
+ | right: 40px; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | + | div#header { | |
- | + | width: 975px; | |
- | + | text-align: left; | |
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | margin-bottom: 0px !important; | ||
+ | } | ||
+ | #menubar { | ||
+ | position: absolute; | ||
+ | background: none; | ||
+ | color: black; | ||
+ | } | ||
- | + | .left-menu, .right-menu{ | |
- | + | position: absolute; | |
- | + | background: none; | |
- | + | color: white; | |
- | + | } | |
+ | .left-menu li, .right-menu li a { | ||
+ | color: transparent !important; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | .left-menu ul li, .right-menu ul li a{ | ||
+ | background: none; | ||
+ | color: white; | ||
+ | } | ||
- | + | .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active { | |
- | + | color: white !important; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /***End minimal header***/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | + | /***Now for our own stuff: personalized header images and navbar***/ | |
- | + | ||
- | + | ||
- | + | ||
+ | #headerbar{ | ||
+ | margin-left: -5px; | ||
+ | } | ||
- | + | /*div containing menu bar*/ | |
- | + | ul#topnav{ | |
- | + | margin: 0; padding: 0; | |
+ | float: left; | ||
+ | width: 975px; | ||
+ | height: 35px; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | font-size: 1.2em; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/7/7b/UCalgary_NavRepeater.png); | ||
+ | background-repeat: repeat-x; | ||
+ | margin-top: -60px; /*moves the bar up into the header image*/ | ||
+ | } | ||
- | + | ul#topnav a.navtext{ | |
- | + | float: left; | |
- | + | display: block; | |
- | + | height: 35px; | |
- | + | text-indent: -99999px; | |
- | + | background-position: left top; | |
- | + | } | |
- | + | ul#topnav li{ | |
- | + | float: left; | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ul#topnav li a{ | |
- | + | padding: 0; | |
- | + | display: block; | |
- | + | color: #f0f0f0; | |
- | + | text-decoration: none; | |
- | + | } | |
- | + | ||
- | + | ul#topnav li:hover{ | |
- | + | background-position: left bottom; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ul#topnav a:hover{ | |
- | + | background-position: left bottom; | |
+ | } | ||
+ | ul#topnav li span{ | ||
+ | float: left; | ||
+ | padding: 5px 0; | ||
+ | position: absolute; | ||
+ | left: 0; top: 35px; | ||
+ | display: none; /*Default hidden*/ | ||
+ | width: 975px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SubNavRepeater.png); | ||
+ | background-repeat: repeat-x; | ||
+ | color: black; | ||
+ | } | ||
- | + | /*Establish sprites for each individual button*/ | |
+ | #homebutton a{ | ||
+ | margin-left: 60px; /*to center the bar*/ | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/2/21/UCalgary_ButtonHome.png); | ||
+ | width: 112px; | ||
+ | } | ||
+ | #teambutton a{ | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/1/1e/UCalgary_ButtonTeam.png); | ||
+ | width: 103px; | ||
+ | } | ||
+ | #projectbutton a{ | ||
+ | background-image: url(https://static.igem.org/mediawiki/2011/9/90/UCalgary_ButtonProject.png); | ||
+ | width: 118px; | ||
+ | } | ||
- | + | #partsbutton a{ | |
+ | background-image: url(https://static.igem.org/mediawiki/2011/c/c5/UCalgary_ButtonParts.png); | ||
+ | width: 100px; | ||
+ | } | ||
- | + | #notebookbutton a{ | |
- | + | background-image: url(https://static.igem.org/mediawiki/2011/e/eb/UCalgary_ButtonNotebook.png); | |
+ | width: 143px; | ||
+ | } | ||
- | + | #outreachbutton a{ | |
- | + | background-image: url(https://static.igem.org/mediawiki/2011/5/52/UCalgary_ButtonOutreach.png); | |
- | + | width: 140px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | #sponsorsbutton a{ | |
- | + | background-image: url(https://static.igem.org/mediawiki/2011/b/b3/UCalgary_ButtonSponsors.png); | |
- | + | width: 138px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /*Correction of subnavigation menu backgrounds*/ | |
- | + | ul#topnav li#teambutton span a, | |
- | + | ul#topnav li#projectbutton span a, | |
- | + | ul#topnav li#partsbutton span a, | |
- | + | ul#topnav li#notebookbutton span a, | |
- | + | ul#topnav li#outreachbutton span a, | |
- | + | ul#topnav li#sponsorsbutton span a{ | |
- | + | height: 35px; | |
- | + | background-image: none; | |
- | + | color: #3c3d3d; | |
- | + | font-family: Arial; | |
- | + | font-size: 1.1em; | |
- | + | font-weight: 300; | |
+ | } | ||
- | + | ul#topnav li span a{ | |
- | + | display: inline; /*correction of previous link style*/ | |
- | + | background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SubNavRepeater.png); | |
+ | background-repeat: repeat-x; | ||
+ | padding-left: 9px; | ||
+ | padding-right: 9px; | ||
+ | } | ||
- | + | /*Rollover settings*/ | |
- | + | ul#topnav li:hover span{ | |
- | + | display: block; | |
- | + | z-index: 999; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | ul#topnav li span a:hover{ | ||
+ | text-decoration: underline; | ||
+ | } | ||
- | + | /*Active state settings*/ | |
- | + | #home li#homebutton a, | |
- | + | #team li#teambutton a, | |
- | + | #project li#projectbutton a, | |
- | + | #parts li#partsbutton a, | |
- | + | #notebook li#notebookbutton a, | |
- | + | #outreach li#outreachbutton a, | |
- | + | #sponsors li#sponsorsbutton a{ | |
- | + | background-position: left bottom; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | #team li#teambutton span, | |
- | + | #project li#projectbutton span, | |
- | + | #parts li#partsbutton span, | |
- | + | #notebook li#notebookbutton span, | |
- | + | #outreach li#outreachbutton span, | |
- | + | #sponsors li#sponsorsbutton span{ | |
- | + | display: block; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
+ | /***End menu stuff. Onto the rest of the header!***/ | ||
- | + | #headbanner{ | |
- | + | margin-left: -5px; | |
- | + | margin-top: -38px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #fb-button{ | |
+ | position: absolute; | ||
+ | margin-left: 872px; | ||
+ | margin-top: -170px; | ||
+ | } | ||
- | + | #twitter-button{ | |
+ | position: absolute; | ||
+ | margin-left: 898px; | ||
+ | margin-top: -170px; | ||
+ | } | ||
- | + | #backhome{ | |
+ | color: #07304f; | ||
+ | font-family: Arial; | ||
+ | font-size: 1em; | ||
+ | position: absolute; | ||
+ | margin-left: 755px; | ||
+ | margin-top: -190px; | ||
+ | } | ||
+ | #backhome:hover{ | ||
+ | text-decoration: none; | ||
+ | } | ||
- | + | /*...Not much, was there.*/ | |
- | + | </style> | |
+ | </head> | ||
+ | |||
+ | <body id="</html>{{{1}}}<html>"> | ||
+ | |||
+ | <a href="https://2011.igem.org/Team:Calgary"><img id="headbanner" src="https://static.igem.org/mediawiki/2011/2/25/UCalgary_HeaderImage.png"></img></a> | ||
+ | <a href="https://www.facebook.com/pages/Calgary-iGEM/215971681759173"><img id="fb-button" src="https://static.igem.org/mediawiki/2011/d/d8/UCalgary_FacebookF.png"></img></a> | ||
+ | <a href="http://www.twitter.com/iGEMCalgary"><img id="twitter-button" src="https://static.igem.org/mediawiki/2011/4/4e/UCalgary_TwitterT.png"></img></a> | ||
+ | <a id="backhome" href="https://2011.igem.org"><img src="https://static.igem.org/mediawiki/2011/b/b3/UCalgary_IGEM_official_logo.png"></img></a> | ||
+ | |||
+ | |||
+ | <div id="headerbar"> | ||
+ | <ul id="topnav"> | ||
+ | <li id="homebutton"><a class="navtext" href="https://2011.igem.org/Team:Calgary">Home</a></li> | ||
+ | <li id="teambutton"> | ||
+ | <a class="navtext" href="https://2011.igem.org/Team:Calgary/Team">Team</a> | ||
+ | <span> | ||
+ | <a href="https://2011.igem.org/Team:Calgary/Team/Biographies">Biographies</a> | | ||
+ | <a href="https://2011.igem.org/Team:Calgary/Team/Facilitators">Facilitators</a> | | ||
+ | <a href="https://2011.igem.org/Team:Calgary/Team/About_The_University">The University</a> | | ||
+ | <a href="https://igem.org/Team.cgi?id=640">Official Profile</a> | | ||
+ | </span> | ||
+ | </li> | ||
+ | <li id="projectbutton"> | ||
+ | <a class="navtext" href="https://2011.igem.org/Team:Calgary/Project">Project</a> | ||
+ | <span> | ||
+ | <a href="#">Overview</a> | | ||
+ | <a href="#">Project Pseudomonas</a> | | ||
+ | <a href="#">Project Electro</a> | | ||
+ | <a href="#">Project Algae</a> | | ||
+ | <a href="#">Software Tools</a> | | ||
+ | <a href="#">Future Directions</a> | | ||
+ | </span> | ||
+ | </li> | ||
+ | <li id="partsbutton"> | ||
+ | <a class="navtext" href="https://2011.igem.org/Team:Calgary/Parts">Parts</a> | ||
+ | <span> | ||
+ | <a href="#">Parts Submitted</a> | | ||
+ | <a href="#">Characterization</a> | | ||
+ | </span> | ||
+ | </li> | ||
+ | <li id="notebookbutton"> | ||
+ | <a class="navtext" href="https://2011.igem.org/Team:Calgary/Notebook">Notebook</a> | ||
+ | <span> | ||
+ | <a href="#">Calendar</a> | | ||
+ | <a href="#">Protocols</a> | | ||
+ | <a href="https://2011.igem.org/Team:Calgary/Safety">Safety</a> | | ||
+ | </span> | ||
+ | </li> | ||
+ | <li id="outreachbutton"> | ||
+ | <a class="navtext" href="https://2011.igem.org/Team:Calgary/Outreach">Outreach</a> | ||
+ | <span> | ||
+ | <a href="#">Human Practices</a> | | ||
+ | <a href="#">Conferences</a> | | ||
+ | <a href="#">Forum</a> | | ||
+ | <a href="#">Follow Us!</a> | | ||
+ | </span> | ||
+ | </li> | ||
+ | <li id="sponsorsbutton"> | ||
+ | <a class="navtext" href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a> | ||
+ | <span> | ||
+ | <a href="#">Sponsors</a> | | ||
+ | <a href="#">Acknowledgements</a> | | ||
+ | </span> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
</body> | </body> | ||
+ | |||
</html> | </html> |
Latest revision as of 17:24, 27 July 2011
![](https://static.igem.org/mediawiki/2011/2/25/UCalgary_HeaderImage.png)
![](https://static.igem.org/mediawiki/2011/d/d8/UCalgary_FacebookF.png)
![](https://static.igem.org/mediawiki/2011/4/4e/UCalgary_TwitterT.png)
![](https://static.igem.org/mediawiki/2011/b/b3/UCalgary_IGEM_official_logo.png)