Тёмное вертикальное меню-аккордеон на jQuery
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/* Styles for Example #1 */ #example1{ margin:0; padding:0; width:200px; list-style-type:none; line-height:120%; } #example1 .closed{ background-image:url(/images/ha-down.gif); } #example1 .closed,#example1 .opened{ padding-right:10px; background-position:98% 50%; background-repeat:no-repeat; } #example1 .header{ background-color:#7B7B7B; } #example1 .opened{ background-image:url(/images/ha-up.gif); } #example1 a{ display:block; font-weight:bold; text-decoration:none; } #example1 a.hover{ border-top:1px solid #5F5F5F; border-bottom:1px solid #7B7B7B; background-color:#7B7B7B; color:#FFFFFF; } #example1 ul{ overflow: hidden; margin:0; padding:0; } #example1 li{ margin:0; padding:0; list-style-type:none; background-color:#848484; color:#FFFFFF; } #example1 li a{ padding:2px 10px 2px 4px; border-top:1px solid #9A9A9A; border-left:1px solid #9A9A9A; border-right:1px solid #696969; border-bottom:1px solid #757575; background-color:#848484; color:#FFFFFF; } #example1 li.active a,#example1 li li.active a{ border-top:1px solid #5F5F5F; border-bottom:1px solid #7B7B7B; border-left:1px solid #757575; border-right:1px solid #9A9A9A; background-color:#404040; color:#FFFFFF; } #example1 li.active li a,#example1 li li a{ padding:2px 4px 2px 8px; border-top:1px solid #696969; border-left:1px solid #696969; border-right:1px solid #8A8A8A; border-bottom:1px solid #7B7B7B; background-color:#757575; color:#FFFFFF; } |
2#: После /head на нужных страницах вставляйте:
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="/js/jquery.hoveraccordion.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Setup HoverAccordion for Example 1 $('#example1').hoverAccordion(); }); </script> |
3#: Следующий код в то место, где будет само меню:
|
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 54 55 56 |
<ul id="example1"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a> <ul> <li><a href="index.php?id=2a#ex1">Subitem 2a</a></li> <li><a href="index.php?id=2b#ex1">Subitem 2b</a></li> <li><a href="index.php?id=2c#ex1">Subitem 2c</a></li> <li><a href="index.php?id=2d#ex1">Subitem 2d</a></li> <li><a href="index.php?id=2e#ex1">Subitem 2e</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a> <ul> <li><a href="index.php?id=5a#ex1">Subitem 5a</a></li> <li><a href="index.php?id=5b#ex1">Subitem 5b</a></li> <li><a href="index.php?id=5c#ex1">Subitem 5c</a></li> </ul> </li> <li><a href="#">Item 6</a></li> <li><a href="#">Item 7</a> <ul> <li><a href="index.php?id=7a#ex1">Subitem 7a</a></li> <li><a href="index.php?id=7b#ex1">Subitem 7b</a></li> <li><a href="index.php?id=7c#ex1">Subitem 7c</a></li> <li><a href="index.php?id=7d#ex1">Subitem 7d</a></li> </ul> </li> <li><a href="#">Item 8</a> <ul> <li><a href="index.php?id=8a#ex1">Subitem 8a</a></li> <li><a href="index.php?id=8b#ex1">Subitem 8b</a></li> <li><a href="index.php?id=8c#ex1">Subitem 8c</a></li> <li><a href="index.php?id=8d#ex1">Subitem 8d</a></li> <li><a href="index.php?id=8e#ex1">Subitem 8e</a></li> <li><a href="index.php?id=8f#ex1">Subitem 8f</a></li> </ul> </li> <li><a href="#">Item 9</a> <ul> <li><a href="index.php?id=9a#ex1">Subitem 9a</a></li> <li><a href="index.php?id=9b#ex1">Subitem 9b</a></li> <li><a href="index.php?id=9c#ex1">Subitem 9c</a></li> <li><a href="index.php?id=9d#ex1">Subitem 9d</a></li> <li><a href="index.php?id=9e#ex1">Subitem 9e</a></li> </ul> </li> </ul> |
