Team:Wageningen UR/Templates/HeaderFooterStyle

From 2011.igem.org

(Difference between revisions)
 
(13 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;
 +
}
-
#miniflex {
+
/*Top level list items*/
-
  width: 100%;
+
.ddsmoothmenu ul li{
-
  float: left;
+
position: relative;
-
  font-size: small; /* could be specified at a higher level */
+
display: inline;
-
  margin: 0;
+
float: left;
-
  padding: 0 10px 0 10px;
+
-
  border-bottom: 1px solid #696;
+
-
  position:relative;
+
-
  z-index:2;
+
}
}
-
#miniflex li {
+
/*Top level menu link items style*/
-
  float: left;
+
.ddsmoothmenu ul li a{
-
  margin: 0;
+
display: block;
-
  padding: 0;
+
background: #244F62; /*background of menu items (default state)*/
-
  display: inline;
+
padding: 8px 10px;
-
  list-style: none;
+
color: white;
-
  position:relative;
+
border-right: 1px solid #298BB6;
 +
color: #2d2b2b;
 +
text-decoration: none;
 +
padding-left: 20px;
}
}
-
#miniflex a:link, #miniflex a:visited {
+
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
-
  float: left;
+
display: inline-block;
-
  font-size: 85%;
+
-
  line-height: 20px;
+
-
  font-weight: bold;
+
-
  margin: 0 10px 0 10px;
+
-
  text-decoration: none;
+
-
  color: #9c9;
+
}
}
-
#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
+
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
-
  border-bottom: 4px solid #696;
+
color: white;
-
  padding-bottom: 2px;
+
-
  color: #696;
+
}
}
-
 
+
 
-
#animated-tab {
+
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
-
  position: absolute;
+
background: #096790;  
-
  z-index: 1;
+
color: white;
-
  font-size: 85%;
+
-
  line-height: 20px;
+
-
  padding-bottom: 2px;
+
-
  border-bottom: 4px solid #696;
+
}
}
-
</STYLE>
 
-
<script type="text/javascript" src="miniTab.js"></script>
 
 +
.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;
 +
}
-
  </head>
+
/*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;
 +
}
-
  <body>
+
.ddsmoothmenu ul li ul li a:hover{
-
<SCRIPT Language="Javascript1.2">
+
background: #096790 url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png') center left no-repeat;
 +
}
-
var miniTab = {
+
</style>
-
  currentTab:    0,
+
-
  activeTab:      0,
+
-
  destX:          0,
+
-
  destW:          0,
+
-
  t:              0,
+
-
  b:              0,
+
-
  c:              0,
+
-
  d:              20,
+
-
  animInterval:  null,
+
-
  sliderObj:      null,
+
-
  aHeight:        0,
+
-
 
+
-
  init: function() {
+
-
    if(!document.getElementById || !document.getElementById("miniflex")) return;
+
-
   
+
-
    var ul          = document.getElementById("miniflex");
+
-
    var liArr      = ul.getElementsByTagName("li");
+
-
    var aArr        = ul.getElementsByTagName("a");
+
-
   
+
-
    for(var i = 0, li; li = liArr[i]; i++) {
+
-
      liArr[i].onmouseover = aArr[i].onfocus = function(e) {
+
-
        var pos = 0;
+
-
        var elem = this.nodeName == "LI" ? this : this.parentNode;
+
-
        while(elem.previousSibling) {
+
-
          elem = elem.previousSibling;
+
-
          if(elem.tagName && elem.tagName == "LI") pos++;
+
-
        }
+
-
        miniTab.initSlide(pos);
+
-
      }
+
-
    }
+
-
    ul.onmouseout = function(e) {
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
      miniTab.initSlide(miniTab.currentTab);
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
    };
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
   
+
-
    for(var i = 0; i < aArr.length; i++) {
+
-
      if(document.location.href.indexOf(aArr[i].href)>=0) {
+
-
        miniTab.activeTab = miniTab.currentTab = i;
+
-
      }
+
-
      aArr[i].style.borderBottom  = "0px";
+
-
      aArr[i].style.paddingBottom = "6px";
+
-
    }
+
-
    miniTab.slideObj                = ul.parentNode.appendChild(document.createElement("div"));
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-
    miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
+
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.js">
-
    miniTab.slideObj.id            = "animated-tab";
+
-
    miniTab.slideObj.style.top      = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
+
-
    miniTab.slideObj.style.left    = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";
+
-
    miniTab.slideObj.style.width    = aArr[miniTab.activeTab].offsetWidth + "px";
+
-
    miniTab.aHeight                = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;
+
-
   
+
-
    miniTab.initSlide(miniTab.activeTab, true);
+
-
   
+
-
    var intervalMethod = function() { miniTab.slideIt(); }
+
-
    miniTab.animInterval = setInterval(intervalMethod,10);
+
-
  },
+
-
  cleanUp: function() {
+
/***********************************************
-
    clearInterval(miniTab.animInterval);
+
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
-
    miniTab.animInterval = null;
+
* This notice MUST stay intact for legal use
-
  },
+
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
-
 
+
***********************************************/
-
  initSlide: function(pos, force) {
+
-
    if(!force && pos == miniTab.activeTab) return;
+
-
    miniTab.activeTab = pos;
+
-
    miniTab.initAnim();
+
-
  },
+
-
 
+
-
  initAnim: function() {
+
-
    var ul          = document.getElementById("miniflex");
+
-
    var liArr      = ul.getElementsByTagName("li");
+
-
    var aArr        = ul.getElementsByTagName("a");
+
-
    miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);
+
-
    miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);
+
-
    miniTab.t = 0;
+
-
    miniTab.b = miniTab.slideObj.offsetLeft;
+
-
    miniTab.c = miniTab.destX - miniTab.b;
+
-
    miniTab.bW = miniTab.slideObj.offsetWidth;
+
-
    miniTab.cW = miniTab.destW - miniTab.bW;
+
-
    miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
+
-
  },
+
-
 
+
-
  slideIt:function() {
+
-
    var ul          = document.getElementById("miniflex");
+
-
    var liArr      = ul.getElementsByTagName("li");
+
-
    var aArr        = ul.getElementsByTagName("a");
+
-
   
+
-
    // Has the browser text size changed?
+
-
    if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {
+
-
      miniTab.initAnim();
+
-
      miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop
+
-
    };
+
-
   
+
-
    if(miniTab.t++ < miniTab.d) {
+
-
      var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
+
-
      var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
+
-
      miniTab.slideObj.style.left = parseInt(x) + "px";
+
-
      miniTab.slideObj.style.width = parseInt(w) + "px";
+
-
    } else {
+
-
      miniTab.slideObj.style.left = miniTab.destX + "px";
+
-
      miniTab.slideObj.style.width = miniTab.destW +"px";
+
-
    }
+
-
  },
+
-
  animate: function(t,b,c,d) {
+
</script>
-
    if ((t/=d/2) < 1) return c/2*t*t + b;
+
-
    return -c/2 * ((--t)*(t-2) - 1) + b;
+
-
  }
+
-
}
+
-
window.onload = miniTab.init;
+
<script type="text/javascript">
-
window.onunload = miniTab.cleanUp;
+
-
</SCRIPT>
+
ddsmoothmenu.init({
-
  <h2>Animated Mini Tabs</h2>
+
mainmenuid: "smoothmenu1", //menu DIV id
-
<ul id="miniflex">
+
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
-
  <li><a href="/about/" title="">About</a></li>
+
classname: 'ddsmoothmenu', //class added to menu's outer DIV
-
  <li><a href="/archives/" title="">Archives</a></li>
+
//customtheme: ["#1c5a80", "#18374a"],
-
  <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li>
+
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
-
  <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li>
+
})
-
  <li><a href="/contact/" title="">Contact</a></li>
+
-
</ul>
+
-
<p><div align="center">
+
-
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
+
-
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
+
-
</div><p>
+
 +
</script>
 +
</head>
 +
<body>
 +
 +
<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>
+
</body>
 +
</html>

Latest revision as of 22:22, 28 July 2011

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