• 2830
  • 2
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

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

Код:
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
3.Стили добавляем в файл стилей вашего шаблона.Подключаем шрифт с иконками, но это необходимо только для нашей демонстрации, у вас иконок может и не быть.
Код:
@font-face {
font-family: 'LigatureSymbols';
src: url('LigatureSymbols-2.05.eot');
src: url('LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('LigatureSymbols-2.05.woff') format('woff'),
url('LigatureSymbols-2.05.ttf') format('truetype'),
url('LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
}
nav {
font-family: 'LigatureSymbols';
margin : 50px auto;
width : 260px;
}
ul {
border-radius : 3px;
margin:0;
padding:0;
}
ul:after , ul:before {
display : block;
content : '';
}
ul:after {
clear : both;
}
li {
list-style-type : none;
background : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
float : left;
cursor : pointer;
padding : 3px 10px;
border-top : 2px solid rgba(200,200,255,0.5);
border-bottom : 2px solid rgba(50,50,50,0.4);
}
li:first-child {
border-radius : 5px 0 0 5px;
}
li:last-child {
border-radius : 0 5px 5px 0;
}
li a {
display : block;
padding : 10px 13px;
font-size : 26px;
text-decoration : none;
border-radius : 5px;
position : relative;
top : 0;
color : #FFF;
transition : all .4s;
}
li:hover a {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
li a:after {
display : block;
content : '';
position : absolute;
top : 100%;
left : 42%;
border-style : solid;
border-color : transparent;
border-width : 5px 5px 0 5px;
transition : all .4s;
}
li:hover a:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}

4.Вариант 2 ,добавляем этот код в main.tpl туда где вы хотите поставить меню.
Код:
<nav class="menu2">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a class="selected" href="#">Контакты</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>

5.Стили.
Код:
.menu2 {
width : 394px;
}
.menu2 a {
font-family : georgia;
font-size : 14px;
font-style : italic;
text-transform : capitalize;
}
.menu2 li {
border-right : 1px solid rgba(200,200,255,0.5);
border-left : 1px solid rgba(40,40,40,0.2);
}
.selected {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
.selected:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
Все сделано на стилях html,без js.Пробуем ,смотрим,пишем

Можешь почитать и вот эту статейку "Склоняем "комменты" по количеству на TWIG"

mistakes

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

    irbees2008

    irbees2008 | 26.03.2015 - 22:17

    Serg, Все повторяем как и здесь,должно работать без проблем,единственное что может быть это конфликт стилей но это поправимо.

    ответить

    Serg

    Serg | 26.03.2015 - 21:46

    Добрый день. Могли бы вы описать интеграцию в шаблон на wordpress с bootstrap?

    ответить

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

Ваше мнение

Ваше отношение к TWIG
Результаты

----