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

* 9-02-2014, 19:35 * A_Protasov * Комментариев: 0

Рейтинг:

Горизонтальное 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.

 Горизонтальное CSS меню, для сайта. Часть-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.

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

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

Рисунок № 3.

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

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

Дальше начинаем оформлять пункты меню и прописываем правила отображения тега <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 меню, для сайта. Часть-1.

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

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

Рисунок № 5.

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

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

 

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


razdacha.jpg


Теги: горизонтальное меню на CSS

Просмотров: 16 624
Последние новости блога
Три скрипта «Падающий снег», на JS.
В последнее время стало, модным  украшать сайты, различными скриптами, типа «Бегущая букашка», «Ползающая муха» и так далее.  Особенно данная тема актуальна для
Простая вёрстка в HTML. Урок №8.
Фон страницы, или «Background  for body». Background  for body-звучит примерно как, фон для тела. Знаете ли вы, что по умолчанию если, не назначен общий фон страницы, то по
Простая вёрстка в HTML. Урок № 7.
Подвал сайта. На прошлом уроке «Простая вёрстка в HTML. Урок  №6», мы остановились на том, что вы должны самостоятельно, попробовать создать эту часть нашего будущего сайта. Давайте
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru