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