Сочное яркое вертикальное меню-аккордеон на jQuery
1 2 3 |
<link rel="stylesheet" type="text/css" href="/css/demo.css" /> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/script.js"></script> |
2#: Следующий код в то место, где будет само меню:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<ul class="container"> <li class="menu"> <ul> <li class="button"><a href="#" class="green">Kiwis <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#" onclick="$('.button a').eq(2).click();return false;">Open Grapes Section</a></li> <li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">Close This Section</a></li> <li><a href="#">Read on Wikipedia</a></li> <li><a href="#">Flickr Stream</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="orange">Oranges <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#" onclick="$('.button a:last').click();return false;">Open Last Section</a></li> <li><a href="#">Wikipedia Page</a></li> <li><a href="#">Flickr Photos</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="blue">Grapes <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Wiki page</a></li> <li>Text label 1</li> <li>Text label 2</li> <li><a href="#">Flickr Stream</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="red">Strawberries <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#">Wiki page</a></li> <li><a href="#">Strawberry Pie</a></li> <li><a href="#">Photo Stream</a></li> </ul> </li> </ul> </li> </ul> <div class="clear"></div> |