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

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

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

Многоуровневое меню на 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 }

 

 

 

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


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

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

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

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

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

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

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

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

Подробнее

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

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

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

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

Подробнее

Как правильно посадить клубнику сейчас, …

Как правильно посадить клубнику сейчас, чтобы уже на следующий год собрать первый урожай?

Как правильно посадить клубнику сейчас, чтобы уже на следующий год собрать первый урожай?

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

Подробнее

НЕ безлимитный почтовый ящик, или Сказ п…

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

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

Admin - avatar Admin 06 Авг 2018 Просмотров:570 КОМПЬЮТЕРы

Подробнее

Вершинная гниль томатов, лечение.

Вершинная гниль томатов, лечение.

Вершинная гниль томатов, лечение.

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

Подробнее

Опрыскивание томатов от фитофторы в тепл…

Опрыскивание томатов от фитофторы в теплице и открытом грунте: как спасти урожай

Опрыскивание томатов от фитофторы в теплице и открытом грунте: как спасти урожай  

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

Подробнее

Авторизация

Как уменьшить фотографию, изменить размер фото в Paint?
Как уменьшить фотографию, изменить размер фото в Paint?
Подробнее ...

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


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