Создаем стильное скользящее меню для сайта | RUDEBOXПосле небольшого новогоднего перерыва мы возвращаемся к работе и развитию нашего замечательного ресурса. И первым уроком в новом году будет разработка стильного, скользящего меню для сайта с использованием CSS3. Мы будем использовать графику, в формате png, мы создадим заливку и скользящий блок, который будет реагировать на курсор мыши при наведении на желаемый пункт блок будет плавно скользить к нему, тем самым подчеркивая выбранный элемент. Все это будет выполнено в объемном стиле.

Такое меню станет отличным дополнением для Вашего сайта, все сделано просто и со вкусом, что позволит добавить изюминку к ресурсу. И так, давайте приступим.

Шаг 1. HTML

У нас будет блок с навигацией, в ней мы укажем ссылки и классы, кроме этого добавляем подписи для пунктов, кроме этого, скользящий блок будет разбит на несколько элементов, а именно на три, верх, средняя часть и нижняя. Все эти классы мы указываем в разметке заключенные в div.

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

Создаем стильное скользящее меню для сайта | RUDEBOX

Шаг 2. CSS

Теперь нам необходимо определить все стили для меню, так как у нас не будет JS всю анимацию мы создаем и разрабатываем с помощью стилей. Кроме этого мы устанавливаем слои изображений в формате PNG.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: