Difference between revisions of "Template:Freiburg/Menubar"
(Code added (sb)) |
|||
Line 1: | Line 1: | ||
− | <!-- doctype html --> | + | <!--doctype html--> |
<html> | <html> | ||
<head> | <head> | ||
− | <title> | + | <title>""</title> |
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
− | + | ||
<!-- Begin CSS Stylesheet --> | <!-- Begin CSS Stylesheet --> | ||
− | <style> | + | <style> |
/* ============= Resetting css coming from wiki itself ============= */ | /* ============= Resetting css coming from wiki itself ============= */ | ||
Line 102: | Line 102: | ||
− | /* | + | /* ============= BEGIN: Stylesheet for navigation menu ============= */ |
− | /* Begin | + | /*Stylesheet for Navigation Bar*/ |
− | # | + | |
− | margin: | + | /* Begin General Settings */ |
+ | body { | ||
+ | font-family: Candara, Calibri, sans-serif; | ||
+ | } | ||
+ | /* End General Settings */ | ||
+ | |||
+ | |||
+ | #naviconwrapper { | ||
+ | margin: 0px ; /*auto centers wrapper*/ | ||
+ | height: 96px; | ||
+ | width: 100%; | ||
+ | min-width: 900px; | ||
+ | padding-top: 16px; | ||
+ | z-index: -100; | ||
+ | background-color: #0051A2; | ||
+ | } | ||
+ | |||
+ | #naviconbar { | ||
+ | margin: 0px auto; | ||
padding: 0px; | padding: 0px; | ||
+ | width: 100%; | ||
+ | min-width: 900px; | ||
+ | background-color: #0051A2; | ||
+ | border-top-color: #FFF; | ||
+ | border-top-width: 1px; | ||
+ | border-top-style: inset; | ||
+ | border-bottom-color: #FFF; | ||
+ | border-bottom-width: 1px; | ||
+ | border-bottom-style: outset; | ||
+ | z-index: -60; | ||
} | } | ||
+ | |||
− | # | + | /*Begin Settings Main Menu Icons*/ |
− | margin: 0px; | + | #navicons { |
− | padding: 0px; | + | margin: 0px auto; |
− | + | padding: 0px; | |
− | + | width: 720px; | |
+ | height: 60px; | ||
+ | z-index: -10; | ||
+ | background-color: #FFF; /*defines color behind icons */ | ||
} | } | ||
− | # | + | #navicons ul { |
+ | margin: 0px auto; | ||
+ | padding: 0px; | ||
+ | width: 720px; | ||
+ | position: relative; /*makes chip go directly behind home from left corner*/ | ||
+ | } | ||
+ | |||
+ | #navicons ul li { | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
− | list-style | + | list-style: none; |
+ | /*display: block;*/ | ||
float: left; | float: left; | ||
position: relative; | position: relative; | ||
− | + | line-height: 106px; | |
+ | font-family: sans-serif; | ||
+ | font-size: 12px; | ||
+ | /*border: 1px solid #5781BD;*/ | ||
+ | z-index: 4; | ||
} | } | ||
− | # | + | #navicons ul li a { |
− | height: | + | height: 60px; |
− | width: | + | width: 120px; |
− | + | ||
− | + | ||
display: block; | display: block; | ||
+ | text-decoration: none; | ||
color: #FFF; | color: #FFF; | ||
− | + | text-align: center; | |
− | + | text-transform: uppercase; | |
− | + | z-index: 5; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | /* | + | #navicons ul a:hover { |
− | # | + | ; |
− | + | } | |
− | + | /*End Settings Main Menu Icons*/ | |
− | + | ||
+ | |||
+ | /* classes for icons */ | ||
+ | #home { | ||
+ | background: url(images/Freiburg_icon_home.png) no-repeat; | ||
+ | height: 60px; | ||
+ | background-position: center; | ||
} | } | ||
− | # | + | #project { |
− | + | background: url(images/Freiburg_icon_project.png) no-repeat; | |
+ | height: 60px; | ||
+ | background-position: center; | ||
+ | } | ||
+ | #team { | ||
+ | background: url(images/Freiburg_icon_team.png) no-repeat; | ||
+ | height: 60px; | ||
+ | background-position: center; | ||
+ | } | ||
+ | #results { | ||
+ | background: url(images/Freiburg_icon_results.png) no-repeat; | ||
+ | height: 60px; | ||
+ | background-position: center; | ||
} | } | ||
− | /* | + | #policy { |
− | # | + | background: url(images/Freiburg_icon_policy.png) no-repeat; |
+ | height: 60px; | ||
+ | background-position: center; | ||
+ | } | ||
+ | |||
+ | #notebook { | ||
+ | background: url(images/Freiburg_icon_notebook.png) no-repeat; | ||
+ | height: 60px; | ||
+ | background-position: center; | ||
+ | } | ||
+ | /* End classes for icons */ | ||
+ | |||
+ | |||
+ | /*Begin running chip */ | ||
+ | /*Begin Chip Design*/ | ||
+ | #runningchip { | ||
position: absolute; | position: absolute; | ||
− | + | width: 90px; | |
− | + | height: 60px; | |
− | top: | + | top: -15px; |
+ | left: 2.1%; | ||
+ | -webkit-transition: all 300ms ease-out; | ||
+ | -moz-transition: all 300ms ease-out; | ||
+ | transition: all 300ms ease-out; | ||
+ | z-index: 0; | ||
} | } | ||
− | # | + | #runningchip-back{ |
− | + | width:100%; | |
+ | height: 85px; | ||
+ | position: absolute; | ||
+ | background:#C5162F; | ||
+ | border-radius:5px; | ||
+ | border-bottom: 2px solid rgba(0, 0, 0, 0.09); | ||
+ | border-top: 2px solid rgba(255,255,255,0.1); | ||
+ | border-color: #0051A2; | ||
+ | } | ||
+ | |||
+ | #top-arrow{ /* arrow like element above slider */ | ||
+ | position:absolute; | ||
+ | overflow:hidden; | ||
+ | color: #C5162F; | ||
+ | width:100%; | ||
+ | height:14px; | ||
+ | top: 2px; | ||
+ | left:0; | ||
+ | z-index:2; | ||
+ | background-color: #C5162F; | ||
+ | border-top-right-radius: 5px; | ||
+ | border-top-left-radius: 5px; | ||
+ | } | ||
+ | |||
+ | #top-arrow:before{ | ||
+ | content:""; | ||
+ | position:absolute; | ||
+ | width:80%; | ||
+ | height:10px; | ||
+ | top:-12px; | ||
+ | left:10%; | ||
+ | border-radius:20%; | ||
+ | box-shadow:0 0 10px black; | ||
} | } | ||
− | # | + | #top-arrow:after{ /* little blue arrow */ |
− | + | content:""; | |
+ | position:absolute; | ||
+ | width:0; | ||
+ | height:0px; | ||
+ | top:0px; | ||
+ | border-top:8px solid #C5162F; | ||
+ | border-left:6px solid transparent; | ||
+ | border-right:6px solid transparent; | ||
+ | margin-left:-6px; | ||
+ | left:50%; | ||
} | } | ||
− | # | + | #bottom-arrow{ /* arrow like element beneath slider */ |
− | color: | + | position:absolute; |
+ | overflow:hidden; | ||
+ | width:100%; | ||
+ | height:15px; | ||
+ | bottom: -30px; | ||
+ | left:0; | ||
+ | z-index:2; | ||
+ | background-color: #C5162F; | ||
+ | border-bottom-right-radius: 5px; | ||
+ | border-bottom-left-radius: 5px; | ||
} | } | ||
− | # | + | #bottom-arrow:before{ |
− | + | content:""; | |
− | + | position:absolute; | |
+ | width:80%; | ||
+ | height:10px; | ||
+ | bottom:-12px; | ||
+ | left:10%; | ||
+ | border-radius:20%; | ||
+ | box-shadow:0 0 10px black; | ||
} | } | ||
− | # | + | #bottom-arrow:after{ |
− | + | content:""; | |
+ | position:absolute; | ||
+ | width:0; | ||
+ | height:0; | ||
+ | bottom:0; | ||
+ | border-bottom:12px solid #C5162F; | ||
+ | border-left:8px solid transparent; | ||
+ | border-right:8px solid transparent; | ||
+ | margin-left:-8px; | ||
+ | left:50%; | ||
} | } | ||
+ | /*End Chip Design*/ | ||
− | /*# | + | /*Begin Chip Movement*/ |
+ | #home:hover ~ #runningchip { | ||
+ | left: 2.1%; | ||
} | } | ||
− | # | + | |
− | + | #project:hover ~ #runningchip { | |
+ | left: 18.6%; | ||
} | } | ||
− | + | #team:hover ~ #runningchip { | |
+ | left: 35.5%; | ||
+ | } | ||
− | + | #results:hover ~ #runningchip { | |
− | + | left: 52%; | |
− | + | ||
} | } | ||
− | </style> | + | |
− | <!-- | + | #policy:hover ~ #runningchip { |
+ | left: 68.9%; | ||
+ | } | ||
+ | |||
+ | #notebook:hover ~ #runningchip { | ||
+ | left: 85.5%; | ||
+ | } | ||
+ | /*End Chip Movment*/ | ||
+ | /*End running chip*/ | ||
+ | |||
+ | |||
+ | /*Begin Settings Submenu Level 1*/ | ||
+ | #navtextwrapper { /*define background box*/ | ||
+ | margin: 0 auto; | ||
+ | padding: 0px; | ||
+ | top: -35px; | ||
+ | height: 24px; | ||
+ | width: 920px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #navtext { | ||
+ | text-align: center; | ||
+ | font-family: Candara,sans-serif; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | #navtext ul { | ||
+ | margin: 0px auto; | ||
+ | padding: 0px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #navtext li { | ||
+ | margin: -2px auto; /*centers text*/ | ||
+ | list-style: none; | ||
+ | display: inline-block; /*makes items go horizontal and centers them*/ | ||
+ | /*float: left;*/ /*makes items go horizontal*/ | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #navtext ul li a { | ||
+ | height: 24px; | ||
+ | padding-right: 15%; | ||
+ | padding-left: 15%; | ||
+ | line-height: 50px; | ||
+ | text-decoration: none; | ||
+ | color: #FFF; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | #navtext ul li:hover > a { | ||
+ | /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */ | ||
+ | color: #ecdc18; | ||
+ | } | ||
+ | |||
+ | #project-sub { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #team-sub { | ||
+ | /*background-color: #ac34fe;*/ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #results-sub{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #policy-sub{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #notebook-sub{ | ||
+ | display: none; | ||
+ | } | ||
+ | /*End Settings Submenu Level 1*/ | ||
+ | |||
+ | |||
+ | /* Begin Settings Submenu Level 2 */ | ||
+ | .navsub2 { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | /* End Settings Submenu Level 2 */ | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <!------------- END: Stylesheet for navigation menu -------------> | ||
+ | |||
+ | <!------------- BEGIN: jQuery -------------> | ||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | $("document").ready(function(){ <!-- make submenus appear --> | ||
+ | $("#home").hover(function(){ | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }); | ||
+ | $("#project").hover(function(){ | ||
+ | $("#project-sub") .show(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#project-sub") .delay('3000').fadeOut(); | ||
+ | }); | ||
+ | |||
+ | $("#team").hover(function(){ | ||
+ | $("#team-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#team-sub") .delay('3000').fadeOut(); | ||
+ | }); | ||
+ | |||
+ | $("#results").hover(function(){ | ||
+ | $("#results-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#results-sub") .delay('3000').fadeOut(); | ||
+ | }); | ||
+ | |||
+ | $("#policy").hover(function(){ | ||
+ | $("#policy-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#policy-sub") .delay('3000').fadeOut(); | ||
+ | }); | ||
+ | |||
+ | $("#notebook").hover(function(){ | ||
+ | $("#notebook-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#notebook-sub") .delay('2500').fadeOut(); | ||
+ | }); | ||
+ | |||
+ | <!-- make chip stay over main menu point when its submenu appears --> | ||
+ | $("#project-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','18.6%'); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | }); | ||
+ | $("#team-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','35.5%'); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | }); | ||
+ | $("#results-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','52%'); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | }); | ||
+ | $("#policy-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','68.9%'); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | }); | ||
+ | $("#notebook-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','85.5%'); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | }); | ||
+ | }); | ||
+ | }) | ||
+ | </script> | ||
+ | |||
+ | <!------------- END: jQuery -------------> | ||
</head> | </head> | ||
− | + | <!------------- BEGIN: Body content =-------------> | |
− | <div id=" | + | |
− | + | <body> | |
− | + | ||
− | + | <div id="header"> | |
− | + | <!-- Begin navigation menu icons --> | |
− | + | <div id="naviconwrapper"> <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren --> | |
− | + | <div id="naviconbar"> | |
− | + | <div id="navicons"> <!-- only icons --> | |
− | + | <ul> | |
− | + | <li id="home"><a href="#">Home</a> | |
− | + | </li> | |
− | + | <li id="project"><a href="#">Project</a> | |
− | + | </li> | |
− | + | <li id="team"><a href="#">Team</a> | |
− | + | </li> | |
− | + | <li id="results"><a href="#">Results</a> | |
− | + | </li> | |
− | + | <li id="policy" style="font-size:11px"><a href="#">Human Practice</a> | |
− | + | </li> | |
− | + | <li id="notebook"><a href="#">Notebook</a> | |
− | + | </li> | |
− | + | <div id="runningchip"> | |
− | + | <div id="top-arrow"></div> | |
− | + | <div id="runningchip-back"></div> | |
− | + | <div id="bottom-arrow"></div> | |
− | + | </div> | |
− | + | </ul> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!-- End navigation menu icons --> | |
− | + | ||
− | + | ||
− | + | <!-- Begin navigation submenu --> | |
− | + | <div id="navtextwrapper"> <!-- only names of elements --> | |
− | + | <div id="navtext"> | |
− | + | <ul id="project-sub"> | |
− | + | <li><a class="navsub1" href="#">Overview</a></li> | |
+ | <li><a class="navsub1" href="#">Background</a></li> | ||
+ | <li><a class="navsub1" href="#">Diagnostics today</a></li> | ||
+ | <li><a class="navsub1" href="#">Methods</a></li> | ||
+ | </ul> | ||
+ | <ul id="team-sub"> | ||
+ | <li><a class="navsub1" href="#">Members</a></li> | ||
+ | <li><a class="navsub1" href="#">Acknowledgements</a></li> | ||
+ | <li><a class="navsub1" href="#">Partners</a></li> | ||
+ | <li><a class="navsub1" href="#">Collaborations</a></li> | ||
+ | </ul> | ||
+ | <ul id="results-sub"> | ||
+ | <li><a class="navsub1" href="#">The DiaCHIP</a></li> | ||
+ | <li><a class="navsub1" href="#">Modeling</a></li> | ||
+ | <li><a class="navsub1" href="#">Own Device</a></li> | ||
+ | <li><a class="navsub1" href="#">Biobricks</a></li> | ||
+ | <li><a class="navsub1" href="#">Interlab Study</a></li> | ||
+ | </ul> | ||
+ | <ul id="policy-sub"> | ||
+ | <li><a class="navsub1" href="#">Science Fair</a></li> | ||
+ | <li><a class="navsub1" href="#">Theatre Project</a></li> | ||
+ | <li><a class="navsub1" href="#">Survey</a></li> | ||
+ | <li><a class="navsub1" href="#">Liberal </a></li> | ||
+ | </ul> | ||
+ | <ul id="notebook-sub"> | ||
+ | <li><a class="navsub1" href="#">Protocols</a></li> | ||
+ | <li><a class="navsub1" href="#">Labjournal</a> | ||
+ | <!-- <ul> | ||
+ | <li><a class="navsub2" href="#">Cloning</a></li> | ||
+ | <li><a class="navsub2" href="#">Protein Purification</a></li> | ||
+ | <li><a class="navsub2" href="#">Cell-free Expression</a></li> | ||
+ | <li><a class="navsub2" href="#">Surface Chemistry</a></li> | ||
+ | <li><a class="navsub2" href="#">iRIf</a></li> | ||
+ | </ul> --> | ||
</li> | </li> | ||
− | + | <li><a class="navsub1" href="#">Safety</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!-- End of navigation submenu --> | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <!-- End of header --> | |
− | + | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 05:31, 3 September 2015