Как сделать меню сайта в html и css вертикальное движущие

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

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

Плавность раскрывающихся элементов подменю придадут красоту и стилизацию, поэтому будем использовать css свойство transition. Изначально все подпункты меню будут свернуты, кроме основного раздела.

Все подпункты меню свернуты Все подпункты меню развернуты Второй подпункт меню развернут. Нумерация идентификаторов начинается с 0 Два подпункта меню развернуты

Как реализовать в вашем аккордеоне, чтобы открытая группа позиции в меню соответствовала открытой странице конкретной группы?

Присваиваете открытой группе номер можно название страницы, соответствующий странице и соответственно код, отвечающий за отображение этой группы.

Здравствуйте. Как сделать, чтобы n1. при клике на подкатегорию, категория должна оставаться открытой и быть активной border-left,n2. при клике по категории с открытыми подкатегориями, эта категория так же должна закрываться?

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

Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.

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

HTML-код

После подключения между тегами 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;
>

Обозначаем рамки сверху и снизу, отделяющие пункты меню друг от друга.

Не хватает боковых рамок и разделителей между иконками и названий ссылок.

Рисуем правую рамку у тега a, который является строчным элемент, а вокруг строчного элемента рамку нельзя сделать. Поэтому отображаем тег a блочным элементом.

ul li a display: block;
>

Теперь можно и рамку задать, убрать подчеркивание ссылок и прописать цвет ссылок.

Не хватает ещё левой рамки.

Теги span - блочные элементы, внутри которых будет текст, поэтому span отобразим строчно-блочным элементом.

ul li a span position: relative;
display: inline-block;
>

Нам необходимо для первого span, внутри которого будет иконка, задать стили, отличающиеся от второго span. Для этого первый span обозначим псевдоклассом - span:nth-child(1) и стилизуем его отдельно. Установим правую и левую рамку и ширину.

Иконки встанут посередине с полями по 10 пикселей во все стороны.

text-align: center;
padding: 10px;

Иконки будут темного цвета, размером 20 пикселей на красном фоне.

Во втором псевдоклассе, надо задать только поля.

ul li a span:nth-child(2) padding: 10px;
>

Если этот урок оказался слишком сложным для вас, то советую посмотреть полезный видеокурс - "Вёрстка сайта с нуля 2.0".

Теперь вертикальное меню приняло свой окончательный вид. Смотрите весь код и результат.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Меню – один из главных элементов на веб-странице. Практически на каждом сайте используется меню, хотя сегодня они настолько разнообразны, что некоторые даже сложно такими назвать. Сегодня мы попробуем сделать простое, но практичное вертикальное меню, используя только CSS и HTML.

Разметка для меню очень проста – вложенный список.

Дальше идут наши стили. Я постарался добавить немного комментариев в них, и даже не знаю, что еще сказать тут. Все просто – настраиваем нужный нам вид меню, а потом с помощью селектора :hover подсвечуем наведенный элемент.

Готово!

Наше простое вертикальное меню готово. Дальше все зависит от вашей фантазии и потребностей. Часто бывает нужным добавить в такое меню подпункты, что делает его “аккордеон” меню. Читайте наши следующие статьи, что бы подробнее узнать о нем.

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент нашего списка будет содержать по одной ссылке:

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

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

Горизонтальное меню

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

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

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

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

Просторы всемирной сети стремительно растут, размещая огромное множество различных веб-сайтов, каждый из которых стремится привлечь внимание посетителей и заинтересовать их.

Способы покорения людских сердец выбираются разные — от применения Flash анимации, использования баннеров и смелых дизайнерских решений до различных звуковых и визуальных эффектов.

Однако не стоит забывать, что сайт — это в первую очередь источник информации, поэтому удобству представления контента на сайте веб-разработчик должен уделять особое внимание и именно поэтому навигация, понятная посетителю на интуитивном уровне, так важна.

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

На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.

В таком случае следует использовать выпадающее меню на CSS, при клике на которое появляются дополнительные ссылки на подразделы.

Разновидности меню в CSS

Существует сразу несколько видов и типов CSS меню:

Главное меню . Это список определённых ссылок на ключевые разделы веб-сайта.
Дополнительное меню . Такое меню имеет иерархическую структуру и бывает трёх типов:
- Выпадающее меню . Раскрывается при наведении курсора мыши на пункт;
- Всплывающее меню сайта . Раскрывается при клике на определённом пункте;
- Статическое дополнительное меню для CSS . Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

В конечном итоге получается подобное горизонтальное меню :

Код вертикального меню записывается так:

Вертикальное меню , полученное при помощи данного кода, выглядит так:

Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:

Получаем такое выпадающее меню :

Как вы видите, достаточно простая HTML разметка и всего несколько строк CSS кода позволяют создать простое, но стильное меню, которое обязательно найдёт свое место в каком-либо веб-сайте. Обязательно попробуйте реализовать что-то подобное самостоятельно.

Читайте также: