Светлое многоуровневое горизонтальное меню на jQuery
|
1 2 3 4 5 |
<link type="text/css" href="/css/menu.css" rel="stylesheet" /> <script type="text/javascript" src="/js/menu.js"></script> <style type="text/css"> div#menu { margin:20px auto; } </style> |
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 54 |
<div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Главная</span></a> <div><ul> <li><a href="#" class="parent"><span>Подменю 1</span></a> <div><ul> <li><a href="#" class="parent"><span>Подменю 1.1</span></a> <div><ul> <li><a href="#"><span>Подменю 1.1.1</span></a></li> <li><a href="#"><span>Подменю 1.1.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Подменю 1.2</span></a></li> <li><a href="#"><span>Подменю 1.3</span></a></li> <li><a href="#"><span>Подменю 1.4</span></a></li> <li><a href="#"><span>Подменю 1.5</span></a></li> <li><a href="#"><span>Подменю 1.6</span></a></li> <li><a href="#" class="parent"><span>Подменю 1.7</span></a> <div><ul> <li><a href="#"><span>Подменю 1.7.1</span></a></li> <li><a href="#"><span>Подменю 1.7.2</span></a></li> </ul></div> </li> </ul></div> </li> <li><a href="#"><span>Подменю 2</span></a></li> <li><a href="#"><span>Подменю 3</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Продукция</span></a> <div><ul> <li><a href="#" class="parent"><span>Подменю 1</span></a> <div><ul> <li><a href="#"><span>Подменю 1.1</span></a></li> <li><a href="#"><span>Подменю 1.2</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <div><ul> <li><a href="#"><span>Подменю 2.1</span></a></li> <li><a href="#"><span>Подменю 2.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Подменю 3</span></a></li> <li><a href="#"><span>Подменю 4</span></a></li> <li><a href="#"><span>Подменю 5</span></a></li> <li><a href="#"><span>Подменю 6</span></a></li> <li><a href="#"><span>Подменю 7</span></a></li> </ul></div> </li> <li><a href="#"><span>Помощь</span></a></li> <li class="last"><a href="#"><span>Контакты</span></a></li> </ul> </div> |
