ПШвИ - ПЕРВЫЙ ШАГ в ИНТЕРНЕТ

ИНТЕРНЕТ-ПОРТАЛ БОЛГАРСКОЙ СОШ №1 

Ваш IP: 35.175.182.106
  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта

Многоуровневое меню на CSS3

Печать

Многоуровневое меню на CSS3

img 1

 

 Меню на CSS становятся все более популярными. CSS3 открывает новые возможности в оформлении стандартных элементов интерфейса визуальными эффектами без привлечения дополнительных средств, таких как JavaScript или изображений. В данном уроке представлено очередное меню на CSS? которое будет работать в браузерах начиная с IE8+ (в старых версиях не будут выводиться тени и скругленные углы пунктов меню).

 

Разметка HTML

 

Структура меню строится на основе неупорядоченного вложенного списка.

 

01 <div class="example">
02     <ul id="nav">
03         <li class="current"><a href="http://ruseller.com/index.php">Главная</a></li>
04         <li><a href="http://ruseller.com/lessons.php">Уроки</a>
05             <ul>
06                 <li><a href="http://ruseller.com/lessons.php?rub=1">HTML</a></li>
07                 <li><a href="http://ruseller.com/lessons.php?rub=32">JS / jQuery</a>
08                     <ul>
09                         <li><a href="http://ruseller.com/lessons.php?rub=32">jQuery</a></li>
10                         <li><a href="http://ruseller.com/lessons.php?rub=32">JS</a></li>
11                     </ul>
12                 </li>
13                 <li><a href="http://ruseller.com/lessons.php?rub=37">PHP</a></li>
14                 <li><a href="http://ruseller.com/lessons.php?rub=2">СSS</a></li>
15                 <li><a href="http://ruseller.com/lessons.php?rub=29">Для сайта</a></li>
16                 <li><a href="http://ruseller.com/lessons.php?rub=40">WordPress</a></li>
17             </ul>
18         </li>
19         <li><a href="http://ruseller.com/adds.php">Ресурсы</a>
20             <ul>
21                 <li><a href="http://ruseller.com/adds.php?rub=10">Программы</a>
22                     <ul>
23                         <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 1</a></li>
24                         <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 2</a></li>
25                         <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 3</a></li>
26                         <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 4</a></li>
27                     </ul>
28                 </li>
29                 <li><a href="http://ruseller.com/service.php">Онлайн инструменты</a>
30                     <ul>
31                         <li><a href="http://ruseller.com/service.php?rub=19">CSS</a></li>
32                         <li><a href="http://ruseller.com/service.php?rub=21">Изображения</a></li>
33                         <li><a href="http://ruseller.com/service.php?rub=22">Разное</a></li>
34                     </ul>
35                 </li>
36             </ul>
37         </li>
38         <li><a href="http://ruseller.com/page.php?doc=about">Об авторе</a></li>
39     </ul>
40 </div>

 

CSS

 

Функционал меню и внешний вид формируется правилами CSS. Для формирования градиентного фона в пунктах меню используется изображение. К сожалению, для достижения кроссбраузерности кода и сохранения внешнего вида приходится использовать фоновую картинку (только одну).

 

001 /* Стили меню */
002 #nav {
003     display:inline-block;
004     width:100%;
005     margin:0px auto;
006     padding:0;
007     background:#335599 url(../images/bg.png) repeat-x 0 -110px;
008  
009     border-radius:10px/*немного css3*/
010     -moz-border-radius:10px;
011     -webkit-border-radius:10px;
012     box-shadow:0 2px 2px rgba(0,0,0, .5);
013     -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
014     -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
015 }
016 #nav li {
017     margin:10px;
018     float:left;
019     position:relative;
020     list-style:none;
021 }
022 #nav a {
023     font-weight:bold;
024     color:#e7e5e5;
025     text-decoration:none;
026     display:block;
027     padding:8px 20px;
028  
029     border-radius:10px/*немного css3*/
030     -moz-border-radius:10px;
031     -webkit-border-radius:10px;
032     text-shadow:0 2px 2px rgba(0,0,0, .7);
033 }
034  
035 /* sВыбранный пункт меню */
036 #nav .current a, #nav li:hover > a {
037     background:#7788aa url(../images/bg.png) repeat-x 0 -20px;
038     color:#000;
039     border-top:1px solid #f8f8f8;
040  
041     box-shadow:0 2px 2px rgba(0,0,0, .7); /*немного css3*/
042     -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
043     -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
044     text-shadow:0 2px 2px rgba(255,255,2550.7);
045 }
046  
047 /* Подуровень */
048 #nav ul li:hover a, #nav li:hover li a {
049     background:none;
050     border:none;
051     color:#000;
052 }
053 #nav ul li a:hover {
054     background:#335599 url(../images/bg.png) repeat-x 0 -100px;
055     color:#fff;
056  
057     border-radius:10px/*немного css3*/
058     -moz-border-radius:10px;
059     -webkit-border-radius:10px;
060     text-shadow:0 2px 2px rgba(0,0,00.7);
061 }
062  
063 #nav ul li:first-child > a {
064     -moz-border-radius-topleft:10px/*немного css3*/
065     -moz-border-radius-topright:10px;
066     -webkit-border-top-left-radius:10px;
067     -webkit-border-top-right-radius:10px;
068 }
069 #nav ul li:last-child > a {
070     -moz-border-radius-bottomleft:10px/*немного css3*/
071     -moz-border-radius-bottomright:10px;
072     -webkit-border-bottom-left-radius:10px;
073     -webkit-border-bottom-right-radius:10px;
074 }
075  
076 /* выпадающий список */
077 #nav li:hover > ul {
078     opacity:1;
079     visibility:visible;
080 }
081 #nav ul {
082     opacity:0;
083     visibility:hidden;
084     padding:0;
085     width:175px;
086     position:absolute;
087     background:#aabbcc url(../images/bg.png) repeat-x 0 0;
088     border:1px solid #7788aa;
089  
090     border-radius:10px/*немного css3*/
091     -moz-border-radius:10px;
092     -webkit-border-radius:10px;
093     box-shadow:0 2px 2px rgba(0,0,0, .5);
094     -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
095     -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
096  
097     -moz-transition:opacity .25s linear, visibility .1s linear .1s;
098     -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
099     -o-transition:opacity .25s linear, visibility .1s linear .1s;
100     transition:opacity .25s linear, visibility .1s linear .1s;
101 }
102 #nav ul li {
103     float:none;
104     margin:0;
105 }
106 #nav ul a {
107     font-weight:normal;
108     text-shadow:0 2px 2px rgba(255,255,2550.7);
109 }
110 #nav ul ul {
111     left:160px;
112     top:0px;
113 }

 

 

 

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


Защитный код
Обновить

Поиск по сайту

Новейшее из новостей

Предыдущая Следующая

Видео для подготовки к ЕГЭ

Единый Государственный Экзамен по информатике и ИКТ в 2019 году Видео для подготовки к ЕГЭ:  При подготовке данного метериала были использованы ресурсы:  Информатика. Видеоуроки. Подготовка к ЕГЭ(Ч.1 и Ч.2). 

Admin - avatar Admin 26 Ноя 2018 Просмотров:35 'Подготовка к ЕГЭ (11 класс)

Подробнее

Задания на ЕГЭ в 2019 году

Единый Государственный Экзамен по информатике и ИКТ в 2019 году Задания по категориям:  При подготовке данного метериала были использованы ресурсы:  https://inf-ege.sdamgia.ru - РЕШУ ЕГЭ. Информатика. Видеоуроки. Подготовка к ЕГЭ(Ч.1 и Ч.2). 

Admin - avatar Admin 26 Ноя 2018 Просмотров:26 'Подготовка к ЕГЭ (11 класс)

Подробнее

Как узнать сколько знаков в тексте Word?

Как узнать сколько знаков в тексте Word?

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

Admin - avatar Admin 07 Ноя 2018 Просмотров:241 КОМПЬЮТЕРы

Подробнее

Как в ворде вставить формулу суммы?

Как в ворде вставить формулу суммы?

Как в ворде вставить формулу суммы? Несмотря на то, что Microsoft Word является текстовым редактором таблицы в нем встречаются довольно часто. А таблицы, как правило, состоят из числовых значений, которые зачастую...

Admin - avatar Admin 07 Ноя 2018 Просмотров:310 КОМПЬЮТЕРы

Подробнее

Супер хрустящие огурчики на зиму, которы…

Супер хрустящие огурчики на зиму, которые никогда не взрываются

Супер хрустящие огурчики на зиму, которые никогда не взрываются

Admin - avatar Admin 14 Авг 2018 Просмотров:503 САДОГОРОД

Подробнее

Календарь грибника — когда какие грибы с…

Календарь грибника — когда какие грибы собирать

Календарь грибника — когда какие грибы собирать

Admin - avatar Admin 13 Авг 2018 Просмотров:519 САДОГОРОД

Подробнее

Авторизация

НЕ безлимитный почтовый ящик, или Сказ про секретное ограничение Mail.ru

НЕ безлимитный почтовый ящик, или Сказ про секретное ограничение Mail.ru

Подробнее ...

Школьное расписание


Рейтинг@Mail.ru Яндекс.Метрика Рейтинг@Mail.ru