Дизайнеры постоянно создают макеты сайтов с наклонными меню, потому что такие меню «выглядят по-другому». Для понимания, что главным требованием к пользовательскому интерфейсу является четкость и ясность, требуется время. Это не означает, что меню на сайте должны быть однообразными и скучными: при использовании обычного горизонтального меню остается много возможностей. Нас заинтересовала возможность создания пунктов меню в наклонной рамке с помощью чистого CSS. 

Разметка HTML для этого примера очень проста. Здесь воплощено меню для выдуманной компании «Quantum Foam», специализирующейся на захватывающих симуляциях экзотических мест:

<ul id="quantum-navigation">
        <li id="everest"><a href="#">Everest</a>
        <li id="mars"><a href="#">Mars</a>
        <li id="belize"><a href="#">Belize</a>
        <li id="monaco"><a href="#">Monaco</a>
</ul>

Код CSS поставил перед нами несколько интересных задач. Сначала список должен быть наклонен с помощью трансформации наклона, а элементы списка помещены бок о бок:

ul#quantum-navigation {
        transform: skewX(-15deg);
        font-family: Agenda-Medium, Agenda, Arial Narrow, Arial, sans-serif;
        text-transform: uppercase; font-size: 1.5rem;
        line-height: 0;
        padding-left: 0;
}
ul#quantum-navigation li {
        width: 12rem;
        box-shadow: 8px 0 3px rgba(0,0,0,0.2);
        position: relative;
        background-color: #ff0;
        background-size: 100% 120%;
        background-repeat: no-repeat;
        overflow: hidden;
}
ul#quantum-navigation li,
        ul#quantum-navigation li a {
                display: inline-block;
                transition: .8s;
}

Обратите внимание, что приставки производителей не показаны в коде ради краткости и ясности.

Каждому элементу списка заданы фиксированная ширина и тень справа. У каждого элемента будет собственное фоновое изображение, так что общие свойства и значения также объявлены тут.

Элементы накрывают друг друга, но в обратном порядке: т. е., первая ссылка накрывает вторую, вторая накрывает третью и так далее, что противоположно тому, как браузер располагает элементы при нормальных условиях. Каждому элементу задано относительное позиционирование, чтобы добиться этого эффекта.

Трансформации CSS будут унаследованы текстом ссылки. Чтобы решить эту проблему, нужно наклонить ссылки в противоположную сторону:

ul#quantum-navigation li a {
        transform: skewX(15deg);
        text-decoration: none;
        color: #fff;
        text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
        letter-spacing: .25rem;
        width: 18rem;
        background: rgba(0,0,0,0.3);
        margin-left: -1rem;
        padding: 1rem 3rem;
}

Добавление тени текста, увеличение расстояния между буквами и затемнение фона делает текст более читабельным. Обратите внимание, что ссылки на 50% шире, чем элементы списка, внутри которых они находятся, чтобы они всегда полностью заполняли свой блок. Использование свойства скрытия переполнения для родительских элементов не допускает вылезания ссылок за рамки.

После этого элементам списка заданы неповторяющиеся фоновые изображения и порядок отображения. Некоторые элементы отодвинуты влево для лучшей композиции:

#everest {
        z-index: 5;
        background-image: url(everest.jpg);
}
#mars {
        z-index: 4;
        background-image: url(mars.jpg);
        left: -20px;
}
#belize {
        z-index: 3;
        background-image: url(belize.jpg);
        left: -40px;
}
#monaco {
        z-index: 2;
        background-image: url(monaco.jpg);
}

При наведении указателя мыши на элемент списка происходят два события: ссылка светлеет, т. е., исчезает темный фон, и элемент сдвигается вправо:

ul#quantum-navigation li:hover {
        transform: translateX(10px);
}
ul#quantum-navigation li:hover a {
        background: rgba(0,0,0,0);
}

Меню автоматически адаптивное в том смысле, что элементы списка перенесутся влево, если не будет достаточно места, чтобы показать меню целиком. Но существует много других возможностей, которые Вы можете испробовать.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание древовидного разворачивающегося меню
• Создание оригинального выпадающего меню
• Создание скошенных углов с использованием CSS3