CSS меню. Выпадающее меню. Горизонтальное CSS меню. Вертикальное CSS меню.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я решил создать новую рубрику Создание и оформление сайтов, в этой рубрике будет много вкусного и интересного. Поскольку, здесь я буду писать о реальных примерах. Тема сегодняшней публикации — создание CSS меню, которая находится в разделе CSS меню.
Любое CSS меню должно отвечать нескольким требованиям: CSS меню должно быть удобным, компактным, доступным для пользователя. Чтобы меню сайта было компактным и удобным его следует делать выпадающим. Конечно, выпадающее CSS меню не будет корректно работать в старых браузерах таких как IE6. Выпадающее меню удобно тем, что не занимает много места на веб-странице. В данном примере не будет использоваться JavaScript и библиотека JQuery — а это означает, что выпадающее меню будет доступно для пользователей, у которых в настройках браузера отключены скрипты.
И так, сегодня мы создадим горизонтальную навигацию по сайту и вертикальную навигацию, при этом мы будем использовать только HTML и CSS.
Создание CSS меню. Создание выпадающего меню. Шаг 1 — создаем вертикальное HTML меню.
Содержание статьи:
- Создание CSS меню. Создание выпадающего меню. Шаг 1 — создаем вертикальное HTML меню.
- Создание CSS меню. Выпадающее меню. Шаг 2 — создаем горизонтальное CSS меню.
- Создание CSS меню. Выпадающее меню. Шаг 3 — создаем вертикальное CSS меню.
Для начала мы создаем маркированный HTML список при помощи тега <ul> и тега <li>:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> <span><span><> </span></span><ul> <li>Первый пункт</li> <li>Второй пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> </li> <li>Третий пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> <li>Третий подпункт</li> </ul> </li> <li>Четвертый пункт</li> </ul> </body> </html>
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 |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> <span><span><> </span></span><ul> <li>Первый пункт</li> <li>Второй пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> </li> <li>Третий пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> <li>Третий подпункт</li> </ul> </li> <li>Четвертый пункт</li> </ul> </body>
</html> |
Примерно должно получиться что-то типа такого списка:
- Первый пункт
- Второй пункт
- Первый подпункт
- Второй подпункт
- Третий пункт
- Первый подпункт
- Второй подпункт
- Третий подпункт
- Четвертый пункт
Конечно, это еще не меню и даже не навигация, поскольку ни один из пунктов HTML списка не является ссылкой. Теперь нужно сделать каждый пункт нашего HTML списка ссылкой. Таким образом, у нас получится вертикальное HTML меню, таблицу стилей (css) мы еще пока не будем трогать и подключать. Чтобы пункты HTML списка стали ссылками, содержимое каждого элемента <li> внутрь тега <a>:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body> </html>
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 |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body>
</html> |
Теперь мы получили вертикальное HTML меню. У тега <a> есть атрибут href, в котором следует указывать адрес страницы, на который будет вести ссылка, у меня нет необходимости этого делать, поэтому в качестве адреса я указал символ # или забой. Ссылки, у которых в качестве значения атрибута href указан #, никуда не ведут. Обратите внимание: вертикальной HTML меню я поместил в контейнер <div>, поскольку в спецификации HTML 4 есть правило: внутри элемента <body> могут находиться только блочные элементы и элементы <ins> и <del>. У тега <div> есть один атрибут id со значением «block». У корневого тега <ul> есть атрибут id со значением «hnav», этот атрибут потребуется нам для создания вертикального и горизонтального CSS меню.
Создание CSS меню. Выпадающее меню. Шаг 2 — создаем горизонтальное CSS меню.
Далее мы будем задавать стили CSS для нашего будущего меню. Для начала, давайте зададим стиль для контейнера <ul> со значением hnav атрибута id, то есть общий стиль для нашего выпадающего меню:
#hnav { list-style: none; margin: 0; padding: 0; font-size: 1. 2em; float: right; position: relative }
1 2 3 4 5 6 7 8 9 |
#hnav { list-style: none; margin: 0; padding: 0; font-size: 1.2em; float: right; position: relative
} |
Давайте коротко пройдемся по CSS свойствам и посмотри для чего они нужны. Первое CSS свойство, которое было задано list-style со значением none, данное свойство позволяет избавиться от мерзких маркеров HTML списка, но только для родительских пунктов вертикального меню, у дочерних HTML элементов маркеры останутся.
Свойство margin делает нулевым отступ от края элемента ul. Свойство paddin убирает внутренние отступы HTML элемента ul. Свойство font-size задает размер текста пунктов нашего CSS меню. Свойство float позволяет выравнять CSS меню, в нашем случае по правому краю. Свойство position со значение relative позиционирует контейнер ul относительно его исходного места.
После того, как мы задали общий стиль для нашего горизонтального меню, можно задать стили для всех родительских пунктов навигации:
#hnav li { float: left; position: relative; }
1 2 3 4 5 6 7 | #hnav li {
float: left;
position: relative;
} |
Для каждого элемента li, которые находятся внутри контейнера ul мы задаем два свойства: float со значением left (тем самым мы добиваемся того, что наше CSS меню стало горизонтальным) и опять же, задаем свойство position со значением relative, чтобы элементы заняли свое место.
Теперь мы можем задать стили, для содержимого контейнеров li, то есть стили для пунктов горизонтального CSS меню:
#hnav li a{ float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-right: 10px; }
1 2 3 4 5 6 7 8 9 |
#hnav li a{ float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-right: 10px; } |
Свойство display имеет значение block, это говорит нам о том, что пункты нашего CSS меню будут вести себя как блочные (в данном случае контейнеры <a>, тег <a> сам по себе строчный элемент). Свойство padding устанавливает внутренние отступы между пунктами меню, чтобы те не накладывались друг на друга. Значение none свойства text-decoration позволяет убрать подчеркивание у ссылок(меню же из ссылок состоит). Свойство color задает цвет текста внутри контейнера <a>. Свойство text-transform: uppercase; задает начертание текста нашего CSS меню, а именно, весь текст будет написан прописными буквами.
Теперь можно задать то, как будут выглядеть пункты меню при наведение на них курсора мышки:
#hnav li:hover a, #hnav li a:hover { background: #999; color: #fff; }
1 2 3 4 5 6 |
#hnav li:hover a, #hnav li a:hover { background: #999; color: #fff; } |
Свойство color изменяет цвет текста пункта меню при наведение на него курсора мыши. Свойство background задает цвет фона пункта CSS меню при наведение курсора на пункт.
Теперь мы можем «спрятать» вложенные пункты меню:
#hnav ul {display: none;}
#hnav ul {display: none;} |
После того, как мы «спрятали» пункты выпадающего меню, нужно сделать так, чтобы эти пункты выпадали при наведение курсора:
#hnav li:hover ul {display: block;} #hnav ul { float: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 1.8em; left: 0; } #hnav ul li { float: none; clear: none; margin: 0; padding: 0; width: auto; color: #999; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#hnav li:hover ul {display: block;}
#hnav ul { float: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 1. 8em; left: 0; }
#hnav ul li { float: none; clear: none; margin: 0; padding: 0; width: auto; color: #999; } |
В данном случае мы добились того, что вложенные пункты меню выпадают и немного оформили наше меню, сделали его более читабельным.
После того, как мы задали стили для основных пунктов горизонтального меню, можно задать стили и для вложенных пунктов меню, задать то, как будут выглядеть вложенные пункты меню, как они будут изменяться при наведение на них курсора мыши и то, как будут выглядеть посещенные пункты:
#hnav li:hover ul li a, #hnav ul li a { line-height: 200%; display: block; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; } <span>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#hnav li:hover ul li a, #hnav ul li a { line-height: 200%; display: block; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; }
#hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; }
<span> |
Как видите, мы создали горизонтальное выпадающее CSS меню, при этом, не используя JavaScript. Можно перейти к созданию вертикального CSS меню.
Так будет выглядеть горизонтальное выпадающее CSS меню:
Горизонтальное CSS меню. Выпадающее CSS меню.
Создание CSS меню. Выпадающее меню. Шаг 3 — создаем вертикальное CSS меню.
Приступим к созданию вертикального CSS меню. Для начала создаем маркированный HTML список, точно такой же, как и для горизонтального меню:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body> </html> <span>
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 |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body>
</html>
<span> |
Разница только в имени идентификатора для корневого элемента списка <ul>, поскольку для вертикального и горизонтального меню у меня находятся в одном файле.
Теперь можно задать общие стили для отображения CSS меню:
#vnav { width: 400px; float: left; list-style: none; margin: 0; padding: 0; font-size: 1.2em; }
1 2 3 4 5 6 7 8 |
#vnav { width: 400px; float: left; list-style: none; margin: 0; padding: 0; font-size: 1.2em; } |
Единственным отличием от горизонтального меню является то, что мы задаем ширину нашего меню, которая равна 400 пикселов, при помощи свойства width.
Далее задаем стили для всех пунктов HTML списка:
#vnav li { clear: both; height: 2em; }
#vnav li { clear: both; height: 2em; } |
Свойство height задает высоту элементов CSS меню, clear запрещает обтекание вокруг HTML элемента, значение both говорит о том, что ни с левой, ни с правой стороны наше вертикальное меню не будет обтекания.
Теперь мы задаем то, как будут выглядеть родительские пункты вертикального меню, конечно этот стиль будет применен и для подпунктов, но в дальнейшем для них мы зададим свой стиль отображения:
#vnav li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; }
1 2 3 4 5 6 7 8 9 10 11 |
#vnav li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; } |
В принципе, стиль отображения пунктов вертикального CSS меню не отличается от стиля для горизонтального меню.
Теперь мы задаем то, как будут отображаться родительские элементы вертикального CSS меню при наведение на них курсора мыши:
#vnav li:hover a, #vnav li a:hover { background: #999; color: #fff; }
1 2 3 4 5 6 |
#vnav li:hover a, #vnav li a:hover { background: #999; color: #fff; } |
Теперь мы должны сделать подпункты вертикального CSS меню невидимыми:
#vnav ul {display: none;}
#vnav ul {display: none;} |
После чего следует задать CSS правила, по которым подпункты меню будут выпадать при наведение курсора на родительский элемент:
#vnav li:hover ul {display: block;}
#vnav li:hover ul {display: block;} |
Теперь нужно сделать так, чтобы список подпунктов нашего CSS меню отображался справа от своих родительских элементов, сразу же избавляемся от мерзких маркеров HTML списка:
#hnav ul { list-style: none; float: left; margin: 0; padding: 4px 8px; }
1 2 3 4 5 6 7 |
#hnav ul { list-style: none; float: left; margin: 0; padding: 4px 8px; } |
Но мы еще не достигли того, чтобы список подпунктов меню отображался горизонтально, давайте зададим соответствующие CSS правила:
#hnav ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; }
1 2 3 4 5 6 7 8 9 10 |
#hnav ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; } |
Свойство float: left делает отображение подпунктов меню в линию.
А теперь немного изменим стили для подпунктов, зададим CSS правила для отображения подпунктов меню, то, как они будут отображаться при наведение на них курсора мышки:
#hnav li:hover ul li a, #hnav ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#hnav li:hover ul li a, #hnav ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; }
#hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; } |
Вот так будет выглядеть вертикальное выпадающее CSS меню, которое мы только что создали:
Вертикальное CSS меню. Выпадающее CSS меню.
Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)
Выпадающее меню
Выпадающее менюНавигация в виде выпадающего меню может применяться при большом количестве ссылок, для экономии места на странице. Выпадающее вертикальное меню корректно отображается в браузерах Firefox, Opera и Internet Explorer. Автор меню мне неизвестен, поэтому и ссылки на оригинал не имеется.
HTML — JavaScript
<!—[if gte IE 5.5]>
Скачать JavaScript
<script language=»JavaScript» src=»nav-h.js» type=»text/JavaScript»></script>
<![endif]—><ul>
<li><a href=»index. html»>Главная</a></li>
<li><a href=»templates.html»>Шаблоны, рецепты +</a>
<ul>
<li><a href=»templates.html»>Шаблоны, заготовки +</a>
<ul>
<li><a href=»temp1.html»>Шаблон 1</a></li>
<li><a href=»temp2.html»>Шаблон 2</a></li>
<li><a href=»temp3.html»>Шаблон 3</a></li>
<li><a href=»temp4.html»>Шаблон 4</a></li>
<li><a href=»temp5.html»>Шаблон 5</a></li>
<li><a href=»temp6.html»>Шаблон 6</a></li>
<li><a href=»temp7.html»>Шаблон 7</a></li>
<li><a href=»temp8.html»>Шаблон 8</a></li>
</ul>
</li>
<li><a href=»faq.html»>Рецепты HTML</a></li>
<li><a href=»faq-css. html»>Рецепты CSS</a></li>
</ul>
</li>
<li><a href=»#»>Менюшки +</a>
<ul>
<li><a href=»#»>Вертикальные +</a>
<ul>
<li><a href=»menu1.html»>Вертикальное меню 1</a></li>
<li><a href=»menu2.html»>Вертикальное меню 2</a></li>
<li><a href=»menu3.html»>Вертикальное меню 3</a></li>
<li><a href=»menu4.html»>Вертикальное меню 4</a></li>
<li><a href=»menu5.html»>Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href=»#»>Горизонтальные +</a>
<ul>
<li><a href=»menu6.html»>Горизонтальное меню 1</a></li>
<li><a href=»menu7.html»>Горизонтальное меню 2</a></li>
<li><a href=»menu8. html»>Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»/gb»>Гостевая книга</a></li>
<li><a href=»submit.html»>Контакт</a></li>
</ul>
CSS
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li. iehover a {
background: #648B43;
color: #FFF;
}ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li. iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}
Вернуться
Создание раскрывающегося меню CSS
Раскрывающееся меню — это графический элемент управления, позволяющий пользователю выбрать одно значение из списка. Раскрывающийся список отображается на одном уровне, пока пользователь не щелкнет значение, инициируя раскрывающийся список.
Раскрывающиеся списки CSS — это меню с заголовками верхнего уровня, которые раскрываются с дополнительными параметрами при нажатии. Эти меню позволяют вам перемещаться по веб-сайту и находить все, что доступно на сайте, включая все подкатегории. При хорошем дизайне вы можете сделать свой веб-сайт хорошо организованным местом для своих пользователей.
Раскрывающиеся списки CSS используют как HTML (язык гипертекстовой разметки), так и CSS (каскадные таблицы стилей). Существуют способы создания настраиваемых раскрывающихся меню с использованием JavaScript в дополнение к HTML и CSS, но в этом руководстве не используется JavaScript, поскольку в этом руководстве строго придерживаются CSS и HTML.
Как вы знаете из предыдущих руководств, HTML — это базовый код, который используется для структурирования веб-страницы и ее содержимого, а CSS используется для улучшения вашей веб-страницы с помощью элементов творческого дизайна.
Этот учебник проведет вас через урок по созданию пользовательских множественных раскрывающихся меню CSS. Кроме того, вы столкнетесь с некоторыми элементами креативного дизайна. Все, что вам нужно для начала, это простой редактор кода, такой как Notepad++.
Основы раскрывающегося меню CSS Создание вложенного HTML-менюВо-первых, вам нужно создать вложенные темы. См. следующий пример кода ниже. Вы можете заполнить любые темы, которые вам нравятся.
<голова> <мета-кодировка="utf-8">Раскрывающийся список CSS для кинопроизводства <стиль> <тело> <статья>Кинопроизводство
<навигация> <ул>
Так первоначально выглядит вложенная тема в браузере только с HTML.
Добавление основного CSS
Давайте добавим фон тела для начала.
корпус { фон: #333; поле: 15 пикселей; }
Это добавит хороший фон для начала работы. Это может еще не выглядеть красиво, но вы доберетесь до этого.
Давайте теперь перейдем к заголовку, добавив следующий CSS для определения h2 заголовок тег.
h2 { размер шрифта: 45px; вес шрифта: 100; межбуквенный интервал: 15px; выравнивание текста: по центру; }
Теперь вы можете увидеть результат в аспектах шрифта.
Обратите внимание на размещение тега статьи вокруг всех вложенных слоев. Это позволяет вам определить фон этого конкретного раздела страницы. Просмотрите это внимательно — здесь довольно много творческих определений.
артикул { ширина: 600 пикселей; поле: 0 авто; фон: #0458d6; цвет: #fff; радиус границы: 3px; box-shadow: 0 0 10px 2px #666; }
Результат такой:
Чего не хватает? В меню необходимо скрыть слой подтемы. Для этого добавим следующий код:
#main_nav ul ul { положение: абсолютное; слева: 0; верх: 100%; видимость: скрытая; непрозрачность: 0; }
Теперь страница выглядит следующим образом:
Что произойдет, если вы добавите раздел CSS для области навигации в виде блока?
#main_nav { дисплей: блок; текстовое оформление: нет; отступ: 5px 15px; цвет: #000; }
Теперь область трансформируется, чтобы выглядеть так.
На мгновение кажется, что ссылки исчезли, но на самом деле произошло просто удаление подчеркивания. Это больше не нужно отображать.
Эти темы должны быть представлены в отдельном блоке, выделенном белым фоном. Давайте добавим следующий код, чтобы это произошло:
#main_nav ul { фон: белый; плыть налево; -webkit-переход: .5s; переход: 0,5с; }
В результате область ссылки стала более отчетливой, чем окружающая ее рамка.
Давайте сделаем шрифт прописным , добавив следующий код:
#main_nav > ul > li > h2 { преобразование текста: верхний регистр; }
Результат выглядит следующим образом:
Чтобы темы выровнялись в полосу, давайте посмотрим, что произойдет, если вы добавите следующий код:
#main_nav li { плыть налево; положение: родственник; ширина: 150 пикселей; стиль списка: нет; -webkit-переход: . 5s; переход: 0,5с; }
После добавления этого кода темы теперь выстраиваются в ряд.
Давайте исправим выравнивание, удалив поля и отступы. Это должно позволить всем четырем темам оставаться наверху.
* { маржа: 0; заполнение: 0; }
Теперь вы собираетесь добавить следующее, чтобы помочь управлять тем, что происходит при наведении курсора на темы. Это должно внести последние штрихи в раскрывающееся меню CSS. Обратите внимание, что когда вы видите один li — это относится к теме первого уровня или верхнего уровня. Когда вы видите li li , вы смотрите на меню, которое опускается на так называемый второй уровень. Вы можете спроектировать это даже с третьим уровнем, используя li li li для создания многоуровневого выпадающего меню при наведении CSS.
#main_nav li:hover, #main_nav li:hover li { фон: #ддд; } #main_nav li li: hover, #main_nav li li: hover li { фон: #bbb; } #main_nav li li li: hover { фон: #999; } #main_nav li:hover > ul { видимость: видимая; непрозрачность: 1; }
И добавить для дальнейшего выравнивания навигации.
#main_nav ул ул ул { слева: 100%; сверху: 0; }
В результате получилось красивое многоуровневое выпадающее меню CSS при наведении.
Заключительное примечаниеКак видите, эти выпадающие меню CSS требуют немало усилий, чтобы установить функциональное меню и создать меню, которое выглядит приятным для глаз. Вы также видите, что JavaScript не нужен для создания чего-то действительно волшебного для ваших клиентов.
Однако в коде CSS есть много областей, с которыми можно поиграться, чтобы получить желаемое выравнивание, а также получить нужные функции.
Это непросто, но вы, безусловно, можете это сделать и научиться настраивать параметры с терпением и осторожностью.
Куда дальше?Это введение CSS DropDowns должно послужить хорошей отправной точкой для дальнейшего изучения дизайна веб-сайта, макета и практических приложений с HTML и CSS.
Продолжайте изучать другие области дизайна в следующем блоге. Мы надеемся, что это введение вызовет у вас интерес, вдохновит вас на дальнейшие исследования и более глубокое погружение в мир веб-дизайна.
HTML — отличный способ начать изучение кода, но профессиональный мир требует все больше и больше. Почему бы не улучшить свои навыки и возможности, продвинувшись еще дальше. Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня!
Начать обучение
25+ ВЫПАДАЮЩЕЕ МЕНЮ CSS
25+ ВЫПАДАЮЩЕЕ МЕНЮ CSS
Only CSS3 Dropdown Menu
Author
Pedro Nauck
Made With
HTML,CSS(SCSS)
Demo
Check Out Demo
Links
Download
Pure CSS DropDown Menu
Author
Andor Nagy
Сделано с
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Simple Pure CSS Dropdown Menu
Author
Connor Brassington
Made With
HTML(PUG),CSS(SCSS)
Demo
Check Out Demo
Links
Download
A simple Dropdown Menu
Автор
Майк Рохас
Сделано с
HTML(PUG),CSS(SCSS)
Демо
Проверить демо
Ссылки
Скачать
19 Простое менюHugh Balboa
Made With
HTML,CSS
Demo
Check Out Demo
Links
Download
Author
Code Raven
Made With
HTML,CSS(LESS)
Демо
Проверить демо
Ссылки
Скачать
Адаптивное меню навигации Чистый CSS
Автор
Дженнинг
Сделано с
9 9S(LESS HTML)0003
ДЕМО
Проверьте демонстрацию
Ссылки
Скачать
Меню #Codepenchallenge
Автор
Ахмед NASR
СЕСКОН.
Download
Swanky Pure CSS Drop Down Menu V2.0
Author
Jamie Coulter
Made With
HTML,CSS
Demo
Check Out Demo 30019
Download
CSS Drop-Down Menu Transitions
Author
Shaw
Made With
HTML,CSS(LESS)
Demo
Check Out Demo
Links
Download
Author
Зеландия
Сделано с
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Брэндон Лоелин
Сделано с
HTML, CSS
Демо
Проверьте демонстрацию
Ссылки
Fack Menu #codepench
9916199993.
993..
Демонстрация
Демо-версия Check Out
Ссылки
Скачать
Концепция выпадающего меню Zigzag
Автор
Catalin Rosu
Made With
HTML, CSS
DEMO
Проверьте демонстрацию
Ссылки
Скачать
Распадный меню с Onclick Trigger
Автор
SAZZAD
, изготовленный с
HTML.
ДемоСсылки
Загрузка
Пользовательское выпадающее меню Pure CSS
Автор
Silver Drop
Сделано с
HTML,CSS,JS
Проверить 9 Демо 9002
Ссылки
Скачать
Простая плоская навигация с рабочим выпадающим меню.
Автор
Энди Тран
Сделано с
HTML (HAML), CSS (MESS), JS
DEMO
Проверьте Demo
Ссылки
Загрузка
Author
lukejacksonn
Made With
HTML,CSS(LESS),JS
Demo
Check Out Demo
Links
Download
Author
Ivan Grozdic
Сделано с помощью
HTML,CSS,JS
Демо
Проверить демо
Ссылки
Скачать
Pure CSS3 Авторское выпадающее меню с анимацией (вертикально)
99Rizky Kurniawan Ritonga
Made With
HTML,CSS,JS
Demo
Check Out Demo
Links
Download
Author
Martin Stanek
Made With
HTML ,CSS(LESS),JS
Demo
Check Out Demo
Links
Download
CSS3 Menu Dropdowns
Author
Colin
9 Made WithHTML,CSS(SCSS),JS
Demo
Check Out Demo
Links
Download
Author
mahesh bhagat
Made With
HTML,CSS, JS
Demo
Check Out Demo
Links
Download
Взаимодействие с выпадающим меню
Author
Aaron Iker
Made With
, HTML16 ДЕМО
Проверьте демонстрацию
Ссылки
Скачать
Пользовательское выпадающее меню #1
Автор
Вероника
Сделано с
HTML, CSS, JS DEMO
DEMO DEMO DEMO .