Категория: CSS.
В этом примере мы будем создавать красивое и эффектное слайд меню с применением 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