Всем привет!
В этом уроки я покажу вам, как создать раздвижное меню с помощью JQuery. Вы сможете увидеть этот эффект в действии на сайте http://psd.tutsplus.com/ в верхнем правом углу, или по ссылке демо
Откройте программу Adobe Photoshop и создайте новый документ с желаемым размер кнопки, кнопки могут быть любого размера по вашему желанию. Используем размер 182х32 пикселей, дважды нажать на фоновый слой и добавить простое наложения градиента.
На правой стороне нашей кнопки добавим элемент белую стрелку и вертикально разделим её. Разделить стоит из двух линий цветом #302f2f и #252525.
В левой стороне меню добавим маленький значок и текст, я не думаю, что мне нужно вдаваться в подробности как это реализовать, так как вы будете делать собственный значок для вашего собственного сайта (сохранить изображение кнопки в папку изображений).
Теперь самый интересный момент - открыть редактор и сохранить пустой документ, как styles.css. После сохранения закройте документ, откройте папку "выпадающего меню" и создайте две новые папки, одну назовите JS, а другую - images.
После нам понадобиться библиотека JQuery "JQuery-1.3.1.min.js". Переименовать файл просто "JQuery" и вставьте его в папку JS. Откройте редактор и создайте новый HTML документ и сохраните документ сразу внутри папки выпадающего меню (имя файла HTML неважно, называйте как хотите, я назвал его как sliding_menu.html.) Теперь в вашем редакторе перейдите на вкладку кода.
Что мы должны сделать в первую очередь? Нам понадобиться подключить наш JavaScript и CSS файлов мы сделаем это, введя этот кусок кода между тегов "HEAD".
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
Вы наверняка заметили, что мы подключили 3 файла - у нас есть подключения styles.css, jquery.js и третий slider.js Нам нужно создать slider.js, откроем редактор и создадим пустой документ. Сохраним как slider.js в папке JS. Откройте ваш файл slider.js в редакторе и вставьте следующий код:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});
Теперь разберём код. Ваша первая линии означает, что если документ будет загружен, выполнится функция, в нашем случае раздвижное меню. В следующей строке по одному клику на изображении с классом menu_class будет выпадать меню, скорость которого регулируется в 3 линии. Вы можете изменить скорость, если вы хотите от медленной, средней или быстрой скорости. Вторая и третья линия важны, поскольку они занимают ключевые элементы, касающиеся нашей CSS, где img.menu_class и ul.the_menu. Теперь прикрепем HTML код меню.
<img src="images/button.png" width="184" height="32"
class="menu_class" />
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></l>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
Первый кусок кода вы видите просто изображение, которое является нашей кнопкой, мы указать ширину и высоту нашей кнопки мы также даём ему класс. Класс будет уникальным изображения опорной точки для JS файл, который мы уже писали. Класс также позволяет нам применять любые стили CSS с помощью с помощью класса. Menu_class. После этого мы просто создаём ненумерованный список. Если мы откроем наше добро в браузере то это будет выглядеть примерно вот так.
Откройте ваш CSS файл в редакторе. Прописываем несколько стиль для основной части нашего документа.
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}
Простые настройки фона, шрифта.
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
}
Следующие CSS стиль относится к меню, которое выпадает после нажатия кнопки.
.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
}
В этих стилях вы можете менять ширину открывшемся меню, шириной 300px, это может быть то, что вы хотели. Также придать ему 1px рамку так же, как нашу кнопку. Следующий стиль относится к цвету фона нашего проката из навигации, а также цветов и размеров.
.the_menu li {
background-color: #302f2f;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
- .the_menu li цвет фона навигации
- .the_menu li a Цвет ссылки, Нижние подчёркивание, внутрение отступы в 10px, навидение курсора на весь тег li
- .the_menu li a:hover Сслки при навидение курсора
Просто и быстро. Спасибо за внимание и не забудьте сказать спасибо :)