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

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Всем привет!
В этом уроке я расскажу о способах подключения CSS файла к HTML. Существует 3 способа подключения CSS файла. Спросите, зачем вам знать именно 3 способа? Отвечу, что нужно, потому что бывают случаи, когда необходимо использовать как раз все эти 3 способа подключения.

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:

Чтобы связать HTML документ с CSS файлом, добавьте между тегами <head> специальный тег <link>.* Закрывающий тег не нужен

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

href – прописываем путь к  css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в одной директории.
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап — создать файл «style.css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» =>  «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css»

Далее нажмите на кнопку «Сохранить»:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css» был создан.
Можете вставить в файл «style.css» вот это правило для тега <h1> и сохранить:

H1
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

В HTML файле вставьте вот этот код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

В результате должно получиться вот такое:

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css». Припустим, меняем цвет и размер для заголовка в «style.css», то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!! 

○ Способ №2 – «Таблицы глобальных стилей»

Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.* Закрывающий тег обязателен

<style type="text/css"></style>

Можно и так:

<style></style>

Между тегами <style></style> прописываются необходимые CSS правила для веб-страницы.
Минус такого способа в том, что эти стили будут только для одной страницы, где размещены эти стили.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2>Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя таблицу стилей CSS.

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например,  для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style.

style="тут будут CSS правила"

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
</head>
<body>
<H2 style="font-size: 150px; color: #cc0000">Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2 style="font-size: 50px; color: green;">Заголовок</H2>
<H2>Заголовок</H2>
</body>
</html>

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!

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

В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { display: inline; }

Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 550px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
#navbar a:hover {
  border-radius: 20px 5px;
  background-color: #0066FF;
}

Попробовать »

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

А теперь вертикально. Я сказал вертикально!

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вертикальная панель</title>
  <style>
   li{
    display: block; 
    margin: 13px;
    padding: 13px;
    background: #FF8C00;  
    width:20%;
    text-align:center;
    font-size:20px;
    border-radius:10px;
   }
   a {
    color: #fff;  
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block, который собственно и отвечал за горизонтальное расположение пунктов навигации.

Создать мега меню

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

Шаг 1) Добавить HTML:

Пример

<div class=»navbar»>  <a href=»#home»>Главная</a>  <a href=»#news»>Новости</a>  <div class=»dropdown»>    <button class=»dropbtn»>Выпадающий      <i class=»fa fa-caret-down»></i>    </button>    <div class=»dropdown-content»>      <div class=»header»>        <h2>Мега меню</h2>      </div>      <div class=»row»>        <div class=»column»>          <h3>Категории 1</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>        <div class=»column»>          <h3>Категории 2</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>        <div class=»column»>          <h3>Категории 3</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>      </div>    </div>  </div></div>

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>, <a> или <p>.

Используйте элемент контейнера (например, <div class=»dropdown-content»>), чтобы создать выпадающее меню и добавить сетку (столбцы) и добавить раскрывающиеся ссылки внутри сетки.

Оберните элемент <div class=»dropdown»> вокруг кнопки и элемент контейнер (<div class=»dropdown-content»> в позиции выпадающего меню с помощью правильного CSS.

Шаг 2) Добавить CSS:

Пример

/* Контейнер навигации */.navbar {  overflow: hidden;  background-color: #333;  font-family: Arial;}/* Ссылки в панели навигации */.navbar a {  float: left;  font-size: 16px;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}/* Выпадающий контейнер */.dropdown {  float: left;  overflow: hidden;}/* Кнопка выпадающего списка */.dropdown .dropbtn {  font-size: 16px;  border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */  margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */}/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */.navbar a:hover, .dropdown:hover .dropbtn {  background-color: red;}/* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  width: 100%;  left: 0;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}/* Мега заголовок меню, если это необходимо */.dropdown-content .header {  background: red;  padding: 16px;  color: white;}/* Показать выпадающее меню при наведении курсора */.dropdown:hover .dropdown-content {  display: block;}/* Создайте три одинаковых столбца, которые плавают рядом друг с другом */.column {  float: left;  width: 33.33%;  padding: 10px;  background-color: #ccc;  height: 250px;}/* Ссылки стиля внутри столбцов */.column a {  float: none;  color: black;  padding: 16px;  text-decoration: none;  display: block;  text-align: left;}/* Добавить цвет фона при наведении курсора */.column a:hover {  background-color: #ddd;}/* Очистить поплавки после столбцов */.row:after {  content: «»;  display: table;  clear: both;}

Объяснение примера

Мы стилизовали навигационную панель и ссылки на навигационную панель с фоновым цветом, заполнением и т.д.

Мы оформили кнопку выпадающего списка с фоном цвета, заполнением и т.д.

Класс использовать , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью ).

Класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Он расположен так, чтобы быть видимым прямо под кнопкой раскрывающегося списка, а ширина установлена на 100%, чтобы покрыть весь экран.

Вместо того, чтобы использовать границу, мы использовали свойство , чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

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

Классы используются для создания трех столбцов, которые плавают рядом друг с другом в раскрывающемся меню (для отображения различных категорий).

Создание навигации по полноэкранному оверлею

Шаг 1) добавить HTML:

Пример

<!— The overlay —><div id=»myNav» class=»overlay»>  <!— Button to close the overlay navigation —>  <a href=»javascript:void(0)»
class=»closebtn» onclick=»closeNav()»>&times;</a>  <!— Overlay content —>  <div
class=»overlay-content»>    <a href=»#»>About</a>   
<a href=»#»>Services</a>    <a href=»#»>Clients</a>   
<a href=»#»>Contact</a>  </div></div><!— Use any element to open/show the overlay navigation menu —>
<span onclick=»openNav()»>open</span>

Step 2) Add CSS:

Пример

/* The Overlay (background) */.overlay {    /* Height
& width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;    width: 0;   
position: fixed; /* Stay in place */    z-index: 1; /*
Sit on top */    left: 0;    top: 0;   
background-color: rgb(0,0,0); /* Black fallback color */   
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */   
overflow-x: hidden; /* Disable horizontal scroll */   
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down
the overlay (height or width, depending on reveal) */}/* Position the content inside the overlay */.overlay-content {   
position: relative;    top: 25%; /* 25% from the top */   
width: 100%; /* 100% width */    text-align: center; /*
Centered text/links */    margin-top: 30px; /* 30px top
margin to avoid conflict with the close button on smaller screens */}/* The navigation links inside the overlay */.overlay a {    padding: 8px;   
text-decoration: none;    font-size: 36px;   
color: #818181;    display: block; /* Display block
instead of inline */    transition: 0.3s; /* Transition
effects on hover (color) */}/*
When you mouse over the navigation links, change their color */.overlay
a:hover, .overlay a:focus {    color:
#f1f1f1;}/* Position the close button (top right corner) */
.overlay .closebtn {    position:
absolute;    top: 20px;    right:
45px;    font-size: 60px;}
/* When the height of the screen is less than 450 pixels, change the
font-size of the links and position the close button again, so they don’t
overlap */@media screen and (max-height: 450px) {   
.overlay a {font-size: 20px}    .overlay .closebtn {       
font-size: 40px;       
top: 15px;        right: 35px;   
}}

Шаг 3) добавить JavaScript:

Пример ниже слайдов в меню навигации наложения слева направо (от 0 до 100% ширины), когда он запускается:

Скользить со стороны

/* Open
when someone clicks on the span element */function openNav() {    document.getElementById(«myNav»).style.width
= «100%»;}/* Close when someone clicks on the «x»
symbol inside the overlay */function closeNav() {   
document.getElementById(«myNav»).style.width = «0%»;}

Пример ниже слайдов в меню навигации наложения вниз от верхнего (от 0 до 100% высоты).

Примечание: В этом примере, обратите внимание, что CSS немного отличается от одного выше (по умолчанию высота теперь 0, ширина 100% и переполнения-y скрыт (отключить вертикальной прокрутки, за исключением небольших экранов)):

Сдвиньте вниз от верхнего

/* Open */function openNav() {    document.getElementById(«myNav»).style.height
= «100%»;}/* Close */function closeNav() {   
document.getElementById(«myNav»).style.height = «0%»;}

В этом примере открывается меню навигации без анимации:

Открыть меню без анимации

/* Open */function openNav() {    document.getElementById(«myNav»).style.display
= «block»;}/* Close */function closeNav() {   
document.getElementById(«myNav»).style.display = «none»;}

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

❮ Назад
Дальше ❯

HTML код меню

<ul id="menu">
	<li><a href="http://sitear.ru">Главная</a></li>
	<li><a href="http://sitear.ru">Дизайн, CSS</a></li>
	<li><a href="http://sitear.ru">Программирование</a></li>
	<li><a href="http://sitear.ru">Еще пункт меню</a></li>
</ul>

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

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

Подпункты в меню: выпадающий список

Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Выпадающий список</title>
        <style>
body {
    padding-left: 30%;
    font-size: 18px;
}
.m-menu {
    margin: 0;
    padding: 9px;    
    width:50%;
    text-align:center;
    border: 3px solid #000;
    background: #FF8C00;  
}
.m-menu > li {
    position: relative;
    display: inline-block;
 }
.m-menu a {
    display: block;
    margin-left: -2px;
    padding: 13px;
    color: #fff;
    border-left: 3px solid #fff;
}
.m-menu a:hover {
    background: #1C1C1C;
}
.m-menu .s-menu {
    left: 10px;
    position: absolute;
    display: none;
    width: 155px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FF8C00;
}
.m-menu .s-menu a {
    border: 1px solid #000;
}
.m-menu > li:hover .s-menu {
    display: block;
}
        </style>
    </head>
    <body>
        <ul class="m-menu">
            <li><a href="#index">Главная</a></li>
            <li>
                <a href="#product">Продукция</a>
                <ul class="s-menu">
                    <li><a href="#1">Конфеты</a></li>
                    <li><a href="#2">Торты</a></li>
                    <li><a href="#3">Печенье</a></li>
                </ul>
            </li>
            <li><a href="#adress">Контакты</a></li>
        </ul>
    </body>
</html>

В данном примере я разделил единицы меню на два класса:

  1. m-menu
  2. s-menu

Первый класс отвечает за основное меню, а s-menu – за подменю.

В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.

Как видите, реализация такого приема очень простая.

Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!

 
Прочитано: 3797 раз

Как сделать вертикальное меню:

Для начала разберём как сделать вертикальное меню в HTML и CSS, это самый просто тип, на подобие того что есть во ВКонтакте. Но для начала нужно сделать не большую HTML страницу.

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<header>

<h3>Header</h3>

</header>
<main>

<nav>

<ul class=»menu»>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Игры</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

</nav>

<div class=»content»>

<h1>Content</h1>

</div>

</main>

Тут всё понятно, единственное, что смущает, это тег , он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

Тег нужно использовать для навигации, что бы лучше индексировался ваш сайт.

Теперь добавим в тег список , что бы сделать меню.

XHTML

1
2
3
4
5
6

<ul class=»menu»>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Игры</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

Здесь не чего интересного нет, единственно, вместо решётки в атрибуте href, надо использовать ссылку на страницу, вот результат.

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

header {

borderblack2pxsolid;

}
 

main nav {

displayinline-block;

width200px;

borderblack2pxsolid;

margin-right10px;

padding10px20px;

floatleft;

}
 

main nav ul {

padding;

}
 

main nav ul li {

list-style-typenone;

}
 

main .content {

displayinline-block;

width500px;

borderblack2pxsolid;

floatleft;

}

Как можете заметить для тега и с классом «content», используем свойство со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

Также, каждый из этих блоков использует свойство float, оно нужно для выравнивания блоков, блочно строчного типа, более подробно по ссылки.

Примечание:

В современных проектах не используется блочно строчные элементы и , сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

Конечно, выглядит это не очень, но главное здесь передать саму суть, как сделать вертикальное меню, вам просто надо использовать блочно строчные элементы и .

Выпадающее меню

После освоения азов построения горизонтального меню на CSS выпадающее из него подменю можно оформить вертикальным списком. Список в разметке нужно сделать многоуровневым, добавить дополнительные теги для маркированных списков внутрь нужного элемента. В тег должны быть вложены следующие элементы списка:

<ul class=»menu»>

<li><a href=»#html»>1</a></li>

<ul class=»second»>

<li><a href=»basic»>1.1</a></li>

<li><a href=»intensive»>1.2</a></li>

</ul>

<li><a href=»#menu»>2</a></li>

<li><a href=»#sub-menu»>3</a></li>

<li><a href=»#fixed»>4</a></li>

</ul>

В css .menu li заменяется на «.menu > li», чтобы внутренние элементы стали вертикальными. К родительскому селектору добавляют относительное позиционирование, при котором элемент сдвигается от границ родительского блока, а к дочернему — абсолютное (полностью убирается из потока и координируется от ближайшего элемента, а если таких нет, то от границ браузера). Элементы с относительным позиционированием могут содержать внутри себя дочерние элементы с абсолютным позиционированием. Это значит, что при движении блока с position: relative закрепленные части останутся на своих местах внутри него.

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

.menu > li {

display: inline;

position: relative;

}

.menu .second {

position: absolute; (привязка подменю к родительскому блоку)

display: none; (скрыть отображение)

}

.menu > li:hover .second { (применяется псевдокласс hover для появления списка по наведению)

display: block;

}

Результатом будет небольшое, аккуратное меню.

Код CSS центрированного меню

Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.

#centeredmenu {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#centeredmenu ul li a:hover {
   background:#369;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Стили

Стили которые определяются в данном разделе служат только для декорации. Вы можете устанавливать цвет таким, каким хочется. Для демонстрации тег будет иметь мягкий, кремовый цвет.

body {
	background-color: #ece8e5;
}

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

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}

Затем смещаем ссылки меню влево, так что они будут выводиться в один ряд.

nav li {
	display: inline;
	float: left;
}

Если вы посмотрите на разметку HTML, то увидите, что добавлен в атрибуте для обеих тегов и для сбрасывания обтекания текста вокруг меню.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Так как у нас есть шесть ссылок меню, контейнер имеет ширину , то каждая ссылка будет шириной .

nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

Ссылки меню разделены рамкой справа шириной , кроме последнего пункта. Нужно изменить модель расчета границ прямоугольника  на , чтобы сохранить размер меню .

nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}

Теперь меню будет иметь более светлый цвет в состояниях и .

nav a:hover, nav a:active {
	background-color: #8c99a4;
}

…а внешние ссылки будут скрыты (для экранов настольных систем).

nav a#pull {
	display: none;
}

На данном этапе мы создали стили для меню. Но при изменении экрана браузера ничего происходить не будет. Пора переходить к следующему этапу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector