Всем привет дорогие друзья!
Сегодня я решил выложить очень удобно и современное меню Retina для сайтов uCoz. самая главная его преимущество перед другими меню это адаптивность а точнее сказать данное меню будет уменьшатся в свзя окошком вашего монитора и браузера в частности.
Я нашёл данное меню на отличном сайте pcvector.net где есть множество отличных скриптов и примеров для сайта. Я беру некоторые на заметку и подгоняю под сайты uCoz для ваше ознакомления и для вашего пользования.
И так давайте же установим мы с вами это красивое и яркое меню .
Установка: Адаптивного Retina меню для сайтов
HTML код меню
В первую очередь вам нужно установить сам код меню в то место на сайте где оно будет полезно вам и вашим посетителям .
Код <nav id="menu" class="nav"> <ul> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-home"></i> </span> <span>Главная</span> </a> </li> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-services"></i> </span> <span>Услуги</span> </a> </li> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-portfolio"></i> </span> <span>Портфолио</span> </a> </li> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-blog"></i> </span> <span>Блог</span> </a> </li> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-team"></i> </span> <span>Команда</span> </a> </li> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-contact"></i> </span> <span>Контакты</span> </a> </li> </ul> </nav>
javascript меню
Теперь нам нужно проследовать в нижнюю или в верхнюю часть сайта и установить javascript для нашего меню и там же прописана ссылка на стили меню.
Код <script>
// Функция для изменения класса
var changeClass = function (r,className1,className2) {
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
if( regex.test(r.className) ) {
r.className = r.className.replace(regex,' '+className2+' ');
}
else{
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
}
return r.className;
};
// Создание кнопки меню в JS для маленьких экранов
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Меню</button>');
// Переключение класса по клику - показать/скрыть меню
document.getElementById('menutoggle').onclick = function() {
changeClass(this, 'navtoogle active', 'navtoogle');
}
</script>
<script src="/js/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="/css/component.css" />
И последнее вам нужно скачать архив и загрузить папки css, fonts и js в файловый менеджер вашего сайта.
Информация:
Для того что бы изменять данное меню Адаптивное Retina меню вам нужно открыть текстовый документ component который находится в папке css в скачаном архиве .
На этом я заканчиваю и буду рад если вам это пригодилось!
|