Team:TU Delft/menu2

From 2010.igem.org

(Difference between revisions)
Line 99: Line 99:
}
}
.menu_button_contact_sel { background-image: url(https://static.igem.org/mediawiki/2010/b/ba/TU_Delft_contact_on.png); }
.menu_button_contact_sel { background-image: url(https://static.igem.org/mediawiki/2010/b/ba/TU_Delft_contact_on.png); }
 +
 +
 +
/* tabs
 +
*************************/
 +
 +
ul.tabs
 +
{
 +
display: table;
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
position: relative;
 +
}
 +
 +
ul.tabs li
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
display: table-cell;
 +
float: left;
 +
position: relative;
 +
}
 +
 +
ul.tabs a
 +
{
 +
position: relative;
 +
display: block;
 +
}
 +
 +
/* dropdowns
 +
*************************/
 +
 +
ul.dropdown
 +
{
 +
margin: 0;
 +
padding: 0;
 +
display: block;
 +
position: absolute;
 +
z-index: 999;
 +
top: 100%;
 +
width: 250px;
 +
display: none;
 +
left: 0;
 +
}
 +
 +
ul.dropdown ul.dropdown
 +
{
 +
top: 0;
 +
left: 95%;
 +
}
 +
 +
ul.dropdown li
 +
{
 +
margin: 0;
 +
padding: 0;
 +
float: none;
 +
position: relative;
 +
list-style: none;
 +
display: block;
 +
}
 +
 +
ul.dropdown li a
 +
{
 +
display: block;
 +
}
 +
</style>
</style>
-
<ul id="navlist">
+
<ul id="navlist" class="tabs">
-
<li><a class="menu_button menu_button_home" 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>
 +
<ul class="dropdown">
 +
<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_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_project" href="https://2010.igem.org/Team:TU_Delft/project" title="Project">&nbsp;</a></li>
Line 112: Line 183:
.button_hover { background-color: #aaa; }
.button_hover { background-color: #aaa; }
</style>
</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();
 +
});
 +
});
 +
});
 +
 +
</script>
</html>
</html>

Revision as of 15:01, 17 June 2010