• 982
  • 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.Вот и все ,пользуемся.

Можешь почитать и вот эту статейку "Теги bdo"

mistakes

Это тоже интересно

    irbees2008

    irbees2008 | 30.01.2017 - 00:02

    Извеняюсь, отвалились аттачи, и не только в этой новости

    ответить

    iMaximum

    iMaximum | 28.01.2017 - 23:20

    Так а где сам архив со стилями и шрифтами? Откуда скачивать?

    ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

----