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

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

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

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

 

 

 

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


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

ШКОЛЬНЫЙ ВЕСТНИК. Выпуск №2 (Октябрь 2019)

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

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

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

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

Звездные врата Вселенная Stargate Unive…

Звездные врата Вселенная Stargate  Universe

Звездные врата: Вселенная   Stargate: Universe 2 сезона Сезон 1 Сезон 2 2009 2010  

Admin - avatar Admin 17 Ноя 2019 Просмотров:92 ФАНТАСТИКА

Подробнее

Звездные врата (StarGate SG-1)

Звездные врата (StarGate SG-1)

Звездные врата   StarGate SG-1 10 сезонов   1 2 3 4 5       1997 1998  1999  2000 2001    6 7 8 9 10 2002  2003 2004  2005 2006 Описание В 1994 году режиссер Роланд Эмг/ерих и сценарист Лин Левлин представили на суд публики ленту «Звездные врата». После того как приключенческий боевик о загадочном портале в удивительные инопланетные миры...

Admin - avatar Admin 17 Ноя 2019 Просмотров:54 ФАНТАСТИКА

Подробнее

Звездные врата: Атлантида (Stargate: Atl…

Звездные врата: Атлантида (Stargate: Atlantis)

Звездные врата: Атлантида   Stargate: Atlantis 5 сезонов 1 сезон  2 сезон 3 сезон 4 сезон 5 сезон  2004г.  2005г. 2006г.  2007г.  2008г.  

Admin - avatar Admin 17 Ноя 2019 Просмотров:61 ФАНТАСТИКА

Подробнее

Устали? Поиграйте в шахматы!

В НОВОМ ОКНЕ

Семь золотых правил по поддержке диска + 1

Семь золотых правил по поддержке диска

Давайте начнем с профилактического подхода по поддержке файловой системы. Какие шаги должен предпринять администратор для того, чтобы защитить файловую систему от различных проблем в первую очередь? Здесь приведены семь золотых правил на эту тему, порядок которых не обязательно соблюдать:

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

Авторизация

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

Результаты международной олимпиады ФЕВРАЛЬ-2015 от ВИДЕОУРОКИ.НЕТ

Результаты международной олимпиады ФЕВРАЛЬ-2015 от ВИДЕОУРОКИ.НЕТ Дипломы, сертификаты и подарки смотреть можно ЗДЕСЬ! (всё вместе из облака!!!)   Результаты олимпиад:    Международный конкурс по математике 3 класс «В лабиринте чисел» Аверьянов Альберт 18 из 32 Сертификат,  Борзихин Тимур 17 из...

Admin 26 Фев 2015 Просмотров:6456 Новости БСОШ №1

Подробнее

Top.Mail.Ru Яндекс.Метрика TIiIKT  ikt24.org.ru  gerb