Хаки и Скрипты Next Generation CMS : Меню и навигация, CSS : Стильное,полупрозрачное горизонтальное CSS3 меню с всплывающими пунктами при наведении

irbees2008 Опубликовано - 6 - февраля Меню и навигация

Адаптировал: 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.Пробуем ,смотрим,пишем

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

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

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

ответить

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

ответить

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