Template:Queens Canada/Notebookselector

<html> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/gooeymenu.js"> </script>


<style type="text/css">
hr{
margin:50px 0;
color:#eee;
}

ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}

/* ######### Gel Menu CSS ######### */

ul.gelbuttonmenu{
position:relative;
padding: 0;
margin: 0;
margin-bottom:1em;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.gelbuttonmenu li{
display: inline;
}

ul.gelbuttonmenu li a{
color: black;
font-weight:bold;
padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
background:black;
background:url('http://dl.dropbox.com/u/46807995/gelbuttonleft.gif') top left no-repeat, url('http://dl.dropbox.com/u/46807995/gelbuttonright.gif') top right no-repeat, url('http://dl.dropbox.com/u/46807995/gelbuttoncenter.gif') top center repeat-x;

}




/* ######### Solid Block Menu CSS ######### */


ul.solidblockmenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.solidblockmenu li{
display: inline;
}

ul.solidblockmenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
background:#d7ed93;
background: -moz-linear-gradient(top, #d7ed93, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
background: linear-gradient(top, #d7ed93, #fff);
}




/* ######### Thick Underline Menu CSS ######### */


ul.underlinemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.underlinemenu li{
display: inline;
}

ul.underlinemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}


ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border-bottom:5px solid navy;
}




/* ######### Frame Menu CSS ######### */


ul.framemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.framemenu li{
display: inline;
}

ul.framemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 12px 10px 5px 18px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
}


ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid orange;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}
#notebookmenu
{
height: 100px;
background-color:white;
}
.weeksub
{

}
</style>
</head>
<body>

<div id="notebookmenu">
<ul id="gooeymenu1" class="gelbuttonmenu">
Week
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week1">1</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week2">2</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week3">3</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week4">4</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week5">5</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week6">6</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week7">7</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week8">8</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week9">9</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week10">10</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week11">11</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week12">12</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week13">13</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week14">14</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week15">15</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week16">16</a> </li>
<li> <a href="2012.igem.org/Team:Queens_Canada/Notebook/Week17">17+</a> </li>

</ul>
<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:0})
</script>
<script>
$("#weekbutton").click( function()
{
$("#weeksub").fadeOut("slow");
});


</div>
</body>
</html>