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