В сегодняшнем небольшом уроке мы создадим меню в стиле MAC с помощью новых свойств CSS3.

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

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

Ниже представлена картинка, которая показывает разницу между браузерами:

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

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

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

CSS код

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

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

<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>

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

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