Team:Wageningen UR/Templates/HeaderFooterStyle
From 2011.igem.org
(Difference between revisions)
m |
|||
(35 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | #smoothmenu1 ul { | ||
+ | list-style: none; | ||
+ | } | ||
- | + | #smoothmenu2 ul { | |
+ | list-style: none; | ||
+ | } | ||
- | + | .ddsmoothmenu{ | |
- | + | font: bold 12px 'Quattrocento', arial, sans; | |
+ | background: #244F62; /*background of menu bar (default state)*/ | ||
+ | margin:0px 5px 0px 5px; | ||
+ | } | ||
- | + | .ddsmoothmenu ul{ | |
+ | z-index:100; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style-type: none; | ||
+ | } | ||
- | + | /*Top level list items*/ | |
+ | .ddsmoothmenu ul li{ | ||
+ | position: relative; | ||
+ | display: inline; | ||
+ | float: left; | ||
+ | } | ||
- | + | /*Top level menu link items style*/ | |
+ | .ddsmoothmenu ul li a{ | ||
+ | display: block; | ||
+ | background: #244F62; /*background of menu items (default state)*/ | ||
+ | padding: 8px 10px; | ||
+ | color: white; | ||
+ | border-right: 1px solid #298BB6; | ||
+ | color: #2d2b2b; | ||
+ | text-decoration: none; | ||
+ | padding-left: 20px; | ||
+ | } | ||
- | + | * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ | |
+ | display: inline-block; | ||
+ | } | ||
- | + | .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ | |
+ | color: white; | ||
+ | } | ||
- | + | .ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ | |
- | + | background: #096790; | |
- | + | color: white; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | .ddsmoothmenu ul li a:hover{ | ||
+ | background: #096790; | ||
+ | } | ||
+ | /*1st sub level menu*/ | ||
+ | .ddsmoothmenu ul li ul{ | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | display: none; /*collapse all sub menus to begin with*/ | ||
+ | visibility: hidden; | ||
+ | } | ||
- | + | /*Sub level menu list items (undo style from Top level List Items)*/ | |
- | + | .ddsmoothmenu ul li ul li{ | |
- | + | display: list-item; | |
- | + | float: none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | /*All subsequent sub menu levels vertical offset after 1st level sub menu */ | ||
+ | .ddsmoothmenu ul li ul li ul{ | ||
+ | top: 0; | ||
+ | } | ||
+ | /* Sub level menu links style */ | ||
+ | .ddsmoothmenu ul li ul li a{ | ||
+ | font: normal 13px 'Quattrocento', arial, sans; | ||
+ | width: 160px; /*width of sub menus*/ | ||
+ | height: 20px; | ||
+ | margin: 0; | ||
+ | padding-left: 37px; | ||
+ | padding-top: 10px; | ||
+ | } | ||
- | + | .ddsmoothmenu ul li ul li a:hover{ | |
+ | background: #096790 url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png') center left no-repeat; | ||
+ | } | ||
+ | </style> | ||
+ | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | ||
+ | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | ||
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
+ | <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.js"> | ||
+ | /*********************************************** | ||
+ | * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) | ||
+ | * This notice MUST stay intact for legal use | ||
+ | * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code | ||
+ | ***********************************************/ | ||
+ | </script> | ||
- | + | <script type="text/javascript"> | |
- | + | ddsmoothmenu.init({ | |
+ | mainmenuid: "smoothmenu1", //menu DIV id | ||
+ | orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" | ||
+ | classname: 'ddsmoothmenu', //class added to menu's outer DIV | ||
+ | //customtheme: ["#1c5a80", "#18374a"], | ||
+ | contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] | ||
+ | }) | ||
- | + | </script> | |
+ | </head> | ||
+ | <body> | ||
- | </div> | + | <div id="smoothmenu1" class="ddsmoothmenu"> |
+ | <ul> | ||
+ | <li><a href="#">Project Description</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/IntroductionProj1">Abstract</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/CompleteProject1Description" style="padding-top: 5px !important; height: 28px;">Complete Project Description</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/Devices" style="padding-right: 20px !important;">Devices</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/ModelingProj1" style="padding-right: 20px !important;">Modeling</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/NotebookProj1">Notebook</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/February" target="_self">February</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/March" target="_self">March</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/April" target="_self">April</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/May" target="_self">May</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/June" target="_self">June</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/July" target="_self">July</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/August" target="_self">August</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Notebook/Proj1/September" target="_self">September</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/PartsProj1" style="padding-right: 20px !important;">Parts submitted to the registry</a></li> | ||
+ | </ul> | ||
+ | <br style="clear: left" /> | ||
+ | </div> | ||
- | |||
- | + | </body> | |
+ | </html> |
Latest revision as of 22:22, 28 July 2011