Team:Tuebingen

From 2013.igem.org

(Difference between revisions)
(iGEM 2013: Team Tübingen)
Line 4: Line 4:
{{:Team:Tuebingen/Template/Twitter}}
{{:Team:Tuebingen/Template/Twitter}}
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
+
<head>
<head>
-
<title></title>
+
<meta http-equiv="Content-Type" content="text/html;
 +
charset=iso-8859-1" />
 +
<title>Vertical navigation.</title>
-
<script type = "text/javascript" src="https://sdrive-storage.s3.amazonaws.com/igemtuebingen/52090bfe85d852/98241259/jquery.lavalamp-1.4.js"></script>
+
<style type="text/css">
-
<script type = "text/javascript" src="https://sdrive-storage.s3.amazonaws.com/igemtuebingen/52090bfdc25428/72848904/jquery.easing.1.3.js"></script>
+
body {
-
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+
font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
-
 
+
font-size: 12px;
-
<style>
+
-
ul#menu {
+
-
    list-style:none;
+
-
    margin:5px;
+
-
    border:1px solid #333;
+
-
    padding:10px;
+
-
    overflow:auto; /* makes sure the container fits the floated list-items below */
+
}
}
-
ul#menu li{
+
.Group {
-
    /* removed the positioning and z-index on the li, we no longer need them */
+
display: block;
-
    margin:3px 5px;
+
height: 28px;
-
    padding:5px 10px 4px;
+
width: 173px;
-
    float:left; /* floats list items to the left, creating a horizontal menu */
+
background-image: url(Button_Group.jpg);
-
    background-color:#aaa; /* add some background color to the line items */
+
line-height: 27px;
 +
padding-left: 27px;
 +
color: black;
 +
text-decoration: none;
 +
list-style-image:url(list_style_image.gif)
}
}
-
ul#menu li span {
+
.Group:hover {
-
    position: relative; /* must have position set to anything other than static to use z-index */
+
color: red;
-
    z-index: 5; /* 5 layers above all normal elements */
+
text-decoration: underline;
}
}
-
ul#menu li.backLava {
+
.Option {
-
    position:absolute; !important /* this is automatically added by lavaLamp, if not set, but let's set it for good practice */
+
display: block;
-
    z-index:3; !important /* 3 levels higher than all normal elements */
+
height: 28px;
-
    background-color:#fc0; !important
+
width: 173px;
-
    border:2px solid brown; !important
+
background-image: url(Button_Option.jpg);
 +
line-height: 27px;
 +
padding-left: 27px;
 +
color: black;
 +
text-decoration: none;
}
}
 +
.Option:hover {
 +
color: red;
 +
text-decoration: underline;
 +
}
 +
.show {
 +
display:inline;
 +
}
 +
.hide {
 +
display:none;
 +
}
 +
 +
ul {
 +
list.style-image: url(https://sdrive-storage.s3.amazonaws.com/igemtuebingen/5209371bc696e4/37417149/arrow.jpg);
 +
}
 +
 +
li {
 +
list-style-type: none;
 +
margin-left: -2em;
 +
margin-top: -0.5em;
 +
}
 +
</style>
</style>
-
<script type="text/javascript">  
+
<script type="text/Javascript">
-
$('.left-menu ul')[0].innerHTML="<li><a href=\"https://2010.igem.org\" style=\"font-weight:bold; text-transform:none\">iGEM HQ</a></li>"+$('.left-menu ul')[0].innerHTML;
+
function display (category) {
-
$(function() {
+
var whichcategory = document.getElementById(category);
-
$('ul.llmenu').lavaLamp({ speed: 300, autoReturn: true , target:'li'});
+
if (whichcategory.className=="show") {
-
});
+
whichcategory.className="hide";
-
$(function(){
+
} else {
-
        $('ul#accmenu').accordion({
+
whichcategory.className="show";
-
              header:'.head',
+
}
-
              fillSpace:false,
+
}
-
              autoHeight:false,
+
-
              navigation:true,
+
-
              animated: 'easeslide'})
+
-
});
+
-
</script>
+
 +
 +
</script>
</head>
</head>
<body>
<body>
-
 
+
<div title="Navigation">
-
<ul id="menu">
+
<!-- http://www.tutorials-db.com/articles/Coding_a_Smooth_CSS_Expanding_Navigation/ -->
-
<li><span>Fun</span></li>  
+
<a href="#" class="Group">Home</a>
-
<li><span>with</span></li>
+
<a href="javascript:display('Tutorials')" class="Group">Tutorials</a>
-
<li><span>jQuery</span></li>
+
-
<li><span>LavaLamp</span></li>
+
<div class="show" id="Tutorials">
-
</ul>
+
<ul>
 +
<li><a href="#" class="Option">Photoshop</a></li>
 +
<li><a href="#" class="Option">Flash</a></li>
 +
<li><a href="#" class="Option">PHP / MySQL</a></li>
 +
</ul>
 +
 +
</div>
 +
<a href="javascript:display('Resources')" class="Group">Resources</a>
 +
<div class="show" id="Resources">
 +
<ul>
 +
<li><a href="#" class="Option">Software</a></li>
 +
<li><a href="#" class="Option">Source Code</a></li>
 +
<li><a href="#" class="Option">Websites</a></li>
 +
</ul>
 +
 +
</div>
 +
<a href="#" class="Group">Contact</a>
 +
</div>
</body>
</body>
-
 
</html>
</html>

Revision as of 19:40, 12 August 2013

Return to iGEM Main Page.

iGEM 2013: Team Tübingen

Vertical navigation.

Home Tutorials Resources Contact