Template:Team:Washington/Templates/Header
From 2011.igem.org
(Difference between revisions)
(Created page with "html> <script type="text/javascript" src="https://static.igem.org/mediawiki/2010/6/6a/Uw_js.txt"></script> <style type="text/css"> body { background-color: #030227; } #uw_leftBar { ...") |
|||
(19 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | html> | + | <html> |
- | + | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | #content {z-index:4;} | |
- | + | #ddwrapper * {z-index:8 !important;} | |
+ | |||
+ | div#ddwrapper { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | height:28px; | ||
+ | width:945px; /* change to adjust imperfections in width */ | ||
} | } | ||
- | # | + | div#ddnav { |
- | + | margin:0 auto; /* needed to center the dropdown */ | |
- | + | padding:0; | |
- | + | top:5px; | |
- | + | /* width: 965px */ | |
+ | visibility:hidden; /* dropdown is hidden until properly initalised by javascript */ | ||
} | } | ||
- | # | + | div#ddtoggle { |
- | + | margin:0; | |
+ | position:fixed; | ||
+ | right:2px; | ||
+ | top:15px; | ||
+ | height:10px; | ||
+ | width:10px; | ||
+ | z-index:100; | ||
} | } | ||
- | # | + | |
- | + | #ddnav ul { | |
- | + | display:table-row; /* works only for firefox, later adjusted by javascript for IE */ | |
- | + | margin:0 auto; | |
- | + | padding:0; | |
- | + | ||
} | } | ||
- | # | + | #ddnav ul li { |
- | + | display:table-cell; /* works only for firefox, later adjusted by javascript for IE */ | |
- | + | list-style:none; | |
+ | margin:0; | ||
+ | padding:0 !important; | ||
+ | border-right:1px solid #FFF; /* creates illusion of spacing between tabs */ | ||
} | } | ||
- | # | + | #ddnav ul li:last-child{border-right:none;} |
- | + | #ddnav a{ | |
- | + | display:block; | |
- | + | margin:0; | |
- | + | padding:4px 14px; /* play with dimensions for size of tabs */ | |
+ | background-color:#075A90; /* background color for tabs */ | ||
+ | color:#FFF !important; /* font color for text in tabs */ | ||
+ | text-align:center; /* aligning for text in tabs */ | ||
+ | text-decoration:none !important; | ||
+ | font:bold 10pt Trebuchet MS; /* font properties for text in tabs */ | ||
+ | outline:0; | ||
} | } | ||
- | # | + | #ddnav ul li a:hover {background-color:#99CCFF;}/* background color for tabs on mouseover */ |
- | + | #ddnav li a:active {outline:none;} /* remove standard dotted border for links when clicked (IE) */ | |
- | + | #ddnav li a:focus {-moz-outline-style:none;} /* remove standard dotted border for links when clicked (FF) */ | |
+ | #ddnav div { | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | width:9em; | ||
+ | background-color:#000; /* bug solution, do not change ! */ | ||
+ | border:1px solid #5970B2; /* border color for dropdown menus */ | ||
+ | opacity:0.9; /* transparancy of the dropdown menus (FF) */ | ||
+ | filter:alpha(opacity=90); /* transparancy of the dropdown menus (IE) */ | ||
} | } | ||
- | # | + | #ddnav div a { |
- | + | display:block; | |
+ | padding:5px 10px; /* play with dimensions of block element in dropdown menus */ | ||
+ | position:relative; | ||
+ | font:normal 8pt arial; /* font properties for text in dropdown menus */ | ||
+ | text-align:left; /* aligning of text in dropdown menus */ | ||
+ | cursor:pointer; | ||
} | } | ||
- | # | + | #ddnav div a:hover, #ddnav span a:hover {color:#000 !important;} /* text color on mouseover */ |
- | + | #ddnav span div { | |
- | + | position:relative; | |
- | + | border:none; | |
- | } | + | border-bottom:2px groove #5970B2; /* separator for submenus, groove does not work in FF */ |
- | # | + | opacity:1.0; /* avoid stacking transparancy for submenus (FF) */ |
- | + | filter:alpha(opacity=100); /* avoid stacking transparancy for submenus (IE) */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
+ | /* may want to upload the following pictures to a new location */ | ||
+ | .expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;} | ||
+ | .collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;} | ||
+ | |||
+ | .docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;} | ||
+ | .undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;} | ||
</style> | </style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com --> | ||
+ | <script type="text/javascript" src="http://student.kuleuven.be/~s0173901/wiki/js/jquery.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | function ddnav() { | ||
+ | $('#ddnav ul li').hover( | ||
+ | function () { | ||
+ | $(this).find('div:first').css('display','block');}, | ||
+ | function () { | ||
+ | $(this).find('div:first').css('display','none');} | ||
+ | ); | ||
+ | } | ||
+ | |||
+ | function ddnavsub() { | ||
+ | $('#ddnav span > a').toggle( | ||
+ | function () { | ||
+ | $(this).removeClass("#ddnav expand").addClass("#ddnav collapse"); | ||
+ | $(this).parent().find('div:first').slideDown('fast'); | ||
+ | $(this).hover( | ||
+ | function (){$(this).css('background-color','#99AAFF');}, | ||
+ | function (){$(this).css('background-color','#99AAFF');});}, | ||
+ | function () { | ||
+ | $(this).removeClass("#ddnav collapse").addClass("#ddnav expand"); | ||
+ | $(this).parent().find('div:first').css('display','none'); | ||
+ | $(this).hover( | ||
+ | function (){$(this).css('background-color','#99CCFF');}, | ||
+ | function (){$(this).css('background-color','#075A90');});} | ||
+ | ).addClass("#ddnav expand"); | ||
+ | } | ||
+ | |||
+ | /* If you wish to omit the docking feature, remove following function ddtoggle() */ | ||
+ | function ddtoggle() { | ||
+ | $('#ddtoggle').toggle( | ||
+ | function () { | ||
+ | $(this).removeClass('undocked').addClass('docked'); | ||
+ | $('#ddnav').css('position','fixed');}, | ||
+ | function () { | ||
+ | $(this).removeClass('docked').addClass('undocked'); | ||
+ | $('#ddnav').css('position','static');} | ||
+ | ); | ||
+ | } | ||
+ | |||
+ | function ddalign() { | ||
+ | var _windowWidth = $(window).width(); | ||
+ | var _leftOffset = (_windowWidth - 965)/2; | ||
+ | |||
+ | $('div#ddnav').css('left',_leftOffset); | ||
+ | } | ||
+ | |||
+ | function ddmsie() { | ||
+ | $('#ddnav a').hover( | ||
+ | function () {$(this).css('background-color','#99ccff');}, | ||
+ | function () {$(this).css('background-color','#075a90');} | ||
+ | ); | ||
+ | |||
+ | /* toggle doesn't work yet */ | ||
+ | $('#ddtoggle').css('display','none'); | ||
+ | |||
+ | $('#ddnav ul').css('display','inline-block'); | ||
+ | $('#ddnav ul li').css('display','inline'); | ||
+ | $('#ddnav ul li').css('position','relative'); | ||
+ | $('#ddnav ul li>a').css('display','inline-block'); | ||
+ | $('#ddnav ul li>a').css('margin-right','-4px'); | ||
+ | |||
+ | $('#ddnav div').css('left','0'); | ||
+ | $('#ddnav div').css('top','100%'); | ||
+ | $('#ddnav span div').css('top','0'); | ||
+ | } | ||
+ | |||
+ | function ddmozilla() { | ||
+ | ddtoggle(); | ||
+ | $(window).bind('resize', function() {ddalign();}); | ||
+ | } | ||
+ | |||
+ | $(function () { | ||
+ | ddnav(); | ||
+ | ddnavsub(); | ||
+ | |||
+ | if(jQuery.browser.msie) ddmsie(); | ||
+ | if(jQuery.browser.mozilla) ddmozilla(); | ||
+ | |||
+ | $('#ddnav').css('visibility','visible'); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <!-- If you wish to omit the docking feature omit following line (div with id ddtoggle) --> | ||
+ | <div id="ddtoggle" class="undocked"></div> | ||
+ | <div id="ddwrapper"> | ||
+ | <!-- Here the actual links are defined, simply replace with your own links in the appropriate sections --> | ||
+ | <div id="ddnav" align="center"> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington">Home</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Team/Members">About Us</a> | ||
+ | <div> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Team/Members">The team</a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Team/Sponsors"> Sponsors </a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Alkanes/Background">Diesel Production</a> | ||
+ | <div> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Alkanes/Background">Background</a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Alkanes/Methods"> Methods </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Alkanes/Results"> Results </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Alkanes/Future"> Future Directions </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Alkanes/Parts"> Parts Submitted </a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Celiacs/Background">Gluten Destruction</a> | ||
+ | <div> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Celiacs/Background">Background</a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Celiacs/Methods"> Methods </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Celiacs/Results"> Results </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Celiacs/Future"> Future Directions </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Celiacs/Parts"> Parts Submitted </a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Magnetosomes/Background">More Projects</a> | ||
+ | <div> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Magnetosomes/Background">Magnetosomes & Gibson Vectors Background</a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Magnetosomes/Methods"> Methods </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Magnetosomes/Results"> Results </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Magnetosomes/Future"> Future Directions </a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Magnetosomes/Parts"> Parts Submitted </a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Parts">Parts</a> | ||
+ | <div> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Parts">Our Parts</a> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Primers">Our Primers</a> | ||
+ | <a href="http://partsregistry.org/Main_Page"> Parts Registry </a> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Protocols">Protocols</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Outreach">Community Outreach</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Washington/Safety">Safety</a> | ||
+ | </li> | ||
+ | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
- | + | </html> | |
- | + | ||
- | + | ||
- | </ | + |
Latest revision as of 22:33, 9 September 2011