Slidx - выдвижное скользящее меню

2124 просмотров Alan_Writer 31.03.2016

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

Но вот все же нашел один попроще - который отлично работает и на uCoz. Несмотря на отсутствие лишних наворотов, меню все же вполне соответствует таковым в смартфонах. Есть и некоторые настройки, и что самое главное - оно работает с обычным кодом вызова стандартного меню, то есть заполнять в шаблоне его не нужно, просто устанавливаем, а пункты добавляем - через ПУ.

Установка

1. Качаем архив и заливаем скрипт в корневую папку js. Если такой нет - создайте.

2. Поближе к закрывающему тегу body на все страницы сайта, а значит лучше просто в нижнюю часть сайта, вставьте скрипт, блок меню, и кнопку его открытия/закрытия:

Код

Понятно, что кнопку можно поставить куда угодно и оформить как нужно, но по умолчанию она находиться в фиксированном плавающем положении сверху окна браузера, поэтому неважно куда ее прописывать. Главное не меняйте ее идентификатор - slidx-button, а если меняете - то замените его и в скрипте. Там же в самом начале скрипта есть блок "настройки", где можно произвести небольшие регулировки. Они все подписаны, чтоб было понятней.

3. Ну и это в стили:

Код

.slidx-menu {
  background:#f9f9f9;
  font:15px 'tahoma';}

.slidx-open {
  box-shadow:0 0 25px 1px #333;}

.slidx-menu ul {
  margin:0;
  padding:0;}

.slidx-menu li {
  list-style:none;}

.slidx-menu li:hover {
  background:#eee;}

.slidx-menu li a {
  padding:20px 25px;
  display:block;
  text-decoration:none;
  color:#0080bc;}

#slidx-button {
  background:#ddd;
  padding:10px 30px;
  border-radius:3px;
  margin:20px;}

#slidx-button:hover {
  background:#ccc;
  cursor:pointer;}

Ну вот и все, ребятки. =ЧАО ПОКА=

Теги: скользящее, Sliding, Меню, выдвижное