Slidx - выдвижное скользящее меню - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


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

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

Установка

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

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

Код
<script type="text/javascript" src="/js/slidx.js"></script>  
<a href="javascript://" id="slidx-button">Меню</a>  
<div class="slidx-menu">$SMENU_1$</div>


Понятно, что кнопку можно поставить куда угодно и оформить как нужно, но по умолчанию она находиться в фиксированном плавающем положении сверху окна браузера, поэтому неважно куда ее прописывать. Главное не меняйте ее идентификатор - 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;}

Важно!

При копировании материала указывать ссылку на источник.

- 375
- 27-Мая-2017
- 2
- 0
Материал разместил:

Похожий материал
Статьи сайта