Team:Wageningen UR/Templates/HeaderFooterStyle

From 2011.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<head>
 +
<style>
 +
#smoothmenu1 ul {
 +
list-style: none;
 +
}
-
<head>
+
#smoothmenu2 ul {
 +
list-style: none;
 +
}
-
 
+
.ddsmoothmenu{
-
<STYLE TYPE="text/css">
+
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;
 +
}
-
#mContainer {
+
/*Top level list items*/
-
position:relative;
+
.ddsmoothmenu ul li{
-
margin:0 auto;
+
position: relative;
-
width: 100%;
+
display: inline;
-
height:27px;
+
float: left;
-
border-top:1px solid #638DA1;
+
-
border-bottom:1px solid #638DA1;
+
-
background-color: #096790;
+
-
padding:0;
+
-
z-index:0;
+
}
}
-
#mContainer li {
+
/*Top level menu link items style*/
-
position:relative;
+
.ddsmoothmenu ul li a{
-
display:inline;
+
display: block;
-
margin: 0 10px 0 12px;
+
background: #244F62; /*background of menu items (default state)*/
-
font:0.8em arial,verdana;
+
padding: 8px 10px;
-
        color: white;
+
color: white;
-
padding:0;
+
border-right: 1px solid #298BB6;
-
z-index:20;
+
color: #2d2b2b;
 +
text-decoration: none;
 +
padding-left: 20px;
}
}
-
#mContainer li a {
+
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
-
text-decoration:none;
+
display: inline-block;
-
        color: white;
+
-
        font-size: 13px;
+
-
        font-weight: bold;
+
}
}
-
#slider {
+
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
-
position:absolute;
+
color: white;
-
background-color: #98B4C1;
+
-
border:1px solid #78919B;
+
-
width:80px;
+
-
height:20px;
+
-
padding:0;
+
-
z-index:1;
+
}
}
 +
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
 +
background: #096790;
 +
color: white;
 +
}
-
</STYLE>
+
.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;
 +
}
-
<script type="text/javascript" src="focusSlide.js"></script>
+
/*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;
 +
}
-
  </head>
+
/* Sub level menu links style */
-
 
+
.ddsmoothmenu ul li ul li a{
-
 
+
font: normal 13px 'Quattrocento', arial, sans;
-
 
+
width: 160px; /*width of sub menus*/
-
  <body>
+
height: 20px;
-
<SCRIPT Language="Javascript1.2">
+
margin: 0;
-
/* This script and many more are available free online at
+
padding-left: 37px;
-
The JavaScript Source!! http://javascript.internet.com */
+
padding-top: 10px;
-
 
+
}
-
/******************************************************
+
-
Focus Slide
+
-
version 1.0
+
-
last revision: 12.17.2004
+
-
steve@slayeroffice.com
+
-
 
+
-
Should you improve upon or
+
-
modify this code, please let me know
+
-
so that I can update the version hosted
+
-
at slayeroffice.
+
-
 
+
-
PLEASE LEAVE THIS NOTICE INTACT!
+
-
 
+
-
******************************************************/
+
-
 
+
-
var d=document; // shortcut reference to the document object
+
-
var activeLI = 0; // the currently "active" list element - value represents its index in the liObj array
+
-
var zInterval = null; // interval variable
+
-
 
+
-
var SLIDE_STEP = 8; // how many pixels to move the sliding div at a time
+
-
var SLIDER_WIDTH = 74; // the width of the sliding div. used to calculate
+
-
                        // its left based on the width and left of the active LI element
+
-
 
+
-
 
+
-
function init() {
+
-
// bail out if this is an older browser or Opera which gets the offsets wrong
+
-
// the opera issue is fixable by subtracting the container UL's width from the
+
-
  // offsetLefts...but I don't care enough to do it
+
-
// this does NOT break opera, it just wont get the sliding thing
+
-
 
+
-
if(!document.getElementById || window.opera)return;
+
-
 
+
-
// create references to the LI's
+
-
mObj = d.getElementById("mContainer");
+
-
liObj = mObj.getElementsByTagName("li");
+
-
 
+
-
// set up the mouse over events
+
-
for(i=0;i<liObj.length;i++) {
+
-
liObj[i].xid = i;
+
-
liObj[i].onmouseover = function() { initSlide(this.xid); }
+
-
}
+
-
 
+
-
// create the slider object
+
-
slideObj = mObj.appendChild(d.createElement("div"));
+
-
slideObj.id = "slider";
+
-
// position the slider over the first LI
+
.ddsmoothmenu ul li ul li a:hover{
-
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
+
background: #096790 url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png') center left no-repeat;
-
y = liObj[activeLI].offsetTop-3;
+
-
slideObj.style.top = y + "px";
+
-
slideObj.style.left = x + "px";
+
}
}
 +
</style>
-
function initSlide(objIndex) {
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
// return if the user is mousing over the currently active LI
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
if(objIndex == activeLI)return;
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
+
-
clearInterval(zInterval);
+
-
// set the active list item to the object index argument
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-
activeLI = objIndex;
+
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.js">
-
// figure out the destination for the sliding div element
+
-
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
+
-
// start the interval
+
-
intervalMethod = function() { doSlide(destinationX); }
+
-
zInterval = setInterval(intervalMethod,10);
+
-
}
+
-
function doSlide(dX) {
+
/***********************************************
-
// get the current left of the sliding div
+
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
-
x = slideObj.offsetLeft;
+
* This notice MUST stay intact for legal use
-
if(x+SLIDE_STEP<dX) {
+
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
-
// div is less than its destination, move it to the right
+
***********************************************/
-
x+=SLIDE_STEP;
+
-
slideObj.style.left = x + "px";
+
-
} else if (x-SLIDE_STEP>dX) {
+
-
// div is more than its destination, move to the left
+
-
x-=SLIDE_STEP;
+
-
slideObj.style.left = x + "px";
+
-
} else  {
+
-
// div is within the boundaries of its destination. put it where its supposed to be
+
-
// and clear the interval
+
-
slideObj.style.left = dX + "px";
+
-
clearInterval(zInterval);
+
-
zInterval = null;
+
-
}
+
-
}
+
-
// Multiple onload function created by: Simon Willison
+
</script>
-
// http://simonwillison.net/2004/May/26/addLoadEvent/
+
-
function addLoadEvent(func) {
+
-
  var oldonload = window.onload;
+
-
  if (typeof window.onload != 'function') {
+
-
    window.onload = func;
+
-
  } else {
+
-
    window.onload = function() {
+
-
      if (oldonload) {
+
-
        oldonload();
+
-
      }
+
-
      func();
+
-
    }
+
-
  }
+
-
}
+
-
addLoadEvent(function() {
+
<script type="text/javascript">
-
  init();
+
-
});
+
 +
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>
+
</script>
-
+
</head>
-
<!-- this list is the actionable markup -->
+
<body>
-
<ul id="mContainer">
+
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/CompleteProject1Description" title="Item One">Project Description</a></li>
+
-
<li><a href="#" title="Item Two">Item Two</a></li>
+
-
<li><a href="#" title="Item Three">Item Three</a></li>
+
<div id="smoothmenu1" class="ddsmoothmenu">
-
<li><a href="#" title="Item Four">Item Four</a></li>
+
<ul>
-
<li><a href="#" title="Item Five">Item Five</a></li>
+
<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>
</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>
+
</body>
-
 
+
</html>
-
  </html>
+

Latest revision as of 22:22, 28 July 2011

Retrieved from "http://2011.igem.org/Team:Wageningen_UR/Templates/HeaderFooterStyle"