<
  • Главная
Статьи

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

Опубликовано: 01.09.2018

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

Как легко сделать горизонтальное меню HTML CSS (За 5 минут)

 

В этом уроке мы будем создавать горизонтальное меню на CSS . Конечно, можно изпользовать уже готовые решения, к примеру, нанять программистов для CMS Made Simple . Однако, вы же не ищете легких путей? :bully:


CSS3 для начинающих | #10 Создание горизонтального меню

Шаг 1 - HTML разметка  

Для начала необходимо создать элементы списка с тегом <a></a> для каждого элемента нашего горизонтального меню. Чтобы создать подменю необходимо добавить еще один дочерний список внутри родительского.


Выпадающее МЕНЮ на чистом CSS / HTML

 

<ul class="menu"> <li><a href="#">Ссылка №1</a></li> <li><a href="#">Ссылка №2</a></li> <li><a href="#">Выпадающий список</a> <ul> <li><a href="#" class="d">Документы</a></li> <li><a href="#" class="m">Сообщения</a></li> <li><a href="#" class="s">Регистрация</a></li> </ul> </li> <li><a href="#">Ссылка №3</a></li> <li><a href="#">Ссылка №4</a></li> <li><a href="#">Ссылка №5</a></li> </ul>

 

  

 

Шаг 2 – Создание CSS стилей для горизонтального меню

Изначально меню выглядит вертикально, чтобы это исправить пропишем некоторые стили, отредактируем отступы, границы, цвет фона, закруглим углы. Ширину и высоту сделаем фиксированную. Выравнивание элементов меню сделаем по левому краю при помощи float: left (чтобы навигация приобрела горизонтальную структуру).

.menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -o-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; }

Пропишем на некоторое время следующий стиль, скрывающий выпадающий список. Так будет легче редактировать.

.menu ul { display: none; }

 

 

 

Шаг 3 – Стиль ссылочного меню

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

.menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #494942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; transition: color .3s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #9fde63; }

 

 

 

Шаг 4 - Выпадающее меню

Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.

.menu ul { display: none; }

Теперь будем редактировать стиль для подменю. Добавим позиционирование подменю 40px сверху и 0px слева от пункта меню и добавим закругленные углы снизу. Установим нулевую прозрачность, а при наведении изменим ее на 1, чтобы создать усиление / затухания эффекта. Для слайд-эффекта вверх / вниз мы должны задать высоту списка равную 0px, когда выпадающее меню скрыто, и 36px при наведении курсора на раскрывающийся список.

.menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity .3s ease .1s; transition: opacity .3s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .3s ease .1s; -moz-transition: height .3s ease .1s; -o-transition: height .3s ease .1s; -ms-transition: height .3s ease .1s; transition: height .3s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }

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

.menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; } .menu ul li:last-child a { border: none; }

Чтобы закончить горизонтальное меню на CSS нужно добавить иконку для каждого выпадающего подменю. Для этого мы создадим собственный класс для каждого из подменю и добавим фоновое изображение.

.menu a.d { background: url(docs.png) no-repeat 6px center; } .menu a.m { background: url(bubble.png) no-repeat 6px center; } .menu a.s { background: url(arrow.png) no-repeat 6px center; }

 

Заключение

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

Демонстрация Скачать.rar [3,89 Kb] (cкачиваний: 378)



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

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

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

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью

rss