Team:KULeuven/Tools/Navigation Bar

From 2008.igem.org

(Difference between revisions)
m
 
(38 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{:Team:KULeuven/Tools/Styling}}
-
<!-- Favicon of Dr. Coli -->
+
-
<link rel="shortcut icon" href="http://student.kuleuven.be/~s0160104/iGEM/favicon.ico" type="image/x-icon">
+
-
<!-- KULeuven Dropdown menu, developed by KULeuven, useful links:
+
'''Result:'''
-
Javascript-array: http://javascript-array.com/scripts/simple_drop_down_menu/
+
 
-
JQuery: http://jquery.com/
+
<html>
-
Tyssendesign: http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu/
+
-
-->
+
<style type="text/css">
<style type="text/css">
-
#nav, #nav ul {
+
#content pre {white-space: pre;}
-
position: relative;
+
-
margin: 0 auto; /* purpose: allow centering ul table */
+
-
padding: 0;
+
-
display: table; /* purpose: ul doesn't stretch width 100% */
+
-
visibility: hidden; /* purpose: hide until intialised by js */
+
-
z-index: 200;
+
-
}
+
-
#nav li {
+
#content {z-index:4;}
-
display: table-cell; /* purpose: li behaves like table-cell */
+
#ddwrapper * {z-index:8 !important;}
-
position: relative; /* purpose: non-overlap li elements in ul */
+
-
list-style: none; /* purpose: remove default html list-style */
+
-
}
+
-
#nav li a {
+
div#ddwrapper {
-
display: block; /* purpose: non-overlap div on a */
+
margin:0;
-
margin: 0 1px 0 0; /* purpose: spacing main menu items */
+
padding:0;
-
padding: 4px 20px;
+
height:28px;
-
background-color: #075a90;
+
width:945px;
-
color: #FFF;
+
-
text-align: center;
+
-
text-decoration: none; /* purpose: remove underline from a */
+
-
font: bold 13px arial;
+
}
}
-
 
+
div#ddnav {
-
#nav li a:hover {
+
margin:0 auto;
-
background-color: #99CCFF;
+
padding:0;
 +
top:5px;
 +
/* width: 965px */
 +
visibility:hidden;
 +
}
 +
div#ddtoggle {
 +
margin:0;
 +
position:fixed;
 +
right:2px;
 +
top:15px;
 +
height:10px;
 +
width:10px;
 +
z-index:100;
}
}
-
#nav div {
+
#ddnav ul {
-
position: absolute; /* purpose: li of div doesn't spread out */
+
display:table-row;
-
display: none;
+
margin:0 auto;
-
width: 10em;
+
padding:0;
-
opacity: 0.8;
+
}
-
filter: alpha(opacity=80);
+
#ddnav ul li {
-
border: 1px solid #5970B2;
+
display:table-cell;
-
background: #EAEBD8;
+
list-style:none;
 +
margin:0;
 +
padding:0 !important;
 +
border-right:1px solid #FFF;
 +
}
 +
#ddnav ul li:last-child{border-right:none;}
 +
#ddnav a{
 +
display:block;
 +
margin:0;
 +
padding:4px 14px;
 +
background-color:#075A90;
 +
color:#FFF !important;
 +
text-align:center;
 +
text-decoration:none !important;
 +
font:bold 10pt Trebuchet MS;
 +
outline:0;
 +
}
 +
#ddnav ul li a:hover {background-color:#99CCFF;}
 +
#ddnav li a:active {outline:none;}
 +
#ddnav li a:focus {-moz-outline-style:none;}
 +
#ddnav div {
 +
display:none;
 +
position:absolute;
 +
width:9em;
 +
background-color:#000;
 +
border:1px solid #5970B2;
 +
opacity:0.9;
 +
filter:alpha(opacity=90);
 +
}
 +
#ddnav div a {
 +
display:block;
 +
padding:5px 10px;
 +
position:relative;
 +
font:normal 8pt arial;
 +
text-align:left;
 +
cursor:pointer;
 +
}
 +
#ddnav div a:hover, #ddnav span a:hover {color:#000 !important;}
 +
#ddnav span div {
 +
position:relative;
 +
border:none;
 +
border-bottom:2px groove #5970B2;
 +
opacity:1.0;
 +
filter:alpha(opacity=100);
}
}
-
#nav span a, #nav div a {
+
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
-
position: relative;
+
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}
-
display: block; /* purpose: a's in div have same width */
+
 
-
margin: 0;
+
.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
-
padding: 5px 10px;
+
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
-
text-align: left;
+
</style>
-
font: 11px arial;
+
 
-
cursor: pointer;
+
<script type="text/javascript" src="http://www.kuleuven.be/bioscenter/igem/js/jquery.js"></script>
 +
<script type="text/javascript">
 +
function ddnav() {
 +
$('#ddnav ul li').hover(
 +
function () {
 +
$(this).find('div:first').css('display','block');},
 +
function () {
 +
$(this).find('div:first').css('display','none');}
 +
);
}
}
-
+
-
#nav span a:hover, #nav div a:hover {
+
function ddnavsub() {
-
background-color: #99CCFF;
+
$('#ddnav span > a').toggle(
-
color: #000;
+
function () {
 +
$(this).removeClass("#ddnav expand").addClass("#ddnav collapse");
 +
$(this).parent().find('div:first').slideDown('fast');
 +
$(this).hover(
 +
function (){$(this).css('background-color','#99AAFF');},
 +
function (){$(this).css('background-color','#99AAFF');});},
 +
function () {
 +
$(this).removeClass("#ddnav collapse").addClass("#ddnav expand");
 +
$(this).parent().find('div:first').css('display','none');
 +
$(this).hover(
 +
function (){$(this).css('background-color','#99CCFF');},
 +
function (){$(this).css('background-color','#075A90');});}
 +
).addClass("#ddnav expand");
}
}
-
 
+
-
#nav div a:active {
+
function ddtoggle() {
-
outline: none;
+
$('#ddtoggle').toggle(
 +
function () {
 +
$(this).removeClass('undocked').addClass('docked');
 +
$('#ddnav').css('position','fixed');},
 +
function () {
 +
$(this).removeClass('docked').addClass('undocked');
 +
$('#ddnav').css('position','static');}
 +
);
}
}
-
#nav span div {
+
function ddalign() {
-
position: relative;
+
var _windowWidth = $(window).width();
-
margin: 0;
+
var _leftOffset = (_windowWidth - 965)/2;
-
border: none; /* purpose: reset border to none */
+
 
-
border-top: 2px groove #5970B2; /* purpose: add a seperator */
+
$('div#ddnav').css('left',_leftOffset);
-
border-bottom: 2px groove #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 {
+
function ddmsie() {
-
text-indent: 10px;
+
$('#ddnav a').hover(
-
}
+
function () {$(this).css('background-color','#99ccff');},
-
+
function () {$(this).css('background-color','#075a90');}
-
#nav span div span div a {
+
);
-
text-indent: 20px;
+
-
}
+
/* toggle doesn't work yet */
 +
$('#ddtoggle').css('display','none');
 +
 +
$('#ddnav ul').css('display','inline-block');
 +
$('#ddnav ul li').css('display','inline');
 +
$('#ddnav ul li').css('position','relative');
 +
$('#ddnav ul li>a').css('display','inline-block');
 +
$('#ddnav ul li>a').css('margin-right','-4px');
 +
 +
$('#ddnav div').css('left','0');
 +
$('#ddnav div').css('top','100%');
 +
$('#ddnav span div').css('top','0');
 +
}
 +
 +
function ddmozilla() {
 +
ddtoggle();
 +
$(window).bind('resize', function() {ddalign();});
 +
}
 +
 
 +
$(function () {
 +
ddnav();
 +
ddnavsub();
 +
 
 +
if(jQuery.browser.msie) ddmsie();
 +
if(jQuery.browser.mozilla) ddmozilla();
 +
 
 +
$('#ddnav').css('visibility','visible');
 +
});
 +
</script>
 +
 
 +
<div id="ddtoggle" class="undocked"></div>
 +
<div id="ddwrapper">
 +
<div id="ddnav" align="center">
 +
<ul>
 +
<li>
 +
<a href="https://2008.igem.org/Team:KULeuven">Home</a>
 +
</li>
 +
<li>
 +
<a>The Team</a>
 +
<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/Students">Students</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a>
 +
                        <a href="https://2008.igem.org/Team:KULeuven/Team/Pictures">Pictures</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a>The Project</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project">Summary</a>
 +
<span>
 +
<a>Components</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project/Input">Input</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project/Output">Output</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project/Filter">Filter</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">Invertimer</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/Evaluation">End Evaluation</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
 +
                        <a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
 +
</div>
 +
</li>
 +
        <li>
 +
<a>Ethics</a>
 +
<div>
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a>Submitted Parts</a>
 +
<div>
 +
<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>
 +
</div>
 +
</li>
 +
<li>
 +
<a>Modeling</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
 +
<span>
 +
<a>Components</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Output">Output</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Inverter">Invertimer</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Reset">Reset</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/Sensitivity">Sensitivity Analysis</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a>Data Analysis</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Overview">Overview</a>
 +
<span>
 +
<a>New Parts</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/GFP">GFP (LVA-tag)</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/T7">T7 (UmuD-tag)</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Antisense">Antisense LuxI</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/ccdB">Celldeath (ccdB)</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/HybridProm">Hybrid Promotor</a>
 +
</div>
 +
</span>
 +
                        <span>
 +
<a>Components</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Input">Input</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Output">Output</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Filter">Filter</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Inverter">Invertimer</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Reset">Reset</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/CellDeath">Cell Death</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/Memory">Memory</a>
 +
</div>
 +
</span>
 +
<a href="https://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a>
 +
</div>
 +
</li>
 +
        <li>
 +
<a>Software</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a>Notebook</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a>
 +
                        <a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
 +
<span>
 +
<a>Reports</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a>
 +
</div>
 +
</span>
 +
<span>
 +
<a>Lab Data</a>
 +
<div>
 +
<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/Ligation">Ligation</a>
 +
</div>
 +
</span>
 +
<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/Guestbook">Guestbook</a>
 +
                       
 +
</div>
 +
</li>
 +
       
 +
</ul>
 +
</div>
 +
</div>
 +
</html>
 +
 
 +
To have a dropdown for your own team copy over all of the content below. It might be needed to adjust a thing or two. Comments have been added throughout the code what must be changed.
 +
 
 +
Inspirational websites:
 +
 
 +
*[http://javascript-array.com/scripts/simple_drop_down_menu/ Most basic dropdown menu, with no submenu's]
 +
*[http://jquery.com/ The javascript library used to add effects and optimise the dropdown]
 +
*[http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu/ How to center a ul list effectively]
 +
 
 +
The dropdown has been '''created''' and '''developed''' by the KULeuven team.
 +
 
 +
<pre>
 +
<html>
 +
 
 +
<style type="text/css">
 +
#content {z-index:4;}
 +
#ddwrapper * {z-index:8 !important;}
-
#nav .expand {
+
div#ddwrapper {
-
background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png');
+
margin:0;
-
background-repeat: no-repeat;
+
padding:0;
-
background-position: 95% 50%;
+
height:28px;
 +
width:945px; /* change to adjust imperfections in width */
 +
}
 +
div#ddnav {
 +
margin:0 auto; /* needed to center the dropdown */
 +
padding:0;
 +
top:5px;
 +
/* width: 965px */
 +
visibility:hidden; /* dropdown is hidden until properly initalised by javascript */
 +
}
 +
div#ddtoggle {
 +
margin:0;
 +
position:fixed;
 +
right:2px;
 +
top:15px;
 +
height:10px;
 +
width:10px;
 +
z-index:100;
}
}
-
#nav .collapse {
+
#ddnav ul {
-
background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png');
+
display:table-row; /* works only for firefox, later adjusted by javascript for IE */
-
background-repeat: no-repeat;
+
margin:0 auto;
-
background-position: 95% 50%;
+
padding:0;
}
}
 +
#ddnav ul li {
 +
display:table-cell; /* works only for firefox, later adjusted by javascript for IE */
 +
list-style:none;
 +
margin:0;
 +
padding:0 !important;
 +
border-right:1px solid #FFF; /* creates illusion of spacing between tabs */
 +
}
 +
#ddnav ul li:last-child{border-right:none;}
 +
#ddnav a{
 +
display:block;
 +
margin:0;
 +
padding:4px 14px; /* play with dimensions for size of tabs */
 +
background-color:#075A90; /* background color for tabs */
 +
color:#FFF !important; /* font color for text in tabs */
 +
text-align:center; /* aligning for text in tabs */
 +
text-decoration:none !important;
 +
font:bold 10pt Trebuchet MS; /* font properties for text in tabs */
 +
outline:0;
 +
}
 +
#ddnav ul li a:hover {background-color:#99CCFF;}/* background color for tabs on mouseover */
 +
#ddnav li a:active {outline:none;} /* remove standard dotted border for links when clicked (IE) */
 +
#ddnav li a:focus {-moz-outline-style:none;} /* remove standard dotted border for links when clicked (FF) */
 +
#ddnav div {
 +
display:none;
 +
position:absolute;
 +
width:9em;
 +
background-color:#000; /* bug solution, do not change ! */
 +
border:1px solid #5970B2; /* border color for dropdown menus */
 +
opacity:0.9; /* transparancy of the dropdown menus (FF) */
 +
filter:alpha(opacity=90); /* transparancy of the dropdown menus (IE) */
 +
}
 +
#ddnav div a {
 +
display:block;
 +
padding:5px 10px; /* play with dimensions of block element in dropdown menus */
 +
position:relative;
 +
font:normal 8pt arial; /* font properties for text in dropdown menus */
 +
text-align:left; /* aligning of text in dropdown menus */
 +
cursor:pointer;
 +
}
 +
#ddnav div a:hover, #ddnav span a:hover {color:#000 !important;} /* text color on mouseover */
 +
#ddnav span div {
 +
position:relative;
 +
border:none;
 +
border-bottom:2px groove #5970B2; /* separator for submenus, groove does not work in FF */
 +
opacity:1.0; /* avoid stacking transparancy for submenus (FF) */
 +
filter:alpha(opacity=100); /* avoid stacking transparancy for submenus (IE) */
 +
}
 +
 +
/* may want to upload the following pictures to a new location */
 +
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
 +
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}
 +
 +
.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
 +
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
</style>
</style>
-
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/scripts/jquery.js"></script>
+
<!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com -->
 +
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/wiki/js/jquery.js"></script>
<script type="text/javascript">
<script type="text/javascript">
 +
function ddnav() {
 +
$('#ddnav ul li').hover(
 +
function () {
 +
$(this).find('div:first').css('display','block');},
 +
function () {
 +
$(this).find('div:first').css('display','none');}
 +
);
 +
}
 +
 +
function ddnavsub() {
 +
$('#ddnav span > a').toggle(
 +
function () {
 +
$(this).removeClass("#ddnav expand").addClass("#ddnav collapse");
 +
$(this).parent().find('div:first').slideDown('fast');
 +
$(this).hover(
 +
function (){$(this).css('background-color','#99AAFF');},
 +
function (){$(this).css('background-color','#99AAFF');});},
 +
function () {
 +
$(this).removeClass("#ddnav collapse").addClass("#ddnav expand");
 +
$(this).parent().find('div:first').css('display','none');
 +
$(this).hover(
 +
function (){$(this).css('background-color','#99CCFF');},
 +
function (){$(this).css('background-color','#075A90');});}
 +
).addClass("#ddnav expand");
 +
}
 +
 +
/* If you wish to omit the docking feature, remove following function ddtoggle() */
 +
function ddtoggle() {
 +
$('#ddtoggle').toggle(
 +
function () {
 +
$(this).removeClass('undocked').addClass('docked');
 +
$('#ddnav').css('position','fixed');},
 +
function () {
 +
$(this).removeClass('docked').addClass('undocked');
 +
$('#ddnav').css('position','static');}
 +
);
 +
}
-
function ddmsie() {
+
function ddalign() {
-
$("#nav ul").css('display', 'inline-block');
+
var _windowWidth = $(window).width();
-
$("#nav li").css('display', 'inline');
+
var _leftOffset = (_windowWidth - 965)/2;
-
$("#nav a").css('display', 'inline-block');
+
-
$("#nav ul li>a:first-child").css('margin-right', '-3px');
+
-
$("#nav a").hover(function () {$(this).css('background-color', '#99CCFF')},
+
-
function () {$(this).css('background-color', '#003E81')});
+
-
$("#nav div a").css('display', 'block');
+
-
$("#nav div").css('left', '0');
+
-
$("#nav div").css('top', '100%');
+
-
$("#nav span div").css('top', '0');
+
-
}
+
-
function ddmozilla() {
+
$('div#ddnav').css('left',_leftOffset);
-
$("#nav ul").css('display', 'table-row');
+
}
-
}
+
-
+
function ddmsie() {
-
function ddnav() {
+
$('#ddnav a').hover(
-
$("#nav li").hover(
+
function () {$(this).css('background-color','#99ccff');},
-
function () {
+
function () {$(this).css('background-color','#075a90');}
-
$(this).find("div:first").css('display', 'inline');},
+
);
-
function () {
+
-
$(this).find("div:first").css('display', 'none');}
+
/* toggle doesn't work yet */
-
);
+
$('#ddtoggle').css('display','none');
-
+
-
$("#nav span > a").toggle(
+
$('#ddnav ul').css('display','inline-block');
-
function () {
+
$('#ddnav ul li').css('display','inline');
-
$(this).removeClass("#nav expand").addClass("#nav collapse");
+
$('#ddnav ul li').css('position','relative');
-
$(this).css('background-color', '#99AAFF');
+
$('#ddnav ul li>a').css('display','inline-block');
-
$(this).parent().find("div:first").css('display', 'block');},
+
$('#ddnav ul li>a').css('margin-right','-4px');
-
function () {
+
-
$(this).removeClass("#nav collapse").addClass("#nav expand");
+
$('#ddnav div').css('left','0');
-
$(this).hover(
+
$('#ddnav div').css('top','100%');
-
function () {
+
$('#ddnav span div').css('top','0');
-
$(this).css('background-color', '#99CCFF');},
+
}
-
function () {
+
-
$(this).css('background-color', '#003E81');}
+
function ddmozilla() {
-
);
+
ddtoggle();
-
$(this).parent().find("div:first").css('display', 'none');
+
$(window).bind('resize', function() {ddalign();});
-
}
+
}
-
).addClass("#nav expand");
+
 
-
}
+
$(function () {
 +
ddnav();
 +
ddnavsub();
 +
 
 +
if(jQuery.browser.msie) ddmsie();
 +
if(jQuery.browser.mozilla) ddmozilla();
-
$(function () {
+
$('#ddnav').css('visibility','visible');
-
if(jQuery.browser.msie) ddmsie();
+
});
-
if(jQuery.browser.mozilla) ddmozilla();
+
-
ddnav();
+
-
$("#nav, #nav ul").css('visibility', 'visible');
+
-
});
+
</script>
</script>
-
<div align="center" id="nav">
+
<!-- If you wish to omit the docking feature omit following line (div with id ddtoggle) -->
 +
<div id="ddtoggle" class="undocked"></div>
 +
<div id="ddwrapper">
 +
<!-- Here the actual links are defined, simply replace with your own links in the appropriate sections -->
 +
<div id="ddnav" align="center">
<ul>
<ul>
<li>
<li>
Line 185: Line 537:
</div>
</div>
</span>
</span>
 +
                        <a href="https://2008.igem.org/Team:KULeuven/Evaluation">End Evaluation</a>
<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
                         <a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
                         <a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
 +
</div>
 +
</li>
 +
        <li>
 +
<a>Ethics</a>
 +
<div>
 +
</div>
</div>
</li>
</li>
Line 200: Line 559:
<div>
<div>
<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
<span>
<span>
<a>Components</a>
<a>Components</a>
Line 212: Line 572:
</span>
</span>
<a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a>
 +
                        <a href="https://2008.igem.org/Team:KULeuven/Model/Sensitivity">Sensitivity Analysis</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
 
<a href="https://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a>
<a href="https://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a>
</div>
</div>
Line 244: Line 604:
</span>
</span>
<a href="https://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a>
<a href="https://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a>
 +
</div>
 +
</li>
 +
        <li>
 +
<a>Software</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a>
</div>
</div>
</li>
</li>
Line 251: Line 618:
<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/SummerHolidays">Summer Holidays</a>
                         <a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
-
<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Reports</a>
+
<span>
 +
<a>Reports</a>
 +
<div>
 +
<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a>
 +
<a href="https://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a>
 +
</div>
 +
</span>
<span>
<span>
<a>Lab Data</a>
<a>Lab Data</a>
Line 262: Line 635:
<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>
 +
<a href="https://2008.igem.org/Team:KULeuven/Guestbook">Guestbook</a>
                          
                          
</div>
</div>
Line 267: Line 641:
          
          
</ul>
</ul>
 +
</div>
</div>
</div>
</html>
</html>
 +
</pre>

Latest revision as of 23:22, 28 October 2008

Result:

To have a dropdown for your own team copy over all of the content below. It might be needed to adjust a thing or two. Comments have been added throughout the code what must be changed.

Inspirational websites:

  • [http://javascript-array.com/scripts/simple_drop_down_menu/ Most basic dropdown menu, with no submenu's]
  • [http://jquery.com/ The javascript library used to add effects and optimise the dropdown]
  • [http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu/ How to center a ul list effectively]

The dropdown has been created and developed by the KULeuven team. 

<html>

<style type="text/css">
#content {z-index:4;}
#ddwrapper * {z-index:8 !important;}

div#ddwrapper {
	margin:0;
	padding:0;
	height:28px;
	width:945px;				/* change to adjust imperfections in width */
}
div#ddnav {
	margin:0 auto;				/* needed to center the dropdown */
	padding:0;
	top:5px;
	/* width: 965px */
	visibility:hidden;			/* dropdown is hidden until properly initalised by javascript */
}
div#ddtoggle {
	margin:0;
	position:fixed;
	right:2px;
	top:15px;
	height:10px;
	width:10px;
	z-index:100;
}

#ddnav ul {
	display:table-row;			/* works only for firefox, later adjusted by javascript for IE */
	margin:0 auto;
	padding:0;
}
#ddnav ul li {
	display:table-cell;			/* works only for firefox, later adjusted by javascript for IE */
	list-style:none;
	margin:0;
	padding:0 !important;
	border-right:1px solid #FFF;		/* creates illusion of spacing between tabs */
}
#ddnav ul li:last-child{border-right:none;}
#ddnav a{
	display:block;
	margin:0;
	padding:4px 14px;			/* play with dimensions for size of tabs */
	background-color:#075A90;		/* background color for tabs */
	color:#FFF !important;			/* font color for text in tabs */
	text-align:center;			/* aligning for text in tabs */
	text-decoration:none !important;
	font:bold 10pt Trebuchet MS;		/* font properties for text in tabs */
	outline:0;
}
#ddnav ul li a:hover {background-color:#99CCFF;}/* background color for tabs on mouseover */
#ddnav li a:active {outline:none;}		/* remove standard dotted border for links when clicked (IE) */
#ddnav li a:focus {-moz-outline-style:none;}	/* remove standard dotted border for links when clicked (FF) */
#ddnav div {
	display:none;
	position:absolute;
	width:9em;
	background-color:#000;			/* bug solution, do not change ! */
	border:1px solid #5970B2;		/* border color for dropdown menus */
	opacity:0.9;				/* transparancy of the dropdown menus (FF) */
	filter:alpha(opacity=90);		/* transparancy of the dropdown menus (IE) */
}
#ddnav div a {
	display:block;
	padding:5px 10px;			/* play with dimensions of block element in dropdown menus */
	position:relative;
	font:normal 8pt arial;			/* font properties for text in dropdown menus */
	text-align:left;			/* aligning of text in dropdown menus */
	cursor:pointer;
}
#ddnav div a:hover, #ddnav span a:hover {color:#000 !important;}	/* text color on mouseover */
#ddnav span div {
	position:relative;
	border:none;
	border-bottom:2px groove #5970B2;	/* separator for submenus, groove does not work in FF */
	opacity:1.0;				/* avoid stacking transparancy for submenus (FF) */
	filter:alpha(opacity=100);		/* avoid stacking transparancy for submenus (IE) */
}

/* may want to upload the following pictures to a new location */
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}

.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
</style>

<!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com -->
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/wiki/js/jquery.js"></script>
<script type="text/javascript">
	function ddnav() {
		$('#ddnav ul li').hover(
			function () {
				$(this).find('div:first').css('display','block');},
			function () {
				$(this).find('div:first').css('display','none');}
		);
	}
			
	function ddnavsub() {
		$('#ddnav span > a').toggle(
			function () {
				$(this).removeClass("#ddnav expand").addClass("#ddnav collapse");
				$(this).parent().find('div:first').slideDown('fast');
				$(this).hover(
					function (){$(this).css('background-color','#99AAFF');},
					function (){$(this).css('background-color','#99AAFF');});},
			function () {
				$(this).removeClass("#ddnav collapse").addClass("#ddnav expand");
				$(this).parent().find('div:first').css('display','none');
				$(this).hover(
					function (){$(this).css('background-color','#99CCFF');},
					function (){$(this).css('background-color','#075A90');});}
		).addClass("#ddnav expand");
	}
	
	/* If you wish to omit the docking feature, remove following function ddtoggle() */	
	function ddtoggle() {
		$('#ddtoggle').toggle(
			function () {
				$(this).removeClass('undocked').addClass('docked');
				$('#ddnav').css('position','fixed');},
			function () {
				$(this).removeClass('docked').addClass('undocked');
				$('#ddnav').css('position','static');}
		);
	}

	function ddalign() {
		var _windowWidth = $(window).width();
		var _leftOffset = (_windowWidth - 965)/2;

		$('div#ddnav').css('left',_leftOffset);
	}
			
	function ddmsie() {
		$('#ddnav a').hover(
			function () {$(this).css('background-color','#99ccff');},
			function () {$(this).css('background-color','#075a90');}
		);
				
		/* toggle doesn't work yet */
		$('#ddtoggle').css('display','none');
				
		$('#ddnav ul').css('display','inline-block');
		$('#ddnav ul li').css('display','inline');
		$('#ddnav ul li').css('position','relative');
		$('#ddnav ul li>a').css('display','inline-block');
		$('#ddnav ul li>a').css('margin-right','-4px');
				
		$('#ddnav div').css('left','0');
		$('#ddnav div').css('top','100%');
		$('#ddnav span div').css('top','0');
	}
			
	function ddmozilla() {
		ddtoggle();
		$(window).bind('resize', function() {ddalign();});
	}

	$(function () {
		ddnav();
		ddnavsub();

		if(jQuery.browser.msie) ddmsie();
		if(jQuery.browser.mozilla) ddmozilla();

		$('#ddnav').css('visibility','visible');
	});
</script>

<!-- If you wish to omit the docking feature omit following line (div with id ddtoggle) -->
<div id="ddtoggle" class="undocked"></div>
<div id="ddwrapper">
<!-- Here the actual links are defined, simply replace with your own links in the appropriate sections -->
<div id="ddnav" align="center">
<ul>
	<li>
		<a href="https://2008.igem.org/Team:KULeuven">Home</a>
	</li>
	<li>
		<a>The Team</a>
		<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/Students">Students</a>
			<a href="https://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a>
			<a href="https://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a>
                        <a href="https://2008.igem.org/Team:KULeuven/Team/Pictures">Pictures</a>
		</div>
	</li>
	<li>
		<a>The Project</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Project">Summary</a>
			<span>
				<a>Components</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Input">Input</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Output">Output</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Filter">Filter</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">Invertimer</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/Evaluation">End Evaluation</a>
			<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
                        <a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
		</div>
	</li>
        <li>
		<a>Ethics</a>
		<div>

		</div>
	</li>
	<li>
		<a>Submitted Parts</a>
		<div>
			<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>
		</div>
	</li>
	<li>
		<a>Modeling</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
			<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
			<span>
				<a>Components</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Output">Output</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Inverter">Invertimer</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Reset">Reset</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/Sensitivity">Sensitivity Analysis</a>
			<a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a>
			<a href="https://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a>
		</div>
	</li>
	<li>
		<a>Data Analysis</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Data/Overview">Overview</a>
			<span>
				<a>New Parts</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Data/GFP">GFP (LVA-tag)</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/T7">T7 (UmuD-tag)</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Antisense">Antisense LuxI</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/ccdB">Celldeath (ccdB)</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/HybridProm">Hybrid Promotor</a>
				</div>
			</span>
                        <span>
				<a>Components</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Input">Input</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Output">Output</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Filter">Filter</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Inverter">Invertimer</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Reset">Reset</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/CellDeath">Cell Death</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Memory">Memory</a>
				</div>
			</span>
			<a href="https://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a>
		</div>
	</li>
        <li>
		<a>Software</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a>
			<a href="https://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a>
		</div>
	</li>
	<li>
		<a>Notebook</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a>
                        <a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
			<span>
				<a>Reports</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a>
					<a href="https://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a>
				</div>
			</span>
			<span>
				<a>Lab Data</a>
				<div>
					<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/Ligation">Ligation</a>
				</div>
			</span>
			<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/Guestbook">Guestbook</a>
                        
		</div>
	</li>
        
</ul>
</div>
</div>
</html>
Retrieved from "http://2008.igem.org/Team:KULeuven/Tools/Navigation_Bar"