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

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

irbees2008 irbees2008 Опубликовано - 10 - апреля Меню и навигация
3397 - 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.Вот и все ,пользуемся.

Можешь почитать и вот эту статейку "Яндекс Директ или Google Adsense ? Или где взять деньги на сайт? Или просто херня"

    {avatar}
    [profile][/profile]irbees2008[profile][/profile] 10 апреля 2016 [if-have-perm]| [edit-com][/edit-com] | [del-com][/del-com][/if-have-perm] {comment-short}[comment_full]

    читать полностью

    [/comment_full] [answer]
    --------------------
    Ответ от{name}
    {answer}[/answer] [quote]

    irbees2008');" style="cursor: pointer;">ответить[/quote]

    {avatar}
    [profile][/profile]irbees2008[profile][/profile] 10 апреля 2016 [if-have-perm]| [edit-com][/edit-com] | [del-com][/del-com][/if-have-perm] {comment-short}[comment_full]

    читать полностью

    [/comment_full] [answer]
    --------------------
    Ответ от{name}
    {answer}[/answer] [quote]

    irbees2008');" style="cursor: pointer;">ответить[/quote]

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Теги

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

Статистика

  • Caйт cущecтвуeт: 4631 день
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 619
  • Неопубликованных новостей: 8
  • Комментариев: 257
  • Зарегестрированных пользователей: 779
  • Онлайн всего: [6]
  • Гости: [5]
  • Поисковые роботы: [1] Google
  • Сегодня нас посетили: [8] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke, Google
  • SQL запросов: 40
  • Генерация страницы: 0.136сек
  • Потребление памяти: 4.177 Mb 
  •   Яндекс.Метрика