В этом уроке Вы узнаете, как создать известный JavaScript аккордеон меню с самым минимальным количеством HTML, CSS, JavaScript кодом и, конечно, с красивым интерфейсом.
HTML РАЗМЕТКА
В этом разделе, для формирования структуры, мы будем использовать неупорядоченный список UL. UL списки первого уровня будут навигацией, а UL второго уровня, который будет находится внутри каждого списка, будут подменю.
<ul id="accordion"> <li> <a href="#" class="popular" rel="popular">Popular Post</a> <ul> <li><a href="#">Popular Post 1</a></li> <li><a href="#">Popular Post 2</a></li> <li><a href="#" class="last">Popular Post 3</a></li> </ul> </li> <li> <a href="#" class="category" rel="category">Category</a> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a></li> <li><a href="#" class="last">Category 3</a></li> </ul> </li> <li> <a href="#" class="comment" rel="comment">Recent Comment</a> <ul> <li><a href="#">Comment 1</a></li> <li><a href="#">Comment 2</a></li> <li><a href="#" class="last">Comment 3</a></li> </ul> </li> </ul>
Как Вы могли заметить, также мы дали несколько классов и идентификатор.
CSS КОД
CSS код будет очень простым так, как мы используем всего два UL списка. Итак, что мы будем делать, для UL списка первого уровня зададим фоновое изображение, после этого скроем UL список второго уровня. Еще мы будем использовать, уже знакомый Вам метод, CSS Sprites. Его мы рассматривали в уроках: Создание углеволоконного меню, Навигация в стиле Windows 7 и Pop-Up CSS навигация.
Ниже представлена картинка, какую мы будем использовать.
CSS код выглядит так:
/*Первый уровень списка UL*/ #accordion { margin:0; padding:0; list-style:none; } #accordion li { width:267px; } #accordion li a { display: block; width: 268px; height: 43px; text-indent:-999em; outline:none; } /*Использование метода CSS Sprite*/ #accordion li a.popular { background:url(menu.jpg) no-repeat 0 0; } #accordion li a.popular:hover, .popularOver { background:url(menu.jpg) no-repeat -268px 0 !important; } #accordion li a.category { background:url(menu.jpg) no-repeat 0 -43px; } #accordion li a.category:hover, .categoryOver { background:url(menu.jpg) no-repeat -268px -43px !important; } #accordion li a.comment { background:url(menu.jpg) no-repeat 0 -86px; } #accordion li a.comment:hover, .commentOver { background:url(menu.jpg) no-repeat -268px -86px !important; } /* Второй уровень UL списка*/ #accordion ul { background:url(bg.gif) repeat-y 0 0; width:268px; margin:0; padding:0; display:none; } #accordion ul li { height:30px; } /* styling of submenu item */ #accordion ul li a { width:240px; height:25px; margin-left:15px; padding-top:5px; border-bottom: 1px dotted #777; text-indent:0; color:#ccc; text-decoration:none; } /* удаляем границы нижней части последнего пункта */ #accordion ul li a.last { border-bottom: none; }
JAVASCRIPT КОД
JavaScript код у нас будет разбит на две части. Первая часть будет скрывать все подменю, а также сбрасывать все значения по-умолчанию. Вторая часть будет выполнять просмотр выбранного объекта, и изменять стрелки.
JavaScript код немного сложнее чем все что мы делали раньше. Есть разные способы для решения сброса обратно на позицию по-умолчанию. Если Вы знаете другие решения, можете использовать их.
Перед тем, как начать написании JavaScript кода, необходимо скачать и подключить библиотеку jQuery к нашему документу.
<script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
Теперь мы можем приступить к написанию кода.
$(document).ready(function () { $(‘#accordion li’).click(function () { /* ПЕРВАЯ ЧАСТЬ */ //выбвигает или скрывает все подменю $(‘#accordion li’).children(‘ul’).slideUp(‘fast’); //стрелка по-умолчанию $(‘#accordion li > a’).each(function () { if ($(this).attr(‘rel’)!=») { $(this).removeClass($(this).attr(‘rel’) + ‘Over’); } }) /* ВТОРАЯ ЧАСТЬ */ //показывает выбранное подменю $(this).children(‘ul’).slideDown(‘fast’); //перемещает стрелку $(this).children(‘a’).addClass($(this).children(‘li a’).attr(‘rel’) + ‘Over’); return false; }); });
ЗАКЛЮЧЕНИЕ
На этом все. Теперь Вы можете сохранить все файлы и посмотреть, что получилось. Спасибо за внимание. Надеюсь, Вам понравился урок.
No related posts.