Team:TU Delft/menu test

From 2010.igem.org

(Difference between revisions)
(move code to main page)
 
(29 intermediate revisions not shown)
Line 2: Line 2:
<style>
<style>
-
/* we only need non hover images here, hovering is done in JS */
+
a:hover {
 +
text-decoration: none;
 +
}
 +
 
 +
#navlist {
 +
margin: 0;
 +
padding: 0;
 +
margin-left: 8px;
 +
}
 +
 
 +
#navlist li {
 +
display: block;
 +
list-style-type: none;
 +
float:left;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
 
 +
.menu_button {
 +
display:block;
 +
color: #fff;
 +
border: none;
 +
background-repeat: none;
 +
height:45px;
 +
cursor: pointer;
 +
}
 +
 
.menu_button_home {
.menu_button_home {
background-image: url(https://static.igem.org/mediawiki/2010/0/0f/Home_off.png);
background-image: url(https://static.igem.org/mediawiki/2010/0/0f/Home_off.png);
width:115px;
width:115px;
}
}
 +
.menu_button_home_sel { background-image: url(https://static.igem.org/mediawiki/2010/8/8a/Home_on.png); }
.menu_button_blog {
.menu_button_blog {
Line 13: Line 40:
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_competition  {
.menu_button_competition  {
Line 19: Line 47:
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_background {
.menu_button_background {
Line 25: Line 54:
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_project {
.menu_button_project {
Line 31: Line 61:
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_education  {
.menu_button_education  {
Line 37: Line 68:
margin-left:-15px;
margin-left:-15px;
}
}
 +
.menu_button_education_sel { background-image: url(https://static.igem.org/mediawiki/2010/9/98/Education_on.png); }
Line 44: Line 76:
margin-left:-15px;
margin-left:-15px;
}
}
 +
.menu_button_sponsors_sel {  background-image: url(https://static.igem.org/mediawiki/2010/c/c5/Sponsors_on.png); }
Line 51: Line 84:
margin-left:-15px;
margin-left:-15px;
}
}
 +
.menu_button_press_sel { background-image: url(https://static.igem.org/mediawiki/2010/8/8a/Press_on.png); }
</style>
</style>
<ul id="navlist">
<ul id="navlist">
-
<li class="menu_button menu_button_home" ><a href="https://2010.igem.org/Team:TU_Delft" title="Home">&nbsp;</a></li>
+
<li><a class="menu_button menu_button_home" href="https://2010.igem.org/Team:TU_Delft" title="Home">&nbsp;</a></li>
-
<li class="menu_button menu_button_blog"><a href="https://2010.igem.org/Team:TU_Delft/blog" title="Blog">&nbsp;</a></li>
+
<li><a class="menu_button menu_button_blog" href="https://2010.igem.org/Team:TU_Delft/blog" title="Blog">&nbsp;</a></li>
-
<li class="menu_button menu_button_competition" ><a href="https://2010.igem.org/Team:TU_Delft/competition" title="Competition">&nbsp;</a></li>
+
<li><a class="menu_button menu_button_competition" href="https://2010.igem.org/Team:TU_Delft/competition" title="Competition">&nbsp;</a></li>
-
<li class="menu_button menu_button_background"><a href="https://2010.igem.org/Team:TU_Delft/background" title="Background">&nbsp;</a></li>
+
<li><a class="menu_button menu_button_background" href="https://2010.igem.org/Team:TU_Delft/background" title="Background">&nbsp;</a></li>
-
<li class="menu_button menu_button_project"><a href="https://2010.igem.org/Team:TU_Delft/project" title="Project">&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 class="menu_button menu_button_education"><a href="https://2010.igem.org/Team:TU_Delft/education" title="Education">&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 class="menu_button menu_button_sponsors"><a href="https://2010.igem.org/Team:TU_Delft/sponsors" title="Sponsors">&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 class="menu_button menu_button_press"><a href="https://2010.igem.org/Team:TU_Delft/press" title="Press">&nbsp;</a></li>
+
<li><a class="menu_button menu_button_press" href="https://2010.igem.org/Team:TU_Delft/press" title="Press">&nbsp;</a></li>
</ul>
</ul>
<style>
<style>
-
.button_pointer { cursor:pointer; }
 
.button_hover { background-color: #aaa; }
.button_hover { background-color: #aaa; }
</style>
</style>
-
 
 
-
<script type="text/javascript">
 
-
 
-
// this runs when page is loaded
 
-
$(function() {
 
-
 
-
$("#navlist > *").each (function() {
 
-
  // load URL from link element
 
-
  var url = $("*",this).attr("href");
 
-
  var button = $(this);
 
-
 
-
  button.click(function() {
 
-
    window.location = url;
 
-
  });
 
-
 
-
  // setup hovering
 
-
  button.hover(function() {
 
-
    $(this).addClass("button_hover");
 
-
  }, function() {
 
-
    $(this).removeClass("button_hover");
 
-
  });
 
-
 
-
  $(this).addClass("button_pointer");
 
-
});
 
-
});
 
-
</script>
 
</html>
</html>

Latest revision as of 16:47, 7 June 2010

Retrieved from "http://2010.igem.org/Team:TU_Delft/menu_test"