Team:Tuebingen/Templates/Navigation

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!-- navigation -->
+
 
-
<div id="nav">
+
 
-
* [[Team:Tuebingen|Home]]
+
<head>
-
* [[Team:Tuebingen/Project|Project]]
+
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
-
* [[Team:Tuebingen/LabNotebook|Lab Notebook]]
+
 
-
* [[Team:Tuebingen/ActivitiesOutreach|Activities & Outreach]]
+
<style type="text/css">
-
* [[Team:Tuebingen/Team|Team]]
+
body, input{
-
* [[Team:Tuebingen/Sponsors|Sponsors]]
+
font-family: Arial;
-
* [[Team:Tuebingen/Contact|Contact us]]
+
        font-size: 0.8em;
 +
}
 +
 
 +
<!-- Navigation -->
 +
#navigation {
 +
background-color: blue;
 +
}
 +
 
 +
#accordion {
 +
list-style: none;
 +
padding: 0 0 0 0;
 +
width: 170px;
 +
}
 +
#accordion li{
 +
display: block;
 +
font-weight: bold;
 +
margin: 1px;
 +
cursor: pointer;
 +
padding: 5 5 5 7px;
 +
list-style: circle;
 +
-moz-border-radius: 10px;
 +
-webkit-border-radius: 10px;
 +
border-radius: 10px;
 +
}
 +
#accordion ul {
 +
list-style: none;
 +
padding: 0 0 0 0;
 +
display: none;
 +
}
 +
#accordion ul li{
 +
font-weight: normal;
 +
cursor: auto;
 +
background-color: #fff;
 +
padding: 0 0 0 7px;
 +
}
 +
#accordion a {
 +
text-decoration: none;
 +
}
 +
#accordion a:hover {
 +
text-decoration: underline;
 +
}
 +
<!-- /Navigation-->
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
<!-- Navigation -->
 +
<div id="navigation">
 +
<ul id="accordion">
 +
<!-- http://viralpatel.net/blogs/create-accordion-menu-jquery/ -->
 +
 
 +
    <li><a href="#">Home</a></li>
 +
        <ul></ul>
 +
 
 +
    <li>Project</li>
 +
        <ul>
 +
            <li><a href="/Team:Tuebingen/Project/Overwiew">Overview</a></li>
 +
            <li><a href="/Team:Tuebingen/Project/Motivation">Motivation</a></li>
 +
            <li><a href="/Team:Tuebingen/Project/Receptor">Element: Receptor</a></li>
 +
            <li><a href="/Team:Tuebingen/Project/Inverter">Element: Inverter</a></li>
 +
            <li><a href="/Team:Tuebingen/Project/Reporter">Element: Reporter</a></li>
 +
    <li><a href="/Team:Tuebingen/Project/Appkication">Application</a></li>
 +
    <li><a href="/Team:Tuebingen/Project/Safety">Safety</a></li>       
 +
</ul>
 +
   
 +
    <li>Team</li>
 +
        <ul>
 +
            <li><a href="/Team:Tuebingen/Team/About">About Us</a></li>
 +
            <li><a href="/Team:Tuebingen/Team/Attributions">Attributions</a></li>
 +
            <li><a href="/Team:Tuebingen/Sponsors">Sponsors</a></li>
 +
</ul>
 +
 +
    <li>Notebook</li>
 +
        <ul>
 +
            <li><a href="/Team:Tuebingen/Notebook/Protocols">Protocols</a></li>
 +
            <li><a href="/Team:Tuebingen/Notebook/Journal">Weekly Journal</a></li>
 +
        </ul>
 +
 +
    <li>Activities</li>
 +
<ul>
 +
            <li><a href="/Team:Tuebingen/Activities/SynBio">SynBio-Day</a></li>
 +
            <li><a href="/Team:Tuebingen/Activities/School">School-Project</a></li>
 +
            <li><a href="/Team:Tuebingen/Activities/Videogame">Videogame</a></li>
 +
        </ul>
 +
 +
  <li>Results</li> 
 +
<ul>
 +
    <li><a href="/Team:Tuebingen/Results/Modelling">Modelling</a></li>
 +
            <li><a href="/Team:Tuebingen/Results/Receptor">Element: Receptor</a></li>
 +
            <li><a href="/Team:Tuebingen/Results/Inverter">Element: Inverter</a></li>
 +
    <li><a href="/Team:Tuebingen/Results/Reporter">Element: Reporter</a></li>
 +
            <li><a href="/Team:Tuebingen/Results/ShippedParts">Shipped Parts</a></li>
 +
        </ul>
 +
 
 +
  <li><a href="/Team:Tuebingen/Contact">Contact Us</a></li>
 +
</ul>
</div>
</div>
 +
<!-- /Navigation -->
 +
 +
 +
<script>
 +
 +
<!-- Navigation -->
 +
$("#accordion > li").click(function(){
 +
 +
if(false == $(this).next().is(':visible')) {
 +
$('#accordion > ul').slideUp(300);
 +
}
 +
$(this).next().slideToggle(300);
 +
});
 +
<!-- /Navigation -->
 +
 +
</script>
 +
 +
</body>
 +
</html>

Revision as of 23:13, 13 August 2013


<head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css"> body, input{ font-family: Arial; 

       font-size: 0.8em;

}

  1. navigation {

background-color: blue; }

  1. accordion {

list-style: none; padding: 0 0 0 0; width: 170px; }

  1. accordion li{

display: block; font-weight: bold; margin: 1px; cursor: pointer; padding: 5 5 5 7px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

  1. accordion ul {

list-style: none; padding: 0 0 0 0; display: none; }

  1. accordion ul li{

font-weight: normal; cursor: auto; background-color: #fff; padding: 0 0 0 7px; }

  1. accordion a {

text-decoration: none; }

  1. accordion a:hover {

text-decoration: underline; }

</style>

</head>

<body>


<script>

$("#accordion > li").click(function(){

if(false == $(this).next().is(':visible')) { $('#accordion > ul').slideUp(300); } $(this).next().slideToggle(300); });

</script>

</body> </html>

Retrieved from "http://2013.igem.org/Team:Tuebingen/Templates/Navigation"