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> | ||
- | < | + | <style type="text/css"> |
- | + | body { | |
- | + | font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif; | |
- | + | font-size: 12px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .Group { | |
- | + | display: block; | |
- | + | height: 28px; | |
- | + | width: 173px; | |
- | + | background-image: url(Button_Group.jpg); | |
- | + | line-height: 27px; | |
+ | padding-left: 27px; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | list-style-image:url(list_style_image.gif) | ||
} | } | ||
- | + | .Group:hover { | |
- | + | color: red; | |
- | + | text-decoration: underline; | |
} | } | ||
- | + | .Option { | |
- | + | display: block; | |
- | + | height: 28px; | |
- | + | width: 173px; | |
- | + | 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/ | + | <script type="text/Javascript"> |
- | + | function display (category) { | |
- | + | var whichcategory = document.getElementById(category); | |
- | + | if (whichcategory.className=="show") { | |
- | } | + | whichcategory.className="hide"; |
- | + | } else { | |
- | + | whichcategory.className="show"; | |
- | + | } | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
+ | |||
+ | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
- | + | <div title="Navigation"> | |
- | < | + | <!-- http://www.tutorials-db.com/articles/Coding_a_Smooth_CSS_Expanding_Navigation/ --> |
- | <li>< | + | <a href="#" class="Group">Home</a> |
- | <li>< | + | <a href="javascript:display('Tutorials')" class="Group">Tutorials</a> |
- | <li>< | + | |
- | <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
iGEM 2013: Team Tübingen