Создавая сайт мы хотим сделать его более удобным и стильным, по этому сегодня мы будем разбираться в замечательном раздвижном меню, которое работает на основе нашей любимой библиотеки JavaScript, JQuery. Благодаря этой навигации можно замечательно скрасить наш сайт, при этом привлечь взгляд посетителя.Давайте посмотрим что у нас с этого получилось.. К началу работы исходники меню можно скачать, а просмотреть меню можно в демонстрации:

 
Первым шагом будет создание HTML-разметки. Будем делать каркас нашему раздвижному меню из списка <ul></ ul>.
Каркас у нас будет из списка в котором будут элементы меню. Между тегами <li> </ li>мы пишем текст и ссылки кнопки меню. Присмотритесь в код:

Как видите, это простой список с <img> и <span> тегами вложенных в тег ссылки <a>. Когда мы наводим курсор на ссылку, тег span реагируе и открывается в заданную нами ширину.

Между тегами head /head подключаем CSS файл, плагин jQuery и файл с фрейморком jQuery. Посмотрите код:

Шаг 2: CSS код
Для того чтобы span появится рядом со значком, мы будем его позиционировать, абсолютно. Чтобы это сделать, мы добавим relative позиционирование тегу <li>. Мы дадим ссылке ширину 24px, которая является шириною нашего значка.

Шаг3: jQuery

Иконки под загружаются при помощи Javascript. Поэтому нам нужно заранее указать путь к иконкам «key.gif», «keyo.gif».
Первая иконка будет показываться в спокойному состоянии кнопки, а другая будет под загружаться когда на кнопку наведут курсор (для второй иконки в конце имени добавьте «o» у вас получиться «keyo.gif»).

На главную