Team:KULeuven/Tools/Navigation Bar

Result:


 * 1) content pre {white-space: pre;}


 * 1) content {z-index:4;}
 * 2) ddwrapper * {z-index:8 !important;}

div#ddwrapper { margin:0; padding:0; height:28px; width:945px; } div#ddnav { margin:0 auto; 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; }

display:table-row; margin:0 auto; padding:0; }	display:table-cell; list-style:none; margin:0; padding:0 !important; border-right:1px solid #FFF; }	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; }	display:none; position:absolute; width:9em; background-color:#000; border:1px solid #5970B2; opacity:0.9; filter:alpha(opacity=90); }	display:block; padding:5px 10px; position:relative; font:normal 8pt arial; text-align:left; cursor:pointer; }	position:relative; border:none; border-bottom:2px groove #5970B2; opacity:1.0; filter:alpha(opacity=100); }
 * 1) ddnav ul {
 * 1) ddnav ul li {
 * 1) ddnav ul li:last-child{border-right:none;}
 * 2) ddnav a{
 * 1) ddnav ul li a:hover {background-color:#99CCFF;}
 * 2) ddnav li a:active {outline:none;}
 * 3) ddnav li a:focus {-moz-outline-style:none;}
 * 4) ddnav div {
 * 1) ddnav div a {
 * 1) ddnav div a:hover, #ddnav span a:hover {color:#000 !important;}
 * 2) ddnav span div {

.expand {background: url('http://2008.igem.org/wiki/images/e/ef/Icon-expand.png') no-repeat 95% 50%;} .collapse {background: url('http://2008.igem.org/wiki/images/c/cd/Icon-collapse.png') no-repeat 95% 50%;}

.docked {background: #99ccff url("http://2008.igem.org/wiki/images/6/62/Ddnavundock.png") no-repeat 50% 50%;} .undocked {background: #99ccff url("http://2008.igem.org/wiki/images/e/e4/Ddnavdock.png") no-repeat 50% 50%;}

  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"); }	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'); });

  Home   The Team Research Labs and Groups Students Instructors</a> Advisors</a> Pictures</a> </li>  The Project</a> Summary</a> Components</a> Input</a> Output</a> Filter</a> Invertimer</a> Reset</a> Cell Death</a> Memory</a> End Evaluation</a> Literature</a> Brainstorm</a> </li> <li> <a>Ethics</a>

</li> <li> <a>Submitted Parts</a> <a href="http://2008.igem.org/Team:KULeuven/Parts">Listing</a> <a href="http://partsregistry.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2008&group=KULeuven">Sandbox</a> </li> <li> <a>Modeling</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a> <a href="http://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a> <a>Components</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Output">Output</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Inverter">Invertimer</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Reset">Reset</a> <a href="http://2008.igem.org/Team:KULeuven/Model/CellDeath">Cell Death</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Memory">Memory</a> <a href="http://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Sensitivity">Sensitivity Analysis</a> <a href="http://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a> </li> <li> <a>Data Analysis</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Overview">Overview</a> <a>New Parts</a> <a href="http://2008.igem.org/Team:KULeuven/Data/GFP">GFP (LVA-tag)</a> <a href="http://2008.igem.org/Team:KULeuven/Data/T7">T7 (UmuD-tag)</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Antisense">Antisense LuxI</a> <a href="http://2008.igem.org/Team:KULeuven/Data/ccdB">Celldeath (ccdB)</a> <a href="http://2008.igem.org/Team:KULeuven/Data/HybridProm">Hybrid Promotor</a> <a>Components</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Input">Input</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Output">Output</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Filter">Filter</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Inverter">Invertimer</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Reset">Reset</a> <a href="http://2008.igem.org/Team:KULeuven/Data/CellDeath">Cell Death</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Memory">Memory</a> <a href="http://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a> </li> <li> <a>Software</a> <a href="http://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a> <a href="http://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a> </li> <li> <a>Notebook</a> <a href="http://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a> <a href="http://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a> <a>Reports</a> <a href="http://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a> <a href="http://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a> <a>Lab Data</a> <a href="http://2008.igem.org/Team:KULeuven/Freezer">Freezer</a> <a href="http://2008.igem.org/Team:KULeuven/Primers">Primers</a> <a href="http://2008.igem.org/Team:KULeuven/Ligation">Ligation</a> <a href="http://2008.igem.org/Team:KULeuven/Tools">Tools</a> <a href="http://2008.igem.org/Team:KULeuven/Press">Press</a> <a href="http://2008.igem.org/Team:KULeuven/Guestbook">Guestbook</a> </li> </ul>

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:


 * Most basic dropdown menu, with no submenu's
 * The javascript library used to add effects and optimise the dropdown
 * How to center a ul list effectively

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

<style type="text/css">
 * 1) content {z-index:4;}
 * 2) 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; }

display:table-row;			/* works only for firefox, later adjusted by javascript for IE */ margin:0 auto; padding:0; }	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 */ }	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; }	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) */ }	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; }	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) */ }
 * 1) ddnav ul {
 * 1) ddnav ul li {
 * 1) ddnav ul li:last-child{border-right:none;}
 * 2) ddnav a{
 * 1) ddnav ul li a:hover {background-color:#99CCFF;}/* background color for tabs on mouseover */
 * 2) ddnav li a:active {outline:none;}		/* remove standard dotted border for links when clicked (IE) */
 * 3) ddnav li a:focus {-moz-outline-style:none;}	/* remove standard dotted border for links when clicked (FF) */
 * 4) ddnav div {
 * 1) ddnav div a {
 * 1) ddnav div a:hover, #ddnav span a:hover {color:#000 !important;}	/* text color on mouseover */
 * 2) ddnav span div {

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

.docked {background: #99ccff url("http://2008.igem.org/wiki/images/6/62/Ddnavundock.png") no-repeat 50% 50%;} .undocked {background: #99ccff url("http://2008.igem.org/wiki/images/e/e4/Ddnavdock.png") no-repeat 50% 50%;}

<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/wiki/js/jquery.js"> <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'); });

<ul> <li> <a href="http://2008.igem.org/Team:KULeuven">Home</a> </li> <li> <a>The Team</a> <a href="http://2008.igem.org/Team:KULeuven/Team/LabsandGroups">Research Labs and Groups</a> <a href="http://2008.igem.org/Team:KULeuven/Team/Students">Students</a> <a href="http://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a> <a href="http://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a> <a href="http://2008.igem.org/Team:KULeuven/Team/Pictures">Pictures</a> </li> <li> <a>The Project</a> <a href="http://2008.igem.org/Team:KULeuven/Project">Summary</a> <a>Components</a> <a href="http://2008.igem.org/Team:KULeuven/Project/Input">Input</a> <a href="http://2008.igem.org/Team:KULeuven/Project/Output">Output</a> <a href="http://2008.igem.org/Team:KULeuven/Project/Filter">Filter</a> <a href="http://2008.igem.org/Team:KULeuven/Project/Inverter">Invertimer</a> <a href="http://2008.igem.org/Team:KULeuven/Project/Reset">Reset</a> <a href="http://2008.igem.org/Team:KULeuven/Project/CellDeath">Cell Death</a> <a href="http://2008.igem.org/Team:KULeuven/Project/Memory">Memory</a> <a href="http://2008.igem.org/Team:KULeuven/Evaluation">End Evaluation</a> <a href="http://2008.igem.org/Team:KULeuven/Literature">Literature</a> <a href="http://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a> </li> <li> <a>Ethics</a>

</li> <li> <a>Submitted Parts</a> <a href="http://2008.igem.org/Team:KULeuven/Parts">Listing</a> <a href="http://partsregistry.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2008&group=KULeuven">Sandbox</a> </li> <li> <a>Modeling</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a> <a href="http://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a> <a>Components</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Output">Output</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Inverter">Invertimer</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Reset">Reset</a> <a href="http://2008.igem.org/Team:KULeuven/Model/CellDeath">Cell Death</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Memory">Memory</a> <a href="http://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Sensitivity">Sensitivity Analysis</a> <a href="http://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a> <a href="http://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a> </li> <li> <a>Data Analysis</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Overview">Overview</a> <a>New Parts</a> <a href="http://2008.igem.org/Team:KULeuven/Data/GFP">GFP (LVA-tag)</a> <a href="http://2008.igem.org/Team:KULeuven/Data/T7">T7 (UmuD-tag)</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Antisense">Antisense LuxI</a> <a href="http://2008.igem.org/Team:KULeuven/Data/ccdB">Celldeath (ccdB)</a> <a href="http://2008.igem.org/Team:KULeuven/Data/HybridProm">Hybrid Promotor</a> <a>Components</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Input">Input</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Output">Output</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Filter">Filter</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Inverter">Invertimer</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Reset">Reset</a> <a href="http://2008.igem.org/Team:KULeuven/Data/CellDeath">Cell Death</a> <a href="http://2008.igem.org/Team:KULeuven/Data/Memory">Memory</a> <a href="http://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a> </li> <li> <a>Software</a> <a href="http://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a> <a href="http://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a> </li> <li> <a>Notebook</a> <a href="http://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a> <a href="http://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a> <a>Reports</a> <a href="http://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a> <a href="http://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a> <a>Lab Data</a> <a href="http://2008.igem.org/Team:KULeuven/Freezer">Freezer</a> <a href="http://2008.igem.org/Team:KULeuven/Primers">Primers</a> <a href="http://2008.igem.org/Team:KULeuven/Ligation">Ligation</a> <a href="http://2008.igem.org/Team:KULeuven/Tools">Tools</a> <a href="http://2008.igem.org/Team:KULeuven/Press">Press</a> <a href="http://2008.igem.org/Team:KULeuven/Guestbook">Guestbook</a> </li> </ul>