Как сделать горизонтальное меню с наклоном?
Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).
Рис. 1. Вид меню с наклонными пунктами
Решение
За трансформацию элемента отвечает стилевое свойство transform , в качестве его значения используется функция skewX , которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg — это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.
Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.
Пример 1. Наклон пункта меню
HTML5 CSS3 IE Cr Op Sa Fx
В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block . Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.
Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block .
Как создать горизонтальное меню с прокруткой для сайта?
В этой статье мы пошагово рассмотрим как создать горизонтальное меню с прокруткой и добавить к нему несколько улучшений, которые позволят отображать активный элемент по центру и прокручивать меню с помощью удерживания кнопки мыши.
Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.
Создание разметки
Вид горизонтального меню с прокруткой без стилей:
Написание CSS кода меню
1. Зададим стили для .nav-scroller , .nav-scroller__items и .nav-scroller__item :
.nav-scroller { overflow-y: hidden; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .nav-scroller__items { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .nav-scroller__item { color: #424242; display: flex; padding: 0.5rem 1.25rem; text-decoration: none; }Список используемых свойств:
- overflow-y: hidden — скрываем контент, который будет выходить за нижнюю границу элемента .nav-scroller ;
- background-color: #fff — устанавливаем цвета фона .nav-scroller ;
- box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) — добавляем тень к .nav-scroller ;
- display: flex — делаем элемент flex-контейнером;
- overflow-x: auto — разрешаем прокрутку по горизонтали, она будет доступна при необходимости;
- white-space: nowrap — запрещаем переносить текст на новую строку, даже если он не помещается в ней;
На этом этапе меню будет иметь следующий вид:
2. Добавим правую границу ко всем элементам кроме последнего:
.nav-scroller__item:not(:last-child) { border-right: 1px solid #eee; }
3. Выделим другим цветом фона активный пункт меню:
.nav-scroller__item_active { background-color: #fff59d; }Указание активного пункта меню будем выполнять посредством добавления к нему класса nav-scroller__item_active .
4. Добавим стили, которые будут изменять фон пункта меню при наведении на него курсора:
/* для всех пунктов кроме активного */ .nav-scroller__item:not(.nav-scroller__item_active):hover { background-color: #f5f5f5; } /* для активного пункта */ .nav-scroller__item_active:hover { background-color: #fff176; }
Вот так довольно просто можно создать меню с горизонтальной прокруткой.
Горизонтальная прокрутка будет появляться только тогда, когда пункты не будут помещаться в контейнер. Перемещение по меню в этом случае будет осуществляться посредством бегунка полосы прокрутки или смахиванием (свайпом влево или вправо) на сенсорных устройствах.
Улучшения для меню с горизонтальной прокруткой
1. Выравнивание активного пункта по центру
Для того чтобы при открытии страницы пункт активного меню отображался по центру можно написать небольшой код на JavaScript:
JavaScript
document.addEventListener('DOMContentLoaded', () => { const $navItems = document.querySelector('.nav-scroller__items'); const $navItemActive = $navItems.querySelector('.nav-scroller__item_active'); if (!$navItemActive) { return; } const navItemsRect = $navItems.getBoundingClientRect(); const navItemActiveRect = $navItemActive.getBoundingClientRect(); const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2; $navItems.scrollLeft = navItemsLeft; });Этот скрипт после готовности DOM дерева будет автоматически прокручивать меню так, чтобы элемент с классом nav-scroller__item_active оказывался если это возможно по центру.
2. Прокручивания меню с помощью удерживания кнопки мыши
В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).
Для этого в CSS добавим следующий код:
.nav-scroller__items::-webkit-scrollbar { display: none; }Это правило выключит отображение полосы прокрутки.
После этого на страницу подключим файл dragscroll.js :
Добавим класс dragscroll к прокручиваемому элементу:
Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery
От автора: Часто бывает так, что на одной странице необходимо разместить текст большого объема – какую-нибудь научную статью или что-то в этом роде. При этом может возникнуть требование отказаться от разделения статьи на страницы в силу технических ограничений или специфики текста. Казалось бы – и что в этом такого? Небольшой дискомфорт вызывает необходимость постоянно возвращаться (прокручивать) вверх страницы для того, чтобы добраться до навигации сайта и перейти в интересующий раздел. Попробуем решить эту проблему. Создадим горизонтальное анимированное меню с фиксированной позицией на странице средствами CSS и jQuery.
Средствами CSS можно создать навигационное меню, которое будет иметь фиксированное положение в окне браузера, независимо от прокрутки содержимого документа. Этот обучающий материал шаг за шагом показывает процесс создания такого меню. Итак, давайте создадим горизонтальное меню для сайта.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг1. Разметка HTML
Для начала определимся, что мы хотим видеть на навигационной панели, и как она будет работать. Пусть в левой части окна, прямо возле края страницы, будет располагаться что-то вроде закрепленного «ярлычка», который будет плавно «выезжать» когда пользователь будет наводить на него курсор.
На навигационной панели будет стандартный набор: ссылки на основные разделы сайта, выполненные в виде пунктов меню и простая форма для поиска по сайту. Разметка для всего этого будет приблизительно следующей:
Все должно выглядеть приблизительно так:
Как видим, пункты навигационного меню собраны в неупорядоченный (маркированный) список. Далее идет простая форма поиска с одной кнопкой и одним полем для ввода текста (форма «упакована» в дополнительный блок div – это может понадобиться для CSS). В конце идет элемент span, который содержит текст для «ярлыка». Все это заключено в «контейнер»
Шаг 2. CSS
Стили начнем прописывать, начиная с главного «контейнера» навигационной панели
float : left ;
position : fixed ;
padding-right : 10px ;
background : #454545 ;
background : -moz-linear-gradient ( top, #454545, #737373 ) ;
background : -webkit-gradient ( linear, center top, center bottom from ( #454545, ) , to ( #737373 ) ) ;
opacity : 0.9 ;
-moz-border-radius : 0px 10px 10px 0px ;
-webkit-border-bottom-right-radius : 10px ;
-webkit-border-top-right-radius : 10px ;
border-radius : 0px 10px 10px 0px ;
border : 1px solid #eee ;
-moz-box-shadow : 0px 0px 2px #444 ;
-webkit-box-shadow : 0px 0px 2px #444 ;
box-shadow : 0px 0px 2px #444 ;
Сначала мы задаем фиксированную позицию контейнера position: fixed; – это ключевой момент для всей конструкции. Теперь меню будет на одном месте, несмотря на прокручивание страницы. Свойства left и top задают жесткое позиционирование контейнера относительно краев клиенской области браузера. Два свойства background: -moz-linear-gradient(top, #454545, #737373); и background: -webkit-gradient(linear, center top, center bottom from(#454545,), to(#737373)); позволяют сделать задний фон панели градиентным, перед этим мы определяем свойство background: #454545; чтобы обеспечить совместимость с браузерами без поддержки CSS3. Следующее свойство CSS3 – border-radius. С его помощью мы делаем нижний и верхний правые углы закругленными с радиусом закругления 10 пикселей. Определив при помощи свойства border внешнюю границу (рамку) толщиной 1 пиксель, далее при помощи CSS3-свойств box-shadow создам внешнюю тень от панели – таким образом, достигая более эффектного обрамления.
Далее прописываем свойства для списка элементов навигационной панели
#navigation < list-style : none ; padding : 0 ; float : left ; margin-left : 80px ; border-left : 1px solid #333 ; #navigation li < float : left ;
Тот, кто хотя бы раз в жизни превращал маркированный HTML-список в горизонтальное навигационное меню при помощи CSS, должен понять предназначение этих определений стилей. Свойство margin-left носит «подстроечный» характер – с его помощью можно «подгонять» левый край первого элемента меню к левой границе области содержимого страницы. Использование border-left в данном конкретном случае носит спорный характер – о нем мы поговорим немного позже.
Далее задаем стили для ссылок внутри элементов навигационного меню – грубо говоря, делаем из ссылок кнопки на навигационной панели:
#navigation li a < float : left ; padding : 20px 0px ; width : 100px ; text-decoration : none ; font-size : 18px ; font-family : Arial, Helvetica, sans-serif ; border-right : 1px solid #333 ; border-left : 1px solid #888 ; text-align : center ; color : #dede5d ; text-shadow : 3px 1px 3px #111 ;
Это в принципе обычные правила CSS для ссылочных элементов горизонтального навигационного меню. Может показаться странным, что везде используется свойство float: left.
С помощью этого свойства можно «выдрать» элемент из общего потока отображения HTML-страницы и заставить его вести себя так, как нужно нам. В данном случае нам надо, чтобы ссылки, которые являются по умолчанию строчными (inline) элементами вели себя как блочные элементы (block) чтобы мы могли задать для них ширину и высоту, а также внутренние поля и внешние отступы. Свойства border-right и border-left позволяют имитировать эффектную границу – она как будто выгравирована на панели; это достигается за счет разницы цветов границ соседних элементов. Но тут возникает проблема – крайние элементы меню слева и справа будут иметь только одну границу:
(обратите внимание на правую границу крайнего справа элемента меню)
Для крайней правой границы это можно решить просто – сразу за ней будет идти блок с формой поиска, для него можно задать левую границу как для элемента меню и на этом дело казалось бы в шляпе, но ведь крайний левый элемент первый в списке, до него нет ни одного элемента, которому можно было бы задать правую границу border-right: 1px solid #333; но границу можно задать для левого края самого списка – помните, для селектора #navigation мы задавали правило border-left: 1px solid #333; — теперь вам должно стать понятно его предназначение. Решение, как я уже говорил, спорное, но ничего не мешает нам его применить, пока список и его верхний (в меню – левый) элемент не имеют внешних отступов и внутренних полей. При помощи псевдокласса CSS :hover создаем эффект визуального выделения пункта меню при наведении на него курсора: