in.uCoz.org

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

Reactor — Tue, 25 Aug 2015 09:34:51 GMT

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

html код меню

Код

Главная

Дизайн, CSS

Программирование

Еще пункт меню

По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:

UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.

CSS код меню

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

Код

#menu{list-style:none; width:500px; padding:0; margin: auto;}
#menu li{float:left; font:bold 14px Arial;}
#menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;}
#menu a:hover{color:#fff; background:#888;}

На данном этапе получилось следующее:

Разберем все поэтапно, до каждой мелочи:
#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.
list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.
width:500px; – ширина меню 500 пикселей.
margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.
padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.
#menu li {…} – присваиваем стили для LI элементов.
float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.
font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.
#menu a {…} – присваиваем стили для A элемента (ссылки).
color:#666; – темно-серый цвет шрифта.
display:block; - делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.
height:40px; – высота меню будет 40 пикселей.
line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.
padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.
background:#eee; – устанавливаем серый цвет фона для элементов меню.
text-decoration:none; – убираем линию подчеркивающую ссылку.
#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.
color:#fff; – меняем цвет текста на белый.
background:#888; – цвет фона меняем на темно серый.

Доработка горизонтального меню CSS
Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для a элементаbackground:url(background.png) repeat-x; для a:hover другой фонbackground:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.

background.png -
hover.png -
Теперь меню имеет немного иной вид:

Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.

P.s. "выпадающее горизонтальное меню" будет позже.

Выпадающее горизонтальное меню на css

Reactor — Fri, 17 Jan 2014 06:09:47 GMT

Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить – юзабильные. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.

Вариант 1 - Выпадающее горизонтальное меню

Для ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.

Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:

Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).

Давайте рассмотрим CSS код:

Код

#header { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Вот как это можно сделать с помощью чистого CSS кода. До сих пор в голове не улаживается, для чего использовать JavaScript, разве что для плавного сворачивания и разворачивания.

Вариант 2 - горизонтальное меню + решение для IE6

Нужно обратить внимание, что вариант 1, не будет работать в IE6. Решением совместимости меню с IE6, будет кусочек js кода. Ближе к делу, создаем меню. Ниже предоставлен скриншот будущего меню:

Конструкция меню схожа с первой версией, поэтому перейдем к самому коду.

Код

CSS

Код

#menu {
          padding: 0;
          margin: 0;
          font-size: 100%;
          font-family: Georgia;
          }
#menu li {
          list-style: none;
          float: left;
          height: 33px;
          padding: 0;
          margin: 0;
          width: 150px;
          text-align: center;
          background: #171717;
          position: relative;
          padding-top: 12px;
          }
#menu li ul {
          list-style: none;
          padding: 0;
          margin: 0;
          width: 150px;
          display: none;
          position: absolute;
          left: 0;
          top: 45px;
          }
#menu li ul li {
          float: none;
          height: 33px;
          margin: 0;
          width: 150px;
          text-align: center;
          background: #7F7F7F;
          }
#menu li a {
          display: block;
          width: 150px;
          height: 33px;
          color: #fff;
          text-decoration: none;
          }
#menu li:hover ul, #menu li.jshover ul {
          display: block;
          }
#menu li:hover, #menu li.jshover {
          background: #424242;
          }

JS – решение для IE6

Код

Это все, надеюсь, у вас все получится.

-webkit-radial-gradient

Prosvetekvator — Sun, 05 May 2013 03:24:31 GMT

Описание:
Создаёт радиальный градиент в браузерах Chrome и Safari.

Пример:

Код

background-image: -webkit-radial-gradient([<угол> || <позиция>,] [<форма> || <размер>,] <цвет> [,
<цвет>]*);

Значения:
<угол> - Задаёт угол наклона.
<позиция> - Задается с помощью ключевых слов или доступных единиц измерения вроде пикселов или процентов:

top left = left top = 0% 0% (в левом верхнем углу);
top = top center = center top = 50% 0% (по центру вверху);
right top = top right = 100% 0% (в правом верхнем углу);
left = left center = center left = 0% 50% (по левому краю и по центру);
center = center center = 50% 50% (по центру) — это значение по умолчанию;
right = right center = center right = 100% 50% (по правому краю и по центру);
bottom left = left bottom = 0% 100% (в левом нижнем углу);
bottom = bottom center = center bottom = 50% 100% (по центру внизу);
bottom right = right bottom = 100% 100% (в правом нижнем углу).

<форма> - Задаёт форму радиального градиента — круг (circle) или эллипс (ellipse - по умолчанию).
<цвет> - Задает значение цвета, в процентах или в любых других единицах.
<размер> - Устанавливает размер градиента. Значения: contain, closest-corner, farthest-side, cover.

@page

Prosvetekvator — Sun, 05 May 2013 03:00:28 GMT

Описание:
Правило @page указывает значение полей заданных для страниц или для печати документа, у которых тип носителя задан как print.

Пример:

Код

@page [ { :left | :right | :first } ] { Значения отступов }

Значения:
Для создания полей на страницах используется свойство margin или его производные — margin-top, margin-left, margin-right, margin-bottom. Допускаются отрицательное значение в свойствах. Свойства border и padding для правила @page не приемлемы.

@media

Prosvetekvator — Sun, 05 May 2013 02:49:31 GMT

Описание:
Правило @media указывает тип носителя, к которому будет применяться стиль.
После правила @media требуется указывать один или несколько типов носителей, два и более разделяютя между собой запятой, как показано на примере.
Пример:

Код

@media тип1 [, тип2] { Описание стиля
}

Типы носителей:
all - Все типы. (Значение по умолчанию)
aural - Синтезаторы речи или программы для воспроизведения текста.
braille - Устройства, предназначенные для слепых людей на системе Брайля.
handheld - Наладочные компьютеры или аппараты.
print - Устройства вроде принтера.
projection - Устройства вроде проектора.
screen - Экран монитора.
tv - Телевизор.

@import

Prosvetekvator — Sun, 05 May 2013 02:39:08 GMT

Описание:
Правило @import импортирует в данную стилевую таблицу содержимое файла CSS.

Пример:

Код

@import url("имя файла") [типы носителей];@import "имя файла" [типы носителей];

@font-face

Prosvetekvator — Sat, 04 May 2013 19:21:32 GMT

Описание:
Правило @font-face определяет настройки шрифтов, а также дает возможность загрузить спец. шрифт на компьютер пользователя. Для конструкции @font-face можно прописывать свойства для изменения шрифта.

Пример:

Код

@charset

Prosvetekvator — Sat, 04 May 2013 19:10:37 GMT

Описание:
Команда @charset задает кодировку для внешнего файла с CSS. Это значение выполняется если в CSS документе используются символы национального алфавита. Браузер, просматривая внешнюю таблицу стилей, определяет кодировку по следующим пунктам, приоритетным по порядку:

кодировка, передаваемая сервером;

по правилу @charset;

по атрибуту charset в теге ;

кодировка в метатеге ()
По умолчанию используется значение: "utf-8" и если браузер не обнаружит ни одного пункта, то будет использовать значение по умолчанию.

Пример:

Код

@charset "кодировка";