В этом примере мы будем создавать красивое и эффектное слайд меню с применением JQuery и CSS. Данный вид меню потребует написания достаточно большого кода, поэтому я постараюсь подробнее объяснить информацию от организации структуры меню до исходного кода.
Перед началом процесса программирования, вы должны иметь определенный графический стиль для вашего меню – эскиз. Это нужно не только для того чтобы представить будущий дизайн, но и для определения как будет вести себя в зависимости от различных событий элементы меню.
Определяем какие инструменты понадобиться для реализации создаваемого нами меню.
-XHTML
— CSS
— JQuery
Приступаем к работе
Для начала создадим папку с любым именем , где будут храниться все файлы и папки нашего анимированного слайд меню.
Создаём первый файл HTML с именем index и с таким содержимым.
Слайд меню с JQuery
Создаём три папки со следующими именами:
CSS (Здесь будут находиться файлы стилей меню)
IMG (Папка для изображений )
JS (JavaScript папка и JQuery библиотека)
CSS
Создайте css файл с именем style затем сохраняем его в папке CSS. Устанавливаться селекторы с соответствующими названиями как показано в коде ниже.
/* CSS Document */ /**** Body ***/ body{ background:#aedae9; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height:normal; color:#FFF; margin:0; } /**** Ссылки ***/ a{ text-decoration: none;color:#FFF;} a:link{ text-decoration:none;} a:visited{ text-decoration:none;} /**** Header ***/ #header{ background: url(../img/background_header.png) no-repeat; width:1000px; height:108px; margin:auto; } .header_navigation{ float:right; width:550px; height:24px; margin:24px 0 0 0; } /**** content ***/ #content{ width:940px; margin:auto; border-left:1px solid gray; border-bottom:1px solid gray ; border-right:1px solid gray ; padding: 30px; min-height:500px; } /**** Footer ***/ #footer{ width:1000px; margin:auto; }
Теперь мы сделаем еще один файл main.css и сохранить его в папке CSS.
.mainmenuslide{ height: 29px; width:550px; background: url("../img/background_main.png") no-repeat top; position: relative; padding: 15px 0 15px 0; margin: 0 -10px 0; } .mainmenuslide li { padding: 16px 0 11px 25px; margin: -18px 0 0 9px; float: left; list-style: none; } .mainmenuslide li.back { background: url("../img/hover_main.png") no-repeat right -52px; width: 9px; height: 30px; padding: 0px 0 22px 0; z-index: 1; margin: -12px 0 0 8px; position: absolute; } .mainmenuslide li.back .left { background: url("../img/hover_main.png") no-repeat top left ; padding: 0px 0 22px 0; height: 30px; margin-right: 24px; } .mainmenuslide li a { font: bold 14px arial; top: 7px; z-index: 2; float: left; height: 30px; position: relative; margin: auto 10px; outline: none; }
Подключаем только что созданные файлы стилей к HTML документу (index.html) внутри и после на следующую строку кода.
Следующим шагом будет подключение javascript файлов и библиотеки jQuery, они нужны для придания функциональности нашего меню. Эти файлы вы найдёте в архиве исходника.
Вставляем это после строк подключения CSS
Также надо вставить в index.html небольшой javascript код который отвечает за параметры эффекта скольжения.
$(function() { $("ul").mainmenuslide({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); });
Проверьте, полный код со всеми подключениями которые мы делали должен выглядеть так.
Slide Menu with jquery | iconshock $(function() { $("ul").mainmenuslide({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); });
Теперь мы создадим 3 DIV контейнера со следующими ID:
header
content
footer