Горизонтальное CSS меню, для сайта. Часть-1.

Сегодня  мы создадим с вами, горизонтальное меню на CSS, с выпадающим списком, без использования  JS. Для демонстрации я создам пустой индексный файл и назову его css_menu.html, также нам понадобится стилевой файл. Чтобы в последствии последний можно было вставить, в паку CSS на нашем сайте, он не должен иметь похожего названия, поэтому обзовём  его так же, то есть css_menu.css соответственно указав только другое расширения.  Для наглядности в тег body я пропишу фон, в виде тетрадной клеточки, что бы лучше видеть, расположение создаваемого меню. Теперь подключаем файл CSS к HTML.

<link rel="stylesheet" type="text/css" href="css_menu.css">

Создаём маркированный список, тег <ul> и  <li>.

Сначала нам необходимо создать каркас нашего меню.  Сделаем это, в виде маркировочного списка из 6 пунктов  со ссылками, вот так:

<ul>
                <li><a  href="/">Главная</a></li>
                <li><a  href="/">Пункт №1</a></li>
                <li><a  href="/">Пункт №2</a></li>
                <li><a  href="/">Пункт № 3</a></li>
                <li><a  href="/">Пункт № 4</a></li>
                <li><a  href="/">Пункт № 5</a></li>
</ul>

Сразу в каркасе в одном из пунктов, например №2 создаём три подпункта для будущего выпадающего списка:

<li><a  href="/">Пункт №2</a>
                               <ul>
                                               <li><a  href="#">Подпункт №1</a></li>
                                               <li><a  href="#">Подпункт №2</a></li>
                                               <li><a  href="#">Подпункт №3</a></li>
                                               </ul>
                               </li>

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

Рисунок №1.

 

 Пока нечего интересного!

Создаём стили, для горизонтального меню.

Теперь давайте сразу создадим идентификатор класса для основного тега <ul>, вот так:

<ul id="css_menu">

Дальше идём, в наш файл со стилями  css_menu.css и прописав  #css_menu {  }; задаём следующие параметры.

Выравниваем все элементы по левому краю (float:left; ),  указываем ширину (width:100%;),  убираем маркеры пунктов меню  (list-style:none;), делаем текст утолщённым (font-weight:bold;). Ну и сразу можем указать наружный  отступы сверху, например  (margin-top:2px;) и с низу (margin-bottom:2px;). Обновляем страницу и смотрим. Маркеры в пунктах исчезли,  текст утолщён, отступы есть. Идём дальше.

Задаём идентификацию, для тега <li>, вот так #css_menu li{ }; и сразу говорим. Расположи все элементы с лева, (float:left;), сделай отступы для них справа (margin-right:15px;), а слева (margin-left:0;). Теперь позиционирование relative (position:relative;) и сделай его блочным элементам (display:block;). Сохраняем, обновляем и в просмотр:

Рисунок № 2.

 

Ну вот уже другое дело, теперь разберёмся с тегом <ul>? В выпадающем мню. Дополняем работу ID для него вот так  #css_menu ul{ };  сразу убираем маркеры (list-style:none;), затем позиционирование (position: absolute;), что бы скрыть его до отображения, вместо (display:none;) используем вот такой трюк (left:-9999px;), так будет лучше. Теперь зададим стартовый, или нулевой уровень прозрачности, для понимания работы параметра в будущем (opacity:0;).  И на последок сразу укажем плавность появления, или переход (transition), вот так (transition:0.25s linear opacity; ).  Лучше указать это действия, для всех браузеров (см. исход. Материал ). Идём в просмотр:

Рисунок № 3.

 

 Так всё отлично, подпункты скрылись.

Дальше начинаем оформлять пункты меню и прописываем правила отображения тега <a>, то есть ссылок. Задаём идентификацию #css_menu li a{ }; и сразу говорим браузерам. Это блочный элемент (display: block;), далее внутренний отступ вокруг текста (padding:5px 20px 5px 20px;), затем цвет текста  (color: #fff; ) и общий фон (background:#3C29FF;). Убираем подчёркивание ссылок  (text-decoration: none; ) . Текст можем сделать покрасившее и указываем одним махом, тип шрифта и его размер  (font:24px Monotype Corsiva,  Arial;).  Тень тексту тоже не помешает  (text-shadow:1px 1px 1px rgba (0,0,0,0.85);). Также можем закруглить края фона, наших пунктов (border-radius:20px;), указав эту процедуру, для всех популярных браузеров.  Обновим, предварительно сохранив и посмотрим, что получилось.

Рисунок № 4.

 

 Ну, вот наши кнопки меню на css готовы. Теперь можем добавить для них, правила отображения, при наведении (:hover).

Создаём идентификатор #css_menu li a:hover{ }; и поехали. Цвет текста при наведении ( color: #FFF08B; ),  цвет фона, с уровнем прозрачности (background: rgba(107,12,54,0.75);) и просто цвет фона, если вдруг у пользователя браузер не сможет распознать и ли понять предыдущее правило (background:#853F61; ).  Ну и пожалуй при наведении курсора, не плохо добавить подчёркивание текста (text-decoration: underline;). Идём смотреть что там получилось:

Рисунок № 5.

 

 Отлично! Пожалуй, на этом и закончим первую часть, «Горизонтальное CSS меню, для сайта». Во второй заключительной части мы доработаем, выпадающий список и запустим его.

 

Все исходные материалы, и демо-версия, доступны в «Горизонтальное CSS меню, для сайта. Часть-2».