Плавающая панель навигации страниц сайта | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryПлавающая панель навигации страниц сайта
Дата: 17.04.2013 в 16:06 | Просмотров: 5303

Плавающая панель навигации страниц сайта

Плавающая панель навигации страниц сайта
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы создадим CSS3 меню навигации по сайту. Чем-то оно похоже на горизонтальное выпадающее меню на CSS3, которые мы создавали в другой статье. Но только в данном случае, это будет плавающая панель, с раздвижные выпадающим меню и фиксированным положением в нижней части экрана. Кроме того, мы будем использовать функции JQuery, чтобы создать некоторые красивые эффекты. Ещё пример выдвигающегося меню, и с красивыми эффектами, читайте в статье “Выдвигающееся меню навигации на JQuery”. Вообще, плавающей панели стоит уделить важное внимание, так как в ней можно разместить все, что угодно, не только навигацию, но и рекламу, ссылки на статьи и так далее.

Конечный результат Вы можете увидеть, пройдя по ссылке демо (расположена выше). Итак, приступим!

Структура HTML

Это наша html конструкция. Пункты меню будут созданы с помощью списков ul.

Здесь мы подключаем необходимые скрипты, стили и прописываем всю структуру страницы. Навигация по сайту, каждый пункт меню, включает в себя также иконки, которые мы прописали.

Стили CSS

Сейчас мы имеем не очень красивое меню, поэтому естественно зададим стили.

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

JavaScript

На данном этапе наша панель не имеет никакой анимации, поэтому с помощью jQuery “оживим” ей.

Что мы сделали? Создали эффект плавно выезжающих ссылок меню, а также самой панели.
На этом все. Мы создали простое, но практичное раздвижное меню.

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.script-tutorials.com/css3-bottom-navigation-menu/
Перевел: Владислав Бондаренко


Добавить комментарий