CSS3 выпадающее меню

Аватара пользователя
SLITE
Сообщения: 204
Зарегистрирован: 01 янв 2010
В сегодняшнем небольшом уроке мы создадим меню в стиле MAC с помощью новых свойств CSS3.

Это меню будет мультиуровневым и при создании его были использованы следующие свойства CSS3 - border-radius, box-shadow, и text-shadow.

Данное меню прекрасно отображается в Firefox, Safari и Chrome. Также меню работает и в других браузерах, но без скругленных углов.
Ниже представлена картинка, которая показывают разницу между браузерами:
1.gif


Одна картинка

Одна бело-прозрачная картинка используется для достижения эффекта градиента. Поскольку новое CSS3 свойство градиента не поддерживается всеми браузерами, безопаснее использовать фоновое изображение.
2.gif

Интенсивность градиента можно изменить смещением фона вниз или вверх. Также, цвет градиента можно легко подстроить меняя фоновый цвет.
3.gif


CSS код

Автор урока предпочел построчно не расписывать каждую строку кода. Все понятно по одной картинке:
5.gif


От себя добавлю структуру данного меню.

Код: Выделить всё

<ul id="nav">
<li class="current"><a href="http://www.webdesignerwall.com">Home</a></li>
<li><a href="http://www.ndesign-studio.com">My Projects</a>

<ul>
<li><a href="http://www.ndesign-studio.com">N.Design Studio</a>
<ul>
<li><a href="http://www.ndesign-studio.com/portfolio">Portfolio</a></li>
<li><a href="http://www.ndesign-studio.com/wp-themes">WordPress Themes</a></li>
<li><a href="http://www.ndesign-studio.com/wallpapers">Wallpapers</a></li>
<li><a href="http://www.ndesign-studio.com/tutorials">Illustrator Tutorials</a></li>

</ul>
</li>
<li><a href="http://www.webdesignerwall.com">Web Designer Wall</a>
<ul>
<li><a href="http://jobs.webdesignerwall.com">Design Job Wall</a></li>
</ul>
</li>
<li><a href="http://icondock.com">IconDock</a></li>

<li><a href="http://bestwebgallery.com">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>

<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>

</ul>
</li>

<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>

<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


Тут используется простой неупорядоченный список с несколькими уровнями вложенности. Все предельно просто!

Оставайтесь с нами! Сегодня Вас ждет много уроков!

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: http://www.webdesignerwall.com
Вложения
4.gif

Вернуться в «Уроки и статьи по веб-дизайну»