"
User:Vinoo/AccordionMenu
From 2014.igem.org
(Difference between revisions)
m |
m |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | |||
| + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready( function() { | ||
| + | |||
| + | // initialize accordion | ||
| + | $('#acc_menu ul').each( function() { | ||
| + | var currentURI = window.location.href; | ||
| + | var links = $('a', this); | ||
| + | var collapse = true; | ||
| + | for (var i = 0; i < links.size(); i++) { | ||
| + | var elem = links.eq(i); | ||
| + | var href = elem.attr('href'); | ||
| + | var hrefLength = href.length; | ||
| + | var compareTo = currentURI.substr(-1*hrefLength); | ||
| + | |||
| + | if (href == compareTo) { | ||
| + | collapse = false; | ||
| + | break; | ||
| + | } | ||
| + | }; | ||
| + | if (collapse) { | ||
| + | $(this).hide(); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | // on click, show this element and hide all others | ||
| + | $('#acc_menu > li').click( function() { | ||
| + | var me = $(this).children('ul'); | ||
| + | $('#acc_menu ul').not(me).slideUp(); | ||
| + | me.slideDown(); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | |||
<style type="text/css"> | <style type="text/css"> | ||
| - | + | #acc_menu, | |
| - | + | #acc_menu ul, | |
| - | + | #acc_menu li, | |
| - | + | #acc_menu a, | |
| - | + | #acc_menu span { | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
| Line 12: | Line 48: | ||
} | } | ||
| - | + | #acc_menu li { | |
list-style: none; | list-style: none; | ||
} | } | ||
| - | + | #acc_menu li > a { | |
display: block; | display: block; | ||
position: relative; | position: relative; | ||
| Line 34: | Line 70: | ||
} | } | ||
| - | + | #acc_menu li > .sub_menu { | |
height: 0; | height: 0; | ||
overflow: hidden; | overflow: hidden; | ||
| Line 45: | Line 81: | ||
} | } | ||
| - | + | #acc_menu li:target > .sub_menu { | |
min-height: 75px; | min-height: 75px; | ||
} | } | ||
| - | + | #acc_menu > li:hover > a, | |
| - | + | #acc_menu > li:target > a { | |
color: #000; | color: #000; | ||
background: #d9f5aa; | background: #d9f5aa; | ||
| Line 58: | Line 94: | ||
</style> | </style> | ||
| - | <ul | + | <ul id="acc_menu"> |
<li id="one"><a href="#one">Art & Design</a> | <li id="one"><a href="#one">Art & Design</a> | ||
Revision as of 19:59, 12 December 2013
