Автор

Боковое меню с помощью плагина Sidr

Боковое меню с помощью плагина Sidr


 

На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.

 

ДЕМО
ИСХОДНИКИ

 

Для реализации задуманного нам понадобится небольшой плагина 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. Стили достаточно просты, вы можете в этом сами убедиться.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Боковое меню с помощью плагина Sidr

Если у Вас на сайте есть модальные окна, возможно это формы регистрации, авторизации или просто креативное отображение контента во всплывающих окнах, тогда вам необходимо их стилизировать, придав им новеньких эффектов. В данном уроке мы рассмотрим замечательную подборку эффектов для модальных окон. Все они имеют плавность эффекта и не требуют особых умений интеграции, все достаточно просто. Есть огромное количество вариантов появления диалогового окна, и мы бы хотели продемонстрировать некоторые идеи о том, как отображать диалоговые окна.


Боковое меню с помощью плагина Sidr

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


Боковое меню с помощью плагина Sidr

Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.


Боковое меню с помощью плагина Sidr

Коллекция причудливых текстовых эффектов, чтобы оживить теглайн и кнопки действий вашего сайта.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close