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

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

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

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

 

 

 

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


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

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

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

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

Варианты загрузки Mac

Варианты загрузки Mac

Варианты загрузки Mac Большинство современных Mac поддерживают более 10 способов запуска системы. Чтобы попасть в любой из них, нужно зажать определенную кнопку или сочетание клавиш сразу после стартового звука при включении...

Admin - avatar Admin 05 Апр 2018 Просмотров:184 КОМПЬЮТЕРы

Подробнее

Результаты викторины "С легким паром!" c…

Викторина "С легким паром!" c 26 декабря 2017 г. по 2 февраля 2018г. на сайте kit.bsh1.ru *** Скачиваем свои наградные по ссылкам ниже  ... ДИПЛОМЫ, СЕРТИФИКАТЫ ...   1. Козлова Татьяна 95% Диплом 1 степени  2. Баскакова Юлия 90% Диплом 2 степени  3. Баскаков Арсений 87% Диплом 3 степени 4. Ахметзянов Раис 82%    Сертификат...

Admin - avatar Admin 29 Янв 2018 Просмотров:278 ВИКТОРИНИЯ

Подробнее

Викторина "С легким паром!"

Викторина "С легким паром!" Для тех кто пропустил первые две викторины может принять участие в последней в этом году викторине. Всего 10 вопросов. Дается 1 попытка. Ответить надо за 15 минут. Викторина будет действовать: с...

Admin - avatar Admin 25 Дек 2017 Просмотров:406 ВИКТОРИНИЯ

Подробнее

Результаты викторины "Новый год" 24 дека…

Результаты викторины

  Новогодние символы Нового года – Дед Мороз, Снегурочка, новогодняя ель, фильм «Ирония судьбы», новогодние подарки. Праздничный стол  с неизменным блюдом праздника салат «Оливье», главный новогодний фрукт – мандарины, а...

Admin - avatar Admin 25 Дек 2017 Просмотров:368 ВИКТОРИНИЯ

Подробнее

24 декабря 2017 года. ВТОРАЯ ВИКТОРИНА! …

24 декабря 2017 года. ВТОРАЯ ВИКТОРИНА! «НОВЫЙ ГОД»   Коротко о главном: Викторина, посвященная НОВОМУ ГОДУ. Надо выполнить 27 заданий за 41 минуту. Максимально можно заработать 50 баллов. Одна попытка. Начало в 800, 24 декабря 2017 года (любой желающий ...

Admin - avatar Admin 18 Дек 2017 Просмотров:334 ВИКТОРИНИЯ

Подробнее

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

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

Admin - avatar Admin 12 Дек 2017 Просмотров:4863 КОМПЬЮТЕРы

Подробнее

Авторизация

Выбираем объектив к камере видеонаблюдения

Выбираем объектив к камере видеонаблюдения.

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

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

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


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