Team:TU Delft/menu2

From 2010.igem.org

(Difference between revisions)
 
(63 intermediate revisions not shown)
Line 18: Line 18:
padding: 0;
padding: 0;
margin: 0;
margin: 0;
 +
}
 +
 +
#navlist li ul {
 +
position: absolute;
 +
visibility: hidden;
 +
background-color: #fff;
 +
margin:0;
 +
padding:0;
 +
z-index:100;
 +
}
 +
 +
#navlist li ul li {
 +
list-style-type:none;
 +
float:left;
 +
clear:both;
 +
z-index:100;
 +
}
 +
 +
#navlist li ul li a {
 +
display: block;
 +
color: #222;
 +
width: 150px;
 +
border: 1px solid #ccc;
 +
padding: 3px;
 +
}
 +
 +
#navlist li ul li a:hover {
 +
color: #000;
 +
background-color: #ccc;
 +
text-decoration: underline;
}
}
Line 33: Line 63:
width:115px;
width:115px;
}
}
-
.menu_button_home_sel { background-image: url(https://static.igem.org/mediawiki/2010/7/7e/TU_Delft_home_on.png); }
+
.menu_button_home.hover { background-image: url(https://static.igem.org/mediawiki/2010/7/7e/TU_Delft_home_on.png); }
.menu_button_blog {
.menu_button_blog {
Line 40: Line 70:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_blog_sel {background-image: url(https://static.igem.org/mediawiki/2010/0/0d/Blog_on.png);}
+
.menu_button_blog.hover {background-image: url(https://static.igem.org/mediawiki/2010/0/0d/Blog_on.png);}
.menu_button_competition  {
.menu_button_competition  {
Line 47: Line 77:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_competition_sel { background-image: url(https://static.igem.org/mediawiki/2010/e/e0/Competition_on.png);}
+
.menu_button_competition.hover { background-image: url(https://static.igem.org/mediawiki/2010/e/e0/Competition_on.png);}
.menu_button_background {
.menu_button_background {
Line 54: Line 84:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_background_sel {background-image: url(https://static.igem.org/mediawiki/2010/f/f2/Background_on.png); }
+
.menu_button_background.hover {background-image: url(https://static.igem.org/mediawiki/2010/f/f2/Background_on.png); }
.menu_button_project {
.menu_button_project {
Line 61: Line 91:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_project_sel { background-image: url(https://static.igem.org/mediawiki/2010/3/3b/Project_on.png); }
+
.menu_button_project.hover { background-image: url(https://static.igem.org/mediawiki/2010/3/3b/Project_on.png); }
.menu_button_education  {
.menu_button_education  {
Line 68: Line 98:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_education_sel { background-image: url(https://static.igem.org/mediawiki/2010/9/98/Education_on.png); }
+
.menu_button_education.hover { background-image: url(https://static.igem.org/mediawiki/2010/9/98/Education_on.png); }
Line 76: Line 106:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_sponsors_sel {  background-image: url(https://static.igem.org/mediawiki/2010/c/c5/Sponsors_on.png); }
+
.menu_button_sponsors.hover {  background-image: url(https://static.igem.org/mediawiki/2010/c/c5/Sponsors_on.png); }
Line 84: Line 114:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_press_sel { background-image: url(https://static.igem.org/mediawiki/2010/8/8a/Press_on.png); }
+
.menu_button_press.hover { background-image: url(https://static.igem.org/mediawiki/2010/8/8a/Press_on.png); }
.menu_button_team {
.menu_button_team {
Line 91: Line 121:
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_team_sel { background-image: url(https://static.igem.org/mediawiki/2010/b/b3/TU_Delft_team_on.png); }
+
.menu_button_team.hover { background-image: url(https://static.igem.org/mediawiki/2010/b/b3/TU_Delft_team_on.png); }
.menu_button_contact {
.menu_button_contact {
background-image: url(https://static.igem.org/mediawiki/2010/4/43/TU_Delft_contact_off.png);
background-image: url(https://static.igem.org/mediawiki/2010/4/43/TU_Delft_contact_off.png);
-
width:112px;
+
width:119px;
margin-left:-15px;
margin-left:-15px;
}
}
-
.menu_button_contact_sel { background-image: url(https://static.igem.org/mediawiki/2010/b/ba/TU_Delft_contact_on.png); }
+
.menu_button_contact.hover { background-image: url(https://static.igem.org/mediawiki/2010/b/ba/TU_Delft_contact_on.png); }
-
 
+
.menu_button_gallery {
-
/* tabs
+
background-image: url(https://static.igem.org/mediawiki/2010/c/c1/TU_Delft_gallery_off.png);
-
*************************/
+
width:115px;
-
 
+
margin-left:-15px;
-
ul.tabs
+
-
{
+
-
display: table;
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style: none;
+
-
position: relative;
+
}
}
 +
.menu_button_gallery.hover { background-image: url(https://static.igem.org/mediawiki/2010/1/18/TU_Delft_gallery_on.png); }
-
ul.tabs li
+
.menu_button_safety {
-
{
+
background-image: url(https://static.igem.org/mediawiki/2010/9/93/TU_Delft_safety_off.png);
-
margin: 0;
+
width:140px;
-
padding: 0;
+
margin-left:-15px;
-
list-style: none;
+
-
display: table-cell;
+
-
float: left;
+
-
position: relative;
+
}
}
 +
.menu_button_safety.hover { background-image: url(https://static.igem.org/mediawiki/2010/d/db/TU_Delft_safety_on.png); }
-
ul.tabs a
+
.submenu_body {
-
{
+
display:none;
-
position: relative;
+
position: relative;  
-
display: block;
+
top:0px;
 +
left:0px;  
}
}
 +
</style>
 +
<ul id="navlist">
 +
<li><a class="menu_button menu_button_home" href="https://2010.igem.org/Team:TU_Delft/pages/home" title="Home">&nbsp;</a></li>
 +
<li><a class="menu_button menu_button_blog" href="https://2010.igem.org/Team:TU_Delft/pages/blog" title="Blog">&nbsp;</a></li>
 +
<li><a class="menu_button menu_button_project" href="https://2010.igem.org/Team:TU_Delft/pages/project" title="Project">&nbsp;</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/project_description">Project Description</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/background">Background</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/rbs_characterization">RBS Characterization</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/alkane_degradation">Alkane Degradation</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/hydrocarbon_tolerance">Hydrocarbon Tolerance</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/hydrocarbon_solubility">Hydrocarbon Solubility</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/halotolerance">Halotolerance</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/genetic_regulation">Genetic Regulation</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/modeling">Modeling</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/project/biobricks">BioBricks</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="menu_button menu_button_team" href="https://2010.igem.org/Team:TU_Delft/pages/team" title="The Team">&nbsp;</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/team/team_members">Team Members</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/team/our_mission">Our Mission</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/team/history">History</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/team/recruitment">Recruitment</a></li>
 +
</ul></li>
 +
<li><a class="menu_button menu_button_gallery" href="https://2010.igem.org/Team:TU_Delft/pages/gallery" title="Gallery">&nbsp;</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/gallery/pictures">Pictures</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/gallery/movies">Movies</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="menu_button menu_button_education" href="https://2010.igem.org/Team:TU_Delft/pages/education" title="Education">&nbsp;</a></li>
 +
<li><a class="menu_button menu_button_sponsors" href="https://2010.igem.org/Team:TU_Delft/pages/sponsors" title="Sponsors">&nbsp;</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/sponsors/sponsor_list">Sponsor List</a></li>
 +
<li><a href="https://2010.igem.org/Team:TU_Delft/sponsors/become_a_sponsor">Become a Sponsor</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="menu_button menu_button_contact" href="https://2010.igem.org/Team:TU_Delft/pages/contact" title="Contact">&nbsp;</a></li>
 +
</ul>
 +
<style>
 +
.button_hover { background-color: #aaa; }
 +
</style>
-
/* dropdowns
+
<script type="text/javascript">
-
*************************/
+
var timeout    = 500;
 +
var closetimer = 0;
 +
var ddmenuitem = 0;
-
ul.dropdown
+
function jsddm_open() {
-
{
+
  jsddm_canceltimer();
-
margin: 0;
+
  jsddm_close();
-
padding: 0;
+
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');
-
display: block;
+
-
position: absolute;
+
-
z-index: 999;
+
-
top: 100%;
+
-
width: 250px;
+
-
display: none;
+
-
left: 0;
+
}
}
-
ul.dropdown ul.dropdown
+
function jsddm_close() {
-
{
+
  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
-
top: 0;
+
-
left: 95%;
+
}
}
-
ul.dropdown li
+
function jsddm_timer() {
-
{
+
  closetimer = window.setTimeout(jsddm_close, timeout);
-
margin: 0;
+
-
padding: 0;
+
-
float: none;
+
-
position: relative;
+
-
list-style: none;
+
-
display: block;
+
}
}
-
ul.dropdown li a
+
function jsddm_canceltimer() {
-
{
+
  if(closetimer) {
-
display: block;
+
    window.clearTimeout(closetimer);
 +
    closetimer = null;
 +
  }
}
}
-
</style>
+
$(function() {
-
<ul id="navlist" class="tabs">
+
  $('#navlist > li').bind('mouseover', jsddm_open);
-
<li><a class="menu_button menu_button_home" href="https://2010.igem.org/Team:TU_Delft" title="Home">&nbsp;</a>
+
  $('#navlist > li').bind('mouseout', jsddm_timer);
-
<ul class="dropdown">
+
// $("#navlist li ul li:even").addClass("alt");
-
<li><a href="#">Menu item 1</a>
+
-
</ul>
+
-
</li>
+
-
<li><a class="menu_button menu_button_blog" href="https://2010.igem.org/Team:TU_Delft/blog" title="Blog">&nbsp;</a></li>
+
-
<li><a class="menu_button menu_button_project" href="https://2010.igem.org/Team:TU_Delft/project" title="Project">&nbsp;</a></li>
+
-
<li><a class="menu_button menu_button_team" href="https://2010.igem.org/Team:TU_Delft/team" title="The Team">&nbsp;</a></li>
+
-
<li><a class="menu_button menu_button_education" href="https://2010.igem.org/Team:TU_Delft/education" title="Education">&nbsp;</a></li>
+
-
<li><a class="menu_button menu_button_sponsors" href="https://2010.igem.org/Team:TU_Delft/sponsors" title="Sponsors">&nbsp;</a></li>
+
-
<li><a class="menu_button menu_button_contact" href="https://2010.igem.org/Team:TU_Delft/contact" title="Contact">&nbsp;</a></li>
+
-
</ul>
+
-
<style>
+
-
.button_hover { background-color: #aaa; }
+
-
</style>
+
-
 
+
-
<script type="text/javascript">
+
-
$(function () {
+
-
$(‘.dropdown’).each(function () {
+
-
$(this).parent().eq(0).hover(function () {
+
-
$(‘.dropdown:eq(0)’, this).show();
+
-
}, function () {
+
-
$(‘.dropdown:eq(0)’, this).hide();
+
-
});
+
-
});
+
});
});
 +
document.onclick = jsddm_close;
</script>
</script>
</html>
</html>

Latest revision as of 11:37, 22 July 2010