Автор

Боковое меню с помощью плагина 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. Стили достаточно просты, вы можете в этом сами убедиться.

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

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


vk.com/club.ssdru

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



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

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

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


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

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.


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

В данном уроке мы рассмотрим процесс создания адаптивного меню которое подходит для экранов Retina, меню было разработано под вдохновением цветовой гаммы создателей игры Borderlands, компании Maliwan. Меню автоматически преобразуется в необходимый размер при определенном разрешении экрана, Чтобы меню отлично подходило под экраны retina, мы воспользуемся иконическим шрифтом, чтобы иконки меню не теряли качества при масштабировании. и так, давайте посмотрим, что у нас с этого получилось.


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

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close