Team:Wageningen UR/Templates/test NavigationTop

From 2011.igem.org

(Difference between revisions)
 
Line 1: Line 1:
<html>
<html>
-
 
<head>
<head>
-
</head>
+
<style>
-
<body>
+
    body { 
 +
        background-color:#000; 
 +
        height:2000px; 
 +
        color:#ccc; 
 +
        font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif; 
 +
    } 
 +
    #floatMenu { 
 +
        position:absolute; 
 +
        top:150px; 
 +
        left:50%; 
 +
        margin-left:235px; 
 +
        width:200px; 
 +
    } 
 +
    #floatMenu ul { 
 +
        margin-bottom:20px; 
 +
    } 
 +
    #floatMenu ul li a { 
 +
        display:block; 
 +
        border:1px solid #999; 
 +
        background-color:#222; 
 +
        border-left:6px solid #999; 
 +
        text-decoration:none; 
 +
        color:#ccc; 
 +
        padding:5px 5px 5px 25px; 
 +
    } 
-
<script>
+
#floatMenu ul.menu1 li a:hover { 
-
if (!document.layers)
+
    border-color:#09f; 
-
document.write('<div id="divStayTopLeft" style="position:absolute">')
+
} 
-
</script>
+
#floatMenu ul.menu2 li a:hover { 
 +
    border-color:#9f0; 
 +
} 
 +
#floatMenu ul.menu3 li a:hover { 
 +
    border-color:#f09; 
 +
}
-
<layer id="divStayTopLeft">
+
@charset "UTF-8";
 +
/* CSS Document */
-
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
+
#page-wrap{
-
<table border="1" width="130" cellspacing="0" cellpadding="0">
+
border-right:1px solid #444;
-
  <tr>
+
border-left:1px solid #444;
-
    <td width="100%" bgcolor="#FFFFCC">
+
width:900px;
-
      <p align="center"><b><font size="4">Menu</font></b></td>
+
margin:0 auto;
-
  </tr>
+
background-color:#222;
-
  <tr>
+
color:#ffffff;
-
    <td width="100%" bgcolor="#FFFFFF">
+
font-family:"Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
-
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
+
-
      <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
+
-
      <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
+
-
      <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
+
-
      <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
+
-
  </tr>
+
-
</table>
+
-
<!--END OF EDIT-->
+
-
 
+
-
</layer>
+
-
 
+
-
 
+
-
<script type="text/javascript">
+
-
 
+
-
/*
+
-
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
+
-
Script featured on/available at http://www.dynamicdrive.com/
+
-
This notice must stay intact for use
+
-
*/
+
-
 
+
-
//Enter "frombottom" or "fromtop"
+
-
var verticalpos="frombottom"
+
-
 
+
-
if (!document.layers)
+
-
document.write('</div>')
+
-
 
+
-
function JSFX_FloatTopDiv()
+
-
{
+
-
var startX = 3,
+
-
startY = 150;
+
-
var ns = (navigator.appName.indexOf("Netscape") != -1);
+
-
var d = document;
+
-
function ml(id)
+
-
{
+
-
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
+
-
if(d.layers)el.style=el;
+
-
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
+
-
el.x = startX;
+
-
if (verticalpos=="fromtop")
+
-
el.y = startY;
+
-
else{
+
-
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
+
-
el.y -= startY;
+
-
}
+
-
return el;
+
}
}
-
window.stayTopLeft=function()
+
#page-wrap #header{
-
{
+
background-color:#444;
-
if (verticalpos=="fromtop"){
+
padding-top:20px;
-
var pY = ns ? pageYOffset : document.body.scrollTop;
+
padding-bottom:30px;
-
ftlObj.y += (pY + startY - ftlObj.y)/8;
+
}
}
-
else{
+
#page-wrap #header h1{
-
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
+
margin-left:45px;
-
ftlObj.y += (pY - startY - ftlObj.y)/8;
+
font-size:2.8em;
 +
margin-bottom:10px;
 +
line-height:0.9em;
 +
}
 +
#page-wrap #header h2{
 +
margin-left:45px;
 +
font-size:1.7em;
 +
}
 +
#page-wrap #content{
 +
background:url(images/content_bg.jpg) no-repeat;
 +
padding-top:85px;
}
}
-
ftlObj.sP(ftlObj.x, ftlObj.y);
+
#page-wrap #content h1{
-
setTimeout("stayTopLeft()", 10);
+
margin-left:45px;
-
}
+
font-size:2em;
-
ftlObj = ml("divStayTopLeft");
+
margin-bottom:10px;
-
stayTopLeft();
+
}
-
}
+
#page-wrap #content p{
-
JSFX_FloatTopDiv();
+
margin-left:45px;
-
</script>
+
width:620px;
 +
text-align:justify;
 +
margin-bottom:25px;
 +
line-height:1.5em;
 +
}
 +
#page-wrap #content p.first{
 +
font-size:1.2em;
 +
font-weight:bold;
 +
}
 +
#page-wrap #content p.longer{
 +
width:810px;
 +
}
 +
#page-wrap #footer{
 +
background-color:#444;
 +
}
 +
#page-wrap #footer p{
 +
width:auto;
 +
margin:auto;
 +
text-align:center;
 +
font-size:0.9em;
 +
border:1px solid #000;
 +
padding:15px 0;
 +
}
 +
#page-wrap #footer a:link{
 +
color:#09f;
 +
}
 +
#page-wrap #footer a:visited{
 +
text-decoration:none;
 +
}
 +
#page-wrap #footer a:hover{
 +
color:#0f9;
 +
}
 +
#page-wrap #footer a:active{
 +
color:#f90;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
    <div id="floatMenu"> 
 +
        <ul class="menu1"> 
 +
            <li><a href="#" onclick="return false;"> Home </a></li> 
 +
        </ul> 
 +
     
 +
      <ul class="menu2"> 
 +
            <li><a href="#" onclick="return false;"> Table of content </a></li> 
 +
            <li><a href="#" onclick="return false;"> Exam </a></li> 
 +
            <li><a href="#" onclick="return false;"> Wiki </a></li> 
 +
        </ul> 
 +
     
 +
        <ul class="menu3"> 
 +
            <li><a href="#" onclick="return false;"> Technical support </a></li> 
 +
        </ul> 
 +
    </div>
</body>
</body>
-
 
+
</html>
-
<html>
+

Latest revision as of 19:56, 13 September 2011

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