Автор

Боковое меню с помощью плагина 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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close