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

Ответить
Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01.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

Ответить