ДИАГОНАЛЬНОЕ МЕНЮ НА CSS


ДИАГОНАЛЬНОЕ МЕНЮ НА CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

ДИАГОНАЛЬНОЕ МЕНЮ НА CSS

HTML

Разметка не представляет из себя ни чего сложного. Но следует обратить внимание, что внутри анкора мы текст дополнительно помещаем в тег SPAN. Зачем так поступили увидим, когда посмотрим стили.

<nav>
    <ul>
        <li><a href="#"><span>Главная</span></a></li>
        <li><a href="#"><span>Статьи</span></a></li>
        <li><a href="#"><span>Портфолио</span></a></li>
        <li><a href="#"><span>Новости</span></a></li>
        <li><a href="#"><span>Услуги</span></a></li>
        <li><a href="#"><span>Контакты</span></a></li>
    </ul>
</nav>

 

CSS

Теперь «украсим» нашу разметку. Начнем от малых размеров экрана и по возрастающей. Точка останова (breakpoint) будет при ширине экрана 690px. На больших мониторах увидим меню во всей красе, со скосами и фоном. На маленьких экранах уберем и фон и перекосы, можно конечно было все сохранить, уменьшив лишь размер шрифта и отступы — но тут вы сами решите, как будет лучше именно для вас.
Элементам списка назначим свойство display:inline-block, для анкоров — display:block (чтобы заполнить все пространство), SPAN — также будет блочным.
В точке 690px мы применяем свойство transform:skewX(deg) к элементам списка (LI), где n — угол скоса. Анкоры будут наследовать это свойство, а вот текст мы выровняем — не нужно, чтобы он был перекошен — для этого нам и нужен SPAN — которому задаем skew(10deg) (в противовес отрицательному):

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
nav li {
    display: inline-block;
    margin: 0 5px;
    transition: all 0.3s;
}
nav a {
    display: block;
    color: #285064;
    transition: all 0.3s;
}
nav a:hover {
    color: #12242d;
}
nav span {
    display: block;
}
 
@media all and (min-width: 690px) {
    nav li {
        margin: 0;
        transform: skewX(-10deg);
    }
    nav a {
        padding: 10px 20px;
        color: #fff;
        background-color: #285064;
    }
    nav a:hover {
        color: #fff;
        background-color: #12242d;
    }
    nav span {
        transform: skewX(10deg);
    }
}

Эффект увидим только в современных браузерах, которые поддерживают CSS3 transition/transform.

ДЕМО     СКАЧАТЬ

 

Источник: pcvector.net

Previous Атрибуты товара на странице категории Opencart
Next Самые классные JQuery плагины за последние месяца

Suggested Posts

Сервисы и плагины: кросспостинг из WordPress

Полезные плагины на WordPress для сервисов Google часть-2

Скачать крутые и бесплатные админки в форматах PSD и Скетч

Модуль CSV Price Pro import/export v 4.1.7

Пользовательская страница для ошибки базы данных

Используем карты Google для увеличения посещаемости