Хаки и Скрипты Next Generation CMS

Экономное размещение менюшки с overlay эффектом

irbees2008 irbees2008 Опубликовано - 10 - апреля Меню и навигация
3082 - 2
  • Адаптировал: irbees
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Всем привет. Давно не было публикаций,поскольку ничего нового для себя не находил,но сегодня нашел довольно интересное меню, демо вы наверное уже посмотрели ,при клике по кнопке, поверх нашего контента накладывается меню, пункты которого дополнены иконками из шрифта, позволяя избежать пикселизации картинок, так как иконки выполнены в векторе. Смотрится обалденно и экономит место на странице.
Иконки подгружаются из стиля font-awesome.css, в котором указаны параметры иконок и вызываются файлы шрифтов.
Итак приступим
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папки css и font в папку с вашим шаболоном.
2.Редактируем файл main.tpl добавляем наше меню

Код:
<nav id="menu">

<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>

<div class="box">
<ul>
<li><a href="#"><i class="icon-home"></i> главная</a></li>
<li><a href="#"><i class="icon-file-alt"></i> о нас</a></li>
<li><a href="#"><i class="icon-copy"></i> вакансии</a></li>
<li><a href="#"><i class="icon-envelope"></i> контакты</a></li>
</ul>
</div>

</nav>
3.В файл стилей добавляем стили нашего меню
Код:
@import url('css/font-awesome.css');

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }



#menu .box {
position: fixed;
text-align: center;
overflow: hidden;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(0,0,0,0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#menu ul {
position: relative;
top: 20%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#menu li {
display: inline-block;
margin: 20px;
}

#menu li a {
border-radius: 3px;
padding: 15px;
border: 1px solid transparent;
text-decoration: none;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#menu li a:hover { border-color: #fff; }

#menu li a i {
margin-right: 5px;
font-size: 24px;
}

#toggle-nav-label {
color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 30px;
font-size: 16px;
display: block;
cursor: pointer;
position: relative;
z-index: 500;
width: 30px;
height: 30px;
border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box {
opacity: 1;
z-index: 400;
}

#toggle-nav:checked ~ .box ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label {
background: #fff;
color: rgba(0,0,0,0.8);
}
4.Вот и все ,пользуемся.

Можешь почитать и вот эту статейку " 30 онлайн-инструментов для тестирования сайтов"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Google
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.405сек
  • Потребление памяти: 5.171 Mb 
  •   Яндекс.Метрика