как сделать вертикальное меню css
Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню
Если вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.
Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.
Навигация по странице:
В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.
У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.
К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.
Пара слов о преимуществе выпадающих меню:
Вертикальное выпадающее меню вправо
к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.
Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.
Html для вертикального меню
Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:
Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.
Вертикальное выпадающее меню CSS
к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.
Вот эта строчка CSS
Посмотреть что у нас получилось в этом примере можно на скине:
Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:
Вот такой не сложный пример выпадающего меню у меня получился.
Это еще не конец, идем дальше.
Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.
Вертикальное выпадающее меню влево на CSS
к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)
Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.
Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:
Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:
CSS меню
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
Вертикальное меню Ормана Кларка: CSS3 версия
Далее в PSD серии Ормана Кларка его удивительное вертикальное меню. Мы создадим его с помощью CSS3 и jQuery, используя минимальное количество изображений.
Шаг 1. Основная HTML-разметка
Начнем с того, что создадим базовую разметку, пустой документ HTML5:
А теперь разметка для нашего меню; неупорядоченный список в контейнере.
Наконец, мы создаем подменю, помещая неупорядоченный список, вложенный в каждый из существующих элементов списка.
Итак, это может показаться сложным, но не смущайтесь. Сначала мы создали неупорядоченный список с пятью элементами списка, каждый из которых содержит якорь. Затем мы добавили вложенные неупорядоченные списки, каждый из которых содержит три элемента списка.
Я также добавил класс к каждому элементу списка, так что он упростит процесс оформления. Наконец, для чисел мы создали тег span внутри каждого якоря. Если вы просмотрите его в своем браузере, он должен выглядеть так:
Шаг 2: Плавающие шрифты
Использование для наших шрифтов (и других элементов) единиц em сделает их плавающими. Теперь, если мы изменим размер шрифта обертки (или наш размер по умолчанию в браузере), все меню будет настроено относительно этого. Пусть это вас не смущает, если вам нужна помощь в преобразовании шрифтов, я предлагаю вам посетить сайт pxtoem.com.
Шаг 3: CSS для главного меню
Мы добавим CSS3 градиент для фона, я забежал вперед и создал его с помощью GradientApp. Затем мы изменим шрифт, применим шрифт Helvetica Neue и белый цвет вместе с тенью для текста. Заметьте, что здесь мы не устанавливали размер шрифта. Это потому, что наш базовый шрифт составляет 13 пикселей для контейнера, который унаследовали наши якоря, поэтому нет необходимости добавлять его.
Отлично! Теперь всё начинает выглядеть лучше, и мы тоже получили структуру! Но как насчет того, чтобы добавить цвет фона, чтобы меню получилось лучше.
Совет: Вспоминаем EM
Из CSS выше вы можете видеть, что легко забыть, что на самом деле означают ваши em-единицы. Это хорошая идея оставить комментарии к вашим первоначальным расчетам, так что, когда вы вернетесь к своему коду в будущем, вы сможете понять то, что происходит. Помните формулу: желаемые px / родительские px = результирующие em и используйте приблизительный символ (≈), если вы округляете результат.
Шаг 4: CSS для подменю
Следующий шаг будет похож на предыдущий; мы снова добавим высоту и ширину, мы изменим фон на белый. На этот раз нам нужно изменить размер шрифта. Мы стремимся к 12px, поэтому, используя наш расчет желаемых px / родительских px = результирующие em, получаем 0.923em
Теперь всё выглядит очень хорошо!
Шаг 5: Наведение и активный стиль
Мы добавим стиль для наведения и активного состояний, это особенно важно когда меню развёрнуто! Мы также добавим нижнюю границу в активное меню. Теперь, если вы думаете, «почему мы не добавили активный класс?». Хорошо, мой друг, это то, что мы сделаем с помощью jQuery чуть позже.
Шаг 6: Иконки главного меню
Используя классы для каждого элемента списка, мы придадим им соответствующую исходную позицию для спрайта.
Примечание: Я создал этот спрайт с помощью приложения SpriteRight, если вы хотите поиграть со спрайтом, я включил изображения и файлы проекта в исходные файлы.
Шаг 7: Нумерация главного меню
Окажите, помните теги span, которые мы добавили? Они будут числами!
И снова, чтобы сделать его плавающим, мы будем использовать отступы, чтобы создать ширину и высоту. Мы используем em даже для радиуса границ; нам нужно это для того, чтобы, если текст будет больше, они могут стать непропорциональным. Я также добавил еще один стиль, при наведении указателя и активного класса для ссылки.
Шаг 8: Номера подменю и стрелки
Наконец, состояние наведения (спасибо участникам, которые указали на его отсутствие). Мы просто применяем более темный цвет (#32373D) к тегу якоря, псевдо-стрелке и числу в теге span.
Теперь всё выглядит довольно здорово? Я думаю, что пришло время добавить некоторые функциональные возможности!
Шаг 9: время jQuery
Теперь добавьте в нижнюю часть вашего html-документа до закрытия тега
Создание и оформление меню
Основы верстки
Код простейшего меню будет выглядеть так:
Примечание
— Куда?
— В css-файл!
— В какой?
Хорошим тоном считается все стили сайта оформлять одним сжатым файлом. Но на время разработки гораздо удобнее иметь отдельные файлы для определенных элементов страницы, в данном случае для навигационного меню.
Позже код можно будет перенести в общий файл, а этот удалить (или отключить).
Как прописываются стилевые правила для меню
Необходимо создать классы, и прописывать стили уже для них. Потому что если задавать стили непосредственно для тегов, например:
то это правило будет распространяться и на все ссылки, включенные в списки за пределами меню! Кроме того, на сайте может быть несколько меню различного оформления.
Каким тегам нужно присваивать классы
Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.
При этом всегда надо держать в уме, что навигационный блок находится в определенном внешнем блоке сайта и его местоположение и некоторые свойства, например связанные с внешними отступами или направлением выпадения подменю (подробнее об этом в материале «Выпадающее меню») зависят от внешних классов глобальной разметки сайта.
Какие имена должны быть у классов
Первый отвечает за цветовое оформление всех элементов и, в тоже время, дает понять что относится к меню.
Второй идентифицирует список как собственно меню.
Внимание!
Старайтесь выбирать имена для классов не только внятные, но и уникальные. В противном случае они могут конфликтовать с уже существующими классами.
Группировка стилей по классам
На самом деле, все очень просто. Изначально, на этапе создания нужно группировать стили тематически и включать их в соответствующие классы.
Простое вертикальное меню
Исходный html-код меню будет выглядеть так:
Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).
Сброс и установка стилей по умолчанию
Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.
Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.
Цветовое оформление
Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:
Примечание
На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.
Замечание
Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.
Разделители пунктов
Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!
Выпадающее меню (многоуровневое)
До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:
Изначально любое меню нужно создавать как многоуровневое!
В многоуровневом меню один или несколько пунктов могут содержать вложенные меню с подпунктами, которое в исходном состоянии скрыто (не обязательно, но будем рассматривать именно этот вариант). При наведении на родительский пункт осуществляется вывод подменю.
За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.
HTML-код 2-х уровневого меню:
Разбиваем на несколько этапов:
Цветовое оформление
Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню.
Позиционирование и скрытие
Вывод
Информация
Подменю выпадающеее влево
Если навигационное меню расположено в правой колонке, то будет логично если подменю выпадает слева. В противном случаее оно может оказаться за пределами экрана.
Простая анимация
Что мы будем анимировать. В данном случае, эффекты довольно простые:
Я не стал добавлять специальный класс для эффектов анимации, потому что, как вы ниже сами увидите, все делается очень просто путем добавление нескольких строчек кода css к уже существующим классам.
Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.
Переопределение существующих стилей:
Скрытие подменю. Вариант 2
Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.
Раздвижное меню-аккордеон
Несколько слов вступления
Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.
Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.
После этого добавим стили, для закрытого и раскрытого аккордеона:
Горизонтальное меню
По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.
Чтобы не усложнять разметку и оформление, последовательно создадим горизонтальное выпадающее меню с нуля, со своими классами.
В итоге наше меню будет выглядеть так:
За основу возьмем код вертикального выпадающего меню и заменим классы:
Разметка
Что было сделано:
Пояснения:
Разметка выпадающего меню
Рассмотрим некоторые особенности:
Оформление
Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.
Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:
Теперь контейнер будет вести себя более дружелюбно и можно его оформлять
Для выделения активного пункта меню была применена тень.
На этом цветовое оформление можно считать завершенным. Теперь с легкостью можно подкорректировать цветовую гамму, или создать несколько классов для разных вариантов оформления.
Дополнительно
CSS — как сделать вертикальное меню?
Всем привет! Продолжаем изучать CSS, и сегодня мы будем рассматривать пример создания вертикального выпадающего меню или по-другому его еще называют меню «аккордеон». Меню будем делать на чистом CSS без использования JavaScript, хотя если использовать JS, меню получится намного лучше, но в этом уроке мы изучаем CSS.
Примечание! Если Вы до этого не встречались с технологией CSS (Cascading Style Sheets), то для освоения данного урока сначала прочитайте статью Основы CSS для начинающих.
Важно! Пример ниже, тестировался и точно работает, со всеми эффектами, в браузерах:
Некоторые эффекты не работают:
Меню вообще не работает:
Ну что давайте приступим, сразу скажу, что меню делается не сложно, да и получилось оно достаточно простое, сейчас Вы все сами увидите.
В сегодняшнем уроке мы рассмотрим и научимся использовать следующие:
Для того чтобы все было понятней, весь код я подробно комментирую, каждый селектор и каждое свойство. Чтобы у Вас все работало, скопируйте весь код и создайте файл с расширением html и вставьте этот код туда. Советую использовать при редактировании, для удобства, текстовый редактор NotePad++ и в нем поставьте синтаксис CSS, после чего у Вас все комментарии станут подсвечиваться, если они Вам не потребуются, то просто удалите их.
Исходный код выпадающего меню на CSS
Ну что получилось? Все понятно? Я думаю да, если нет, пишите в комментариях, постараюсь помочь. В дальнейшем будем изучать CSS на более сложных примерах. Удачи!