На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.
Для реализации задуманного нам понадобится небольшой плагин, качаем по ссылке - berriart.com/sidr. С помощью которого можно реализовать боковые меню, плагин достаточно гибкий, что позволит создавать различные варианты панелей. И так, давайте приступим.
Шаг 1. HTML
У нас будет несколько вариантов построения разметки, кроме этого нам необходимо привязать к ним некоторые функции js, к примеру для необходимости загрузки стороннего файла или для функции обратного вызова, начнем с самого простого примера. Для его реализации нам необходима простая разметка, а затем инициализировать все это с плагином:
<a id="simple-menu" href="#sidr">Открыть меню</a>
<div id="sidr"><!-- ваш контент -->
<ul>
<li><a href="#">Список 1</a></li>
<li><a href="#">Список 2</a></li>
<li><a href="#">Список 3</a></li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#simple-menu').sidr();
});
// ]]></script>Далее мы рассмотрим пример реализации нескольких меню, то есть на одной странице можно будет открыть боковое меню справа, а затем открыть его слева, для этого нам понадобятся параметры name и side:
<a id="left-menu" href="#left-menu">Меню слева</a>
<a id="right-menu" href="#right-menu">Меню справа</a>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#left-menu').sidr({
name: 'sidr-left',
side: 'left' // значение по умолчанию
});
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right'
});
});
// ]]></script>Последним мы рассмотрим вариант функции обратного вызова и возможности загрузки в боковое меню файла с содержанием:
<a class="basic" id="remote-content-menu" href="#remote-content-menu">Загрузить контент из файла</a>
<a class="basic" id="callback-menu" href="#callback-menu">Функция обратного вызова</a>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#existing-content-menu').sidr({
name: 'sidr-existing-content',
source: '#demoheader, #demo-content'
});
$('#remote-content-menu').sidr({
name: 'sidr-remote-content',
source: 'content.html'
});
$('#callback-menu').sidr({
name: 'callback',
source: function(name) {
return '
<h1>Меню ' + name + '</h1>
Все работает отлично!
';
}
});
});
// ]]></script>Шаг 2. CSS
Автор данного плагина предусмотрел для демонстрации два стиля - светлый и темный, их, соответственно можно просмотреть в исходниках в файлах jquery.sidr.light.css и jquery.sidr.dark.css. Стили достаточно просты, вы можете в этом сами убедиться.
Вот и все. Готово!
Материал взят из зарубежного источника - webresourcesdepot.com/create-side-menus-quickly-with-jquery-sidr и представлен исключительно в ознакомительных целях.
