Лучшие ресурсы для веб мастера и дизайнера
Меню навигации всегда были довольно простыми в создании. Сверстайте неупорядоченный список, установите float:left и готово. С адаптивным дизайном, который сейчас очень популярен, вы столкнётесь с некоторыми новыми трудностями.
Сейчас мы с нуля сверстаем простое, но эффектное адаптивное навигационное меню, которое вы сможете легко модифицировать и многократно использовать в своих проектах.
В нашем новом уроке мы создадим элегантное вертикальное, многоцветное, кроссбраузерное CSS3 меню с трёхмерной анимацией (с помощью свойств CSS3: transition, perspective и transform) и переключатель цветов. Наше меню будет основано на тегах UL-LI.
Сегодня вы увидите, как можно создать прикольное выпадающее многоуровневое навигационное меню, используя при этом чистый CSS со свойствами из CSS3, например, таких-как border-radius, box-shadow, text-shadow и linear gradient. Это меню будет выглядеть идеально в Firefox, Chrome и, конечно, Safari.
Еще совсем недавно Apple.com обновил на своем сайте навигационное меню наверху страницы. Это меню получилось темнее, чем предшественник, в его сером обличии, но выглядеть стало на много лучше.
Одна вещь, которая сразу же бросилась в глаза, это то, что меню было сверстано на изображениях. Мы же попробуем воссоздать это меню, но с помощью техники CSS3.
И так, представляем вам навигационное меню, как на сайте Apple.com, полностью выполненное с помощью CSS3.
Одностраничные сайты тоже имеют право на существование, потому как они, как правило, информативны, понятны и быстро доступны (можно обойтись без PHP и MySQL).
Юзабилити таких сайтов прокачивается с помощью jQuery. Для примера, можно сделать плавную прокрутку между областями контента и подсветку в меню.
Навигация является той вещью, которую вы видите почти на каждом сайте каждый день. Чтобы развеять скуку, было решено создать что-то необычное.
Так родилась идея меню, стилизованного под анимацию слот-машины.
Используя только jQuery, немного CSS и HTML, мы сможем создать что-то подобное.
2 834