Вертикальное меню
Здесь вы узнаете, как сделать вертикальное меню при помощи CSS.
Вертикальное меню
Как сделать вертикальное меню
Шаг 1) Добавляем HTML:
Главная Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4
Шаг 2) Добавляем CSS:
.vertical-menu < width: 200px; /* Если нужно, задаем ширину */ >.vertical-menu a < background-color: #eee; /* Серый фон */ color: black; /* Черный текст */ display: block; /* Чтобы ссылки отображались друг под другом */ padding: 12px; /* Отступы */ text-decoration: none; /* Убираем у ссылок подчеркивание */ >.vertical-menu a:hover < background-color: #ccc; /* Темно-серый фон при наведении курсора */ >.vertical-menu a.active < background-color: #04AA6D; /* Зеленый фон для "активной/текущей" ссылки */ color: white; >
Вертикальное меню с прокручиванием
Если требуется сделать, чтобы вертикальное меню прокручивалось, задайте высоту height и добавьте свойство overflow :
Вертикальное меню на CSS
Вертикальное меню на CSS — это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?
HTML-код
Между тегами li прописываем ссылку a (# временная заглушка), внутри которой два блочных элемента span. В первом span — тег i с классом иконки, код которой был скопирован с сайта Font Awesome. Во втором span — название ссылки, то есть текст.
После подключения между тегами head иконочного шрифта Font Awesome — меню имеет вот такой вид.
CSS стили
Для начала на Google Font подберем привлекательный шрифт с поддержкой кириллицы, если вертикальное меню будет на русском.
Копируем код подключения выбранного шрифта и вставляем сверху в CSS файле.
В селекторе body пишем название выбранного шрифт и задаем ему размер.
body margin: 0;
padding: 0;
font-family: ‘Marck Script’, sans-serif;
font-size: 20px;
>
Позиционируем наше меню относительно окна браузера, отступая сверху на 10% и слева на 20%. Разумеется, что эти цифры взяты с «потолка», у вас они будут свои.
ul position: absolute;
top: 10%;
left: 20%;
>
Фиксируем ширину меню на 200 пикселях.
Мы дошли до пунктов меню списка. Убираем маркеры у пунктов li.
ul li list-style: none;
>
Обозначаем рамки сверху и снизу, отделяющие пункты меню друг от друга.
border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
margin: -1px 0;
Не хватает боковых рамок и разделителей между иконками и названий ссылок.
Рисуем правую рамку у тега a, который является строчным элемент, а вокруг строчного элемента рамку нельзя сделать. Поэтому отображаем тег a блочным элементом.
ul li a display: block;
>
Теперь можно и рамку задать, убрать подчеркивание ссылок и прописать цвет ссылок.
border-right: 1px solid #131313;
text-decoration: none;
color: #131313;
Не хватает ещё левой рамки.
Теги span — блочные элементы, внутри которых будет текст, поэтому span отобразим строчно-блочным элементом.
ul li a span position: relative;
display: inline-block;
>
Нам необходимо для первого span, внутри которого будет иконка, задать стили, отличающиеся от второго span. Для этого первый span обозначим псевдоклассом — span:nth-child(1) и стилизуем его отдельно. Установим правую и левую рамку и ширину.
ul li a span:nth-child(1) width: 30px;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
>
Иконки встанут посередине с полями по 10 пикселей во все стороны.
text-align: center;
padding: 10px;
Иконки будут темного цвета, размером 20 пикселей на красном фоне.
color: #131313;
font-size: 20px;
background: #f44336;
Во втором псевдоклассе, надо задать только поля.
ul li a span:nth-child(2) padding: 10px;
>
Если этот урок оказался слишком сложным для вас, то советую посмотреть полезный видеокурс — «Вёрстка сайта с нуля 2.0».
Теперь вертикальное меню приняло свой окончательный вид. Смотрите весь код и результат.
Создано 22.06.2018 10:45:30
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Меню для сайта
Не может быть сайт без навигаций в категорий представлены скрипты меню для сайта в разнообразном дизайне и оттенке цвета. Предназначено для того, чтоб пользователь или кто вошел на сайт, мог быстро адаптироваться где какой материал находиться. И вы можете найти для своего портала как по дизайну так и по его функциям, тот код который вам нужен.
Это неотъемлемая часть дизайна и безусловно очень большую роль играет в эффективности его. И здесь меню берет все на себя, оно будет расписано по категориям или как вам нужно и с ним будет намного легче найти ту информацию, которую вам нужно. Оно бывает как вертикальным так и горизонтальным, но выполняет одну функцию под названием функциональность.
Все про Андроид
Статистика сайта
Зарегистрировались:+ 0
Sitemap и RSS
Баннеры сайта
Популярные категории
Copyright © 2012 — 2023 «ZorNet.Ru» — все для вебмастера в создания и продвижение сайта
как сделать только вертикальную прокрутку в меню?
Здравствуйте,
Есть боковое меню (сайдбар), каждое новое подменю открывается слева направо и имеет фиксированную высоту, необходимо сделать так, чтобы когда пунктов много у подменю, то у него появлялся бы вертикальный скролл, для это прописываю overflow-y: auto; , но в таком случае подменю следующего уровня (те что правее) перестают отображаться и появляется горизонтальный скролл для них.
Непонятен механизм overflow-y: auto; , почему он влияет на горизонтальное пространство тоже?
Кусочек кода:
.menu__submenu < position: absolute; top: 0; left: 100px; height: 150px; width: 100px; overflow-y: auto; outline: solid blue 1px; >.menu__item
Отслеживать
задан 8 апр 2017 в 20:23
97 6 6 бронзовых знаков
Все верно. Ведь подменю находиться внутри меню, а у него ширина меньше нужного, вот и скролл появляеться. Что не так то?
8 апр 2017 в 22:25
@НазарКалитюк, но у подменю ведь абсолют, а значит он выбивается из потока и может выходить за рамки ширины родителя и так и происходит, пока не задано overflow-y , причем именно -y , то есть контроль по вертикали. Непонятен механизм этого свойства