Team:KULeuven/Tools/Navigation Bar

From 2008.igem.org

(Difference between revisions)
Line 10: Line 10:
<style type="text/css">
<style type="text/css">
-
#nav, #nav ul {
+
  @import url('http://www.student.kuleuven.be/~s0173901/wiki/css/dropdown.css');
-
position: relative;
+
</style>
-
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 {
+
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/scripts/jquery.js"></script>
-
display: table-cell; /* purpose: li behaves like table-cell */
+
<script type="text/javascript">
-
position: relative; /* purpose: non-overlap li elements in ul */
+
function ddnav() {
-
list-style: none; /* purpose: remove default html list-style */
+
$('#ddnav ul li').hover(
-
}
+
function () {
-
 
+
$(this).find('div:first').css('display','block');},
-
#nav li a {
+
function () {
-
display: block; /* purpose: non-overlap div on a */
+
$(this).find('div:first').css('display','none');}
-
margin: 0 1px 0 0; /* purpose: spacing main menu items */
+
);
-
padding: 4px 20px;
+
-
background-color: #075a90;
+
-
color: #FFF;
+
-
text-align: center;
+
-
text-decoration: none; /* purpose: remove underline from a */
+
-
font: bold 13px arial;
+
-
}
+
-
 
+
-
#nav li a:hover {
+
-
background-color: #99CCFF;
+
-
}
+
-
 
+
-
#nav div {
+
-
position: absolute; /* purpose: li of div doesn't spread out */
+
-
display: none;
+
-
width: 10em;
+
-
opacity: 0.8;
+
-
filter: alpha(opacity=80);
+
-
border: 1px solid #5970B2;
+
-
background: #EAEBD8;
+
-
}
+
-
 
+
-
#nav span a, #nav div a {
+
-
position: relative;
+
-
display: block; /* purpose: a's in div have same width */
+
-
margin: 0;
+
-
padding: 5px 10px;
+
-
text-align: left;
+
-
font: 11px arial;
+
-
cursor: pointer;
+
}
}
-
+
-
#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');}
 +
);
}
}
 +
 +
function ddmsie() {
 +
/* IE doesn't consider anchor elements with no href value to be links, use jquery to enable hover */
 +
$('#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() {
-
#nav span div {
 
-
position: relative;
 
-
margin: 0;
 
-
border: none; /* purpose: reset border to none */
 
-
border-top: 2px groove #5970B2; /* purpose: add a seperator */
 
-
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 {
 
-
text-indent: 10px;
 
-
}
 
-
 
-
#nav span div span div a {
 
-
text-indent: 20px;
 
-
}
 
-
 
-
#nav .expand {
 
-
background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png');
 
-
background-repeat: no-repeat;
 
-
background-position: 95% 50%;
 
-
}
 
-
 
-
#nav .collapse {
 
-
background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png');
 
-
background-repeat: no-repeat;
 
-
background-position: 95% 50%;
 
-
}
 
-
</style>
 
-
 
-
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/scripts/jquery.js"></script>
 
-
<script type="text/javascript">
 
-
 
-
function ddmsie() {
 
-
$("#nav ul").css('display', 'inline-block');
 
-
$("#nav li").css('display', 'inline');
 
-
$("#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() {
+
$(function () {
-
$("#nav ul").css('display', 'table-row');
+
ddnav();
-
}
+
ddnavsub();
-
+
ddtoggle();
-
function ddnav() {
+
-
$("#nav li").hover(
+
-
function () {
+
-
$(this).find("div:first").css('display', 'inline');},
+
-
function () {
+
-
$(this).find("div:first").css('display', 'none');}
+
-
);
+
-
+
-
$("#nav span > a").toggle(
+
-
function () {
+
-
$(this).removeClass("#nav expand").addClass("#nav collapse");
+
-
$(this).css('background-color', '#99AAFF');
+
-
$(this).parent().find("div:first").css('display', 'block');},
+
-
function () {
+
-
$(this).removeClass("#nav collapse").addClass("#nav expand");
+
-
$(this).hover(
+
-
function () {
+
-
$(this).css('background-color', '#99CCFF');},
+
-
function () {
+
-
$(this).css('background-color', '#003E81');}
+
-
);
+
-
$(this).parent().find("div:first").css('display', 'none');
+
-
}
+
-
).addClass("#nav expand");
+
-
}
+
-
$(function () {
+
if(jQuery.browser.msie) ddmsie();
-
if(jQuery.browser.msie) ddmsie();
+
if(jQuery.browser.mozilla) ddmozilla();
-
if(jQuery.browser.mozilla) ddmozilla();
+
});
-
ddnav();
+
-
$("#nav, #nav ul").css('visibility', 'visible');
+
-
});
+
</script>
</script>
-
<div align="center" id="nav">
+
<div id="ddtoggle" class="undocked"></div>
 +
<div id="ddwrapper">
 +
<div id="ddnav">
<ul>
<ul>
<li>
<li>
Line 267: Line 202:
          
          
</ul>
</ul>
 +
</div>
</div>
</div>
</html>
</html>

Revision as of 07:56, 4 September 2008

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