Team:KULeuven/Tools/Navigation Bar

From 2008.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!-- HERE BEGINS THE ACTUAL NAVIGATION BAR -->
 
<html>
<html>
-
<!-- BEGIN OF CSS -->
 
-
<!-- CSS 1: DIV CONTAINERS, INPUT, TEXTAREA, ... -->
 
<style type="text/css">
<style type="text/css">
-
.general div{
+
#nav, #nav ul {
-
background-color:#EEFFFF;
+
position: relative;
-
border:1px solid #003E81;
+
margin: 0 auto; /* purpose: allow centering ul table */
-
padding:3pt;}
+
-
.example div{
+
-
background-color:#FFFFEE;
+
-
border-left:1px solid #003E81;
+
-
border-right:1px solid #003E81;
+
-
border-bottom:1px solid #003E81;
+
-
padding:3pt;}
+
-
.input#styled{
+
-
width:500px;
+
-
height:18px;
+
-
border:1px solid #003E81;}
+
-
.textarea{
+
-
width:900px;}
+
-
.textarea#styled{
+
-
width:500px;
+
-
border:1px solid #003E81;}
+
-
.button#clip{
+
-
height:22px;
+
-
background-color:#99CCFF;
+
-
border:1px solid #003E81;}
+
-
</style>
+
-
<!-- CSS 2: DROPDOWN MENU -->
+
-
<style type="text/css">
+
-
#sddm
+
-
{ margin: 0;
+
padding: 0;
padding: 0;
-
z-index: 200}
+
display: table /* purpose: ul doesn't stretch width 100% */
 +
}
-
#sddm li
+
#nav li {
-
{ margin: 0;
+
display: table-cell; /* purpose: li behaves like table-cell */
-
padding: 0;
+
position: relative; /* purpose: non-overlap li elements in ul */
-
list-style: none;
+
list-style: none; /* purpose: remove default html list-style */
-
float: left}
+
}
-
#sddm li a
+
#nav li a {
-
{ display: block;
+
display: block; /* purpose: non-overlap div on a */
-
margin: 0 2px 0 0;
+
margin: 0 2px 0 0; /* purpose: spacing main menu items */
padding: 4px 20px;
padding: 4px 20px;
-
width: auto;
+
background-color: #003E81;
-
background: #003E81;
+
color: #FFF;
color: #FFF;
-
font: bold 13px arial;
 
text-align: center;
text-align: center;
-
text-decoration: none}
+
text-decoration: none; /* purpose: remove underline from a */
 +
font: bold 13px arial;
 +
}
-
#sddm li a:hover
+
#nav li a:hover {
-
{ background: #99CCFF}
+
background-color: #99CCFF;
 +
}
-
#sddm div
+
#nav div {
-
{ position: absolute;
+
position: absolute; /* purpose: li of div doesn't spread out */
-
visibility: hidden;
+
display: none;
-
margin: 0;
+
width: 10em;
-
padding: 0;
+
-
background: #EAEBD8;
+
opacity: 0.8;
opacity: 0.8;
filter: alpha(opacity=80);
filter: alpha(opacity=80);
-
border: 1px solid #5970B2}
+
border: 1px solid #5970B2;
 +
background: #EAEBD8;
 +
}
-
#sddm div a
+
#nav span a, #nav div a {
-
{ position: relative;
+
position: relative;
-
display: block;
+
display: block; /* purpose: a's in div have same width */
margin: 0;
margin: 0;
padding: 5px 10px;
padding: 5px 10px;
-
width: auto;
 
-
white-space: nowrap;
 
text-align: left;
text-align: left;
-
text-decoration: none;
+
font: 11px arial;
-
background: #003E81;
+
}
-
color: #FFF;
+
-
font: 11px arial}
+
#nav span a:hover, #nav div a:hover {
 +
background-color: #99CCFF;
 +
color: #000;
 +
}
-
#sddm div a:hover
+
#nav span div {
-
{ background: #99CCFF;
+
position: relative;
-
color: #000}
+
-
 
+
-
#sddm div ul
+
-
{ position: relative;
+
margin: 0;
margin: 0;
-
width: auto;
+
border: none; /* purpose: reset border to none */
-
list-style: none}
+
border-top: 1px solid #5970B2; /* purpose: add a seperator */
 +
border-bottom: 1px solid #5970B2; /* purpose: add a seperator */
 +
opacity: 1.0; /* purpose: opacity already 0.8 by #nav div */
 +
filter: alpha(opacity=100); /* purpose: opacity already 80 by #nav div */
 +
}
 +
 +
#nav span div a {
 +
text-indent: 10px;
 +
}
 +
 +
#nav span div span div a {
 +
text-indent: 20px;
 +
}
-
#sddm ul div
+
#nav .expand {
-
{ position: absolute;
+
background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png');
-
left: 100%;
+
background-repeat: no-repeat;
-
top: 0;
+
background-position: 95% 50%;
-
width: 100%;
+
}
-
padding: 0;
+
 
-
opacity: 1.0;
+
#nav .collapse {
-
filter: alpha(opacity=100)}
+
background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png');
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
</style>
</style>
-
<!-- END OF CSS -->
 
-
<!-- BEGIN OF JAVASCRIPT -->
+
<script type="text/javascript" src="http://avdmeers.web44.net/scripts/jquery.js"></script>
-
<!-- SCRIPT 1: CLIPBOARD -->
+
-
<script type="text/javascript">
+
-
// copy to clipboard
+
-
function clipboard(holdtext)
+
-
{
+
-
copied = holdtext.createTextRange();
+
-
copied.execCommand("Copy");
+
-
return false;
+
-
}
+
-
</script>
+
-
<!-- SCRIPT 2: DROPDOWN -->
+
<script type="text/javascript">
<script type="text/javascript">
-
var timeout    = 0;
+
function ddmsie() {
-
var closetimer = 0;
+
$("#nav ul").css('display', 'inline-block');
-
var ddmenuitem  = 0;
+
$("#nav li").css('display', 'inline');
-
 
+
$("#nav a").css('display', 'inline-block');
-
// open hidden layer
+
$("#nav a").hover(function () {$(this).css('background-color', '#99CCFF')},
-
function mopen(id)
+
function () {$(this).css('background-color', '#003E81')});
-
{
+
$("#nav div a").css('display', 'block');
-
// cancel close timer
+
$("#nav div").css('left', '0');
-
mcancelclosetime();
+
$("#nav div").css('top', '100%');
-
 
+
$("#nav span div").css('top', '0');
-
// ddmenuitem = document.getElementById(id);
+
-
 
+
-
// close old layer if not a container for the new layer
+
-
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
+
-
 
+
-
// get new layer and show it
+
-
ddmenuitem = document.getElementById(id);
+
-
// document.getElementById("test").value = ddmenuitem.parentNode.tagName == "UL";
+
-
ddmenuitem.style.visibility = 'visible';
+
-
 
+
}
}
-
// close showed layer
+
-
function mclose()
+
function ddnav() {
-
{
+
$("#nav li").hover(
-
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
+
function () {
-
}
+
$(this).find("div:first").css('display', 'inline');},
-
 
+
function () {
-
// go close timer
+
$(this).find("div:first").css('display', 'none');}
-
function mclosetime()
+
);
-
{
+
-
closetimer = window.setTimeout(mclose, timeout);
+
$("#nav span > a").toggle(
-
}
+
function () {
-
 
+
$(this).removeClass("#nav expand").addClass("#nav collapse");
-
// cancel close timer
+
$(this).css('background-color', '#99AAFF');
-
function mcancelclosetime()
+
$(this).parent().find("div:first").css('display', 'block');},
-
{
+
function () {
-
if(closetimer)
+
$(this).removeClass("#nav collapse").addClass("#nav expand");
-
{
+
$(this).hover(
-
window.clearTimeout(closetimer);
+
function () {
-
closetimer = null;
+
$(this).css('background-color', '#99CCFF');},
-
}
+
function () {
 +
$(this).css('background-color', '#003E81');}
 +
);
 +
$(this).parent().find("div:first").css('display', 'none');
 +
}
 +
).addClass("#nav expand");
}
}
-
// close layer when click-out
+
$(function () {
-
document.onclick = mclose;  
+
if(jQuery.browser.msie) ddmsie();
-
// -->
+
ddnav();
 +
ddicon();
 +
});
</script>
</script>
-
<!-- END OF JAVASCRIPT -->
 
-
 
-
<!-- BEGIN OF MENU BUILD UP -->
 
-
 
-
<!-- <input type="text" id="test" value="hey"/> -->
 
-
 
-
<!-- FOLLOWING LINE CENTER ALIGNS THE BAR HORIZONTALLY -->
 
-
<div style="margin: 1em auto; width: 90%;">
 
-
<ul id="sddm">
 
-
<!-- HOME SECTION -->
 
-
<li><a href="https://2008.igem.org/Team:KULeuven">Home</a>
 
 +
<div align="center" id="nav">
 +
<ul>
 +
<li>
 +
<a>Home</a>
</li>
</li>
-
<!-- TEAM SECTION -->
+
<li>
-
<li><a onmouseover="mopen('m2')" onmouseout="mclosetime()">The Team</a>
+
<a>The Team</a>
-
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<div>
-
<a href="https://2008.igem.org/Team:KULeuven/Team/LabsandGroups">Research Labs and Groups</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Team/LabsandGroups">Research Labs and Groups</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Team/Students">Students</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Team/Students">Students</a>
-
<!-- <ul><a onmouseover="mopen('m2_test')" onmouseout="mclosetime()">Test</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a>
-
<div id="m2_test" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<a href="https://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a>
-
<a>Test_Item</a>
+
-
</div>
+
-
</ul> -->
+
-
<a href="https://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a>
+
-
<a href="https://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a>
+
</div>
</div>
-
 
</li>
</li>
-
<!-- ROAD MAP SECTION -->
+
<li>
-
<li><a onmouseover="mopen('m3')" onmouseout="mclosetime()">Road Map</a>
+
<a>Road Map</a>
-
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<div>
-
<a href="https://2008.igem.org/Team:KULeuven/Interesting_Reads">Interesting Reads</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Interesting_Reads">Interesting Reads</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Discussion">Discussion</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Discussion">Discussion</a>
-
<a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
+
<a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Concreties">Concrete Ideas</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Concreties">Concrete Ideas</a>
-
                </div>
+
</div>
-
+
</li>
</li>
-
<!-- PROJECT SECTION -->
+
<li>
-
<li><a onmouseover="mopen('m4')" onmouseout="mclosetime()">The Project</a>
+
<a>The Project</a>
-
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<div>
-
                <a href="https://2008.igem.org/Team:KULeuven/Project/Synthetic Biology">Synthetic Biology</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Synthetic Biology">Synthetic Biology</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Project">Summary</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project">Summary</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/Input"> &nbsp; &nbsp; Input</a>
+
<span>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/Output"> &nbsp; &nbsp; Output</a>
+
<a>Components</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/Filter"> &nbsp; &nbsp; Filter</a>
+
<div>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter"> &nbsp; &nbsp; Inverter</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Input">Input</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/Reset"> &nbsp; &nbsp; Reset</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Output">Output</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/CellDeath"> &nbsp; &nbsp; Cell Death</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Filter">Filter</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Project/Memory"> &nbsp; &nbsp; Memory</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">Inverter</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Reset">Reset</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project/CellDeath">Cell Death</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project/Memory">Memory</a>
 +
</div>
 +
</span>
 +
<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
</div>
</div>
-
 
</li>
</li>
-
<!-- PARTS SECTION -->
+
<li>
-
<li><a onmouseover="mopen('m5')" onmouseout="mclosetime()">Parts Submitted to the Registry</a>
+
<a>Parts Submitted to the Registry</a>
-
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<div>
-
<a href="https://2008.igem.org/Team:KULeuven/Parts">Listing</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Parts">Listing</a>
-
<a href="http://partsregistry.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2008&group=KULeuven">Sandbox</a>
+
<a href="http://partsregistry.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2008&group=KULeuven">Sandbox</a>
</div>
</div>
-
 
</li>
</li>
-
<!-- MODEL SECTION -->
+
<li>
-
<li><a onmouseover="mopen('m6')" onmouseout="mclosetime()"
+
<a>Modeling</a>
-
            href="https://2008.igem.org/Team:KULeuven/Modeling">Modeling</a>
+
<div>
-
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
+
<span>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/Output"> &nbsp; &nbsp; Output</a>
+
<a>Components</a>
-
                <a href="https://2008.igem.org/Team:KULeuven/Model/Filter"> &nbsp; &nbsp; Filter</a>
+
<div>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/Inverter"> &nbsp; &nbsp; Inverter</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Model/Input">Input</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/Reset"> &nbsp; &nbsp; Reset</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Model/Output">Output</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/CellDeath"> &nbsp; &nbsp; Cell Death</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/Memory"> &nbsp; &nbsp; Memory</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Model/Inverter">Inverter</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Model/Reset">Reset</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Model/CellDeath">Cell Death</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Memory">Memory</a>
 +
</div>
 +
</span>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
</div>
</div>
-
 
</li>
</li>
-
<!-- NOTEBOOK SECTION -->
+
<li>
-
<li><a onmouseover="mopen('m7')" onmouseout="mclosetime()">Notebook</a>
+
<a>Notebook</a>
-
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
+
<div>
-
<a href="https://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a>
-
                <a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Reports</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Reports</a>
-
                <a href="https://2008.igem.org/Team:KULeuven/Freezer">Freezer</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Freezer">Freezer</a>
-
                <a href="https://2008.igem.org/Team:KULeuven/Primers">Primers</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Primers">Primers</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Tools">Tools</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Tools">Tools</a>
-
                <a href="https://2008.igem.org/Team:KULeuven/Press">Press</a>
+
<a href="https://2008.igem.org/Team:KULeuven/Press">Press</a>
</div>
</div>
-
 
</li>
</li>
</ul>
</ul>
</div>
</div>
-
<br>
 
-
<br>
 
</html>
</html>
[[Image:kulbanner.jpg|960px]]
[[Image:kulbanner.jpg|960px]]

Revision as of 11:59, 30 July 2008

Kulbanner.jpg

Retrieved from "http://2008.igem.org/Team:KULeuven/Tools/Navigation_Bar"