Difference between revisions of "Template:Freiburg/Menubar"
Line 1: | Line 1: | ||
+ | <!-- doctype html --> | ||
<html> | <html> | ||
− | < | + | <head> |
− | <ul> | + | <title>DiaCHIP</title> |
− | <li><a href=" | + | <meta charset="utf-8"> |
− | + | <link rel="stylesheet" type="text/css" href="idee_nav3.css"> | |
− | + | ||
+ | <!-- Begin CSS Stylesheet --> | ||
+ | <style> | ||
+ | |||
+ | /* ============= Resetting css coming from wiki itself ============= */ | ||
+ | body { | ||
+ | font: sans-serif; | ||
+ | color: #000; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | background-color: #AAA; | ||
+ | line-height: 1.8; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: #002BB8; | ||
+ | text-decoration: none; | ||
+ | background: transparent none repeat scroll 0% 0%; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | margin: 0.4em 0px 0.5em; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | position: absolute; | ||
+ | font-size: 150%; | ||
+ | width: 100%; | ||
+ | margin: 0px; | ||
+ | padding: 0px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #mainContainer { | ||
+ | margin: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #top_menu_under { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 16px; | ||
+ | border-bottom: 2px solid #000; | ||
+ | } | ||
+ | |||
+ | #top_menu_14 { | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | height: 16px; | ||
+ | background-color: #383838; | ||
+ | border-bottom: 2px solid #000; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | |||
+ | #top_menu_inside { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | width: 900px; | ||
+ | height: 100%; | ||
+ | margin: 0px auto; | ||
+ | padding: 0px 10px; | ||
+ | border-left: 1px solid #C8C8C8; | ||
+ | border-right: 1px solid #C8C8C8; | ||
+ | font-family: "arial",sans-serif; | ||
+ | font-size: 12px; | ||
+ | font-weight: 400; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #content { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: #FFF none repeat scroll 0% 0%; | ||
+ | color: #000; | ||
+ | border-left: 0; | ||
+ | border-right: 0; | ||
+ | /* line-height: 0; */ | ||
+ | z-index: 2; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .visualClear { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============= END: Resetting css coming from wiki itself ============= */ | ||
+ | |||
+ | |||
+ | /* Navigation Bar style sheet */ | ||
+ | |||
+ | /* Begin horizontal menubar */ | ||
+ | #navmenu { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | #navmenu ul { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | line-height: 30px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #navmenu li { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | list-style-type: none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | |||
+ | } | ||
+ | |||
+ | #navmenu ul li a { /* targets the size of the link area --> now not just the text but the whole box can be clicked */ | ||
+ | height: 30px; | ||
+ | width: 150px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | color: #FFF; | ||
+ | background: #000; /*putting the background here just affects the link area */ | ||
+ | border: 1px; | ||
+ | border-color: aquamarine; | ||
+ | border-style: solid; | ||
+ | border-radius: 10px; /* makes round corners to box formed link */ | ||
+ | text-shadow: 1px /*horizontal */ 0px /*vertical*/ 0px /*blur*/; | ||
+ | } | ||
+ | |||
+ | /*Subitem Level 1*/ | ||
+ | #navmenu ul ul { | ||
+ | position: absolute; /*ordnet Unterpunkte untereinander an */ | ||
+ | visibility: hidden; | ||
+ | top: 32px; /*make it +2px than ul li a to make the corners of the blocks fit perfectly together because you added a border of 1px at each side */ | ||
+ | } | ||
+ | |||
+ | #navmenu ul li:hover ul { /*makes sublist items appear when hovering the mother item */ | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | /*Subitem Level 2*/ | ||
+ | #navmenu ul ul ul { | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | left: 152px; | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | #navmenu ul ul li:hover ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #navmenu li:hover a:hover { /*wenn man nur a macht, dann ist der ganze Block farbig. Macht man a:hover ist es nur das einzelne Fels */ | ||
+ | background-color: deepskyblue; | ||
+ | } | ||
+ | |||
+ | #navmenu a:hover { /* makes text change colour when hovering over it */ | ||
+ | color: chartreuse; | ||
+ | } | ||
+ | |||
+ | #navmenu ul li:hover ul li a:hover { /* attributes a colour to subitem when hovering it while the mother item stays in the colour of li:hover */ | ||
+ | background-color: fuchsia; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #navmenu ul li:hover > a { /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */ | ||
+ | background-color: burlywood; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*#navmenu ul li:after { | ||
+ | } | ||
+ | #navmenu ul ul li { | ||
+ | display: block; /* damit sind submenupunkte untereinander */ | ||
+ | } | ||
+ | |||
+ | /*End of horizontal menubar */ | ||
+ | |||
+ | /* classes for icons */ | ||
+ | .home { | ||
+ | background: url(images/icon_home_new2.png); | ||
+ | } | ||
+ | </style> | ||
+ | <!-- End CSS STylesheet --> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div id="globalwrapper"> | ||
+ | <div id="navmenu"> | ||
+ | <ul> | ||
+ | <li class="home"><a href="#">Home</a></li> | ||
+ | <li><a href="#">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Overview</a></li> | ||
+ | <li><a href="#">Background</a></li> | ||
+ | <li><a href="#">Diagnostics today</a></li> | ||
+ | <li><a href="#">Methodology</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Cloning</a></li> | ||
+ | <li><a href="#">Protein Purification</a></li> | ||
+ | <li><a href="#">Cell-free Expression</a></li> | ||
+ | <li><a href="#">Surface Chemistry</a></li> | ||
+ | <li><a href="#">iRIf</a></li> | ||
+ | <li><a href="#">Diseases</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Team</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Members</a></li> | ||
+ | <li><a href="#">Acknowledgements</a></li> | ||
+ | <li><a href="#">Partners</a></li> | ||
+ | <li><a href="#">Collaborations</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Results</a> | ||
<ul> | <ul> | ||
− | <li><a href=""> | + | <li><a href="#">The DiaCHIP</a> |
− | <li><a href=""> | + | <ul> |
− | <li><a href=""> | + | <li><a href="#">DNA on PDMS</a></li> |
+ | <li><a href="#">Cell-free expression</a></li> | ||
+ | <li><a href="#">Binding on Surface</a></li> | ||
+ | <li><a href="#">Diagnostics</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Modeling</a></li> | ||
+ | <li><a href="#">Own Device</a></li> | ||
+ | <li><a href="#">Biobricks</a></li> | ||
+ | <li><a href="#">Interlab Study</a></li> | ||
</ul> | </ul> | ||
− | + | </li> | |
− | + | <li><a href="#">Human Practice</a> | |
− | <li><a href=" | + | |
<ul> | <ul> | ||
− | <li><a href=" | + | <li><a href="#">Science Fair</a></li> |
− | + | <li><a href="#">Theatre Project</a></li> | |
− | <li><a href=" | + | <li><a href="#">Survey</a></li> |
− | <li><a href=" | + | <li><a href="#">Liberal Arts & Sciences</a></li> |
− | <li><a href=" | + | <li><a href="#">Ethics</a></li> |
− | <li><a href=" | + | |
− | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
− | + | <li><a href="#">Notebook</a> | |
<ul> | <ul> | ||
− | + | <li><a href="#">Protocols</a></li> | |
− | + | <li><a href="#">Labjournal</a> | |
− | + | <ul> | |
− | + | <li><a href="#">Cloning</a></li> | |
− | + | <li><a href="#">Protein Purification</a></li> | |
− | + | <li><a href="#">Cell-free Expression</a></li> | |
− | + | <li><a href="#">Surface Chemistry</a></li> | |
− | + | <li><a href="#">iRIf</a></li> | |
− | + | </ul> | |
− | + | </li> | |
+ | <li><a href="#">Materials</a></li> | ||
+ | <li><a href="#">Safety</a></li> | ||
</ul> | </ul> | ||
− | + | </li> | |
− | + | </ul> | |
− | </ | + | <br class="clearfloat"> |
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
</html> | </html> |
Revision as of 15:30, 28 August 2015