• 3161
  • 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.Пробуем ,смотрим,пишем

Можешь почитать и вот эту статейку " картинки"

mistakes

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

    irbees2008

    irbees2008 | 26.03.2015 - 22:17

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

    ответить

    Serg

    Serg | 26.03.2015 - 21:46

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

    ответить

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

Ваше мнение

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

Облако тегов

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