вРазные полезности

Как сделать вертикальное меню для uCoz

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

Но прежде чем перейти к инструкции по установке бокового меню хотелось бы вернуться к моей заметке о монетизации сайта при помощи GoGetLinks. Уже после ее публикации я нашел очень хороший материал, который еще более детально описывает процесс работы с этой биржей. Так что если вы решили попробовать поработать с этой системой — рекомендую ознакомиться с подробной инструкцией от Сергея Первушина: gogetlinks.

Многофункциональное вертикальное меню для uCoz

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

Установка меню

Шаг 1: Установка HTML
Добавляем HTML-код бокового меню: Панель управления → Дизайн → Управление дизайном (шаблоны) → Верхняя часть сайта:

Код
Шаг 2: Установка CSS

Добавляем CSS-код стилей бокового меню. Для этого переходим в Панель управления → Дизайн → Управление дизайном (CSS) и вставляем код (для вывода цветного или темного меню):

Цветное боковое меню uCoz. Расположение слева:

Код
Темное боковое меню uCoz. Расположение справа:

Код
Также я расскажу об ещё одном варианте создания бокового меню на сайте uCoz.

Анимированное вертикальное меню для сайта на CSS3

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

По умолчанию в меню будет десять пунктов. При желании ненужные пункты можно удалить, переименовать их или добавить свои. Каждый пункт меню оформляется в виде иконки, в тёмных тонах на светлом фоне. Фон, размер и цвет самих иконок также можно изменять. При наведении курсора мыши каждый пункт будет окрашиваться в отдельный цвет, с появлением подписей и эффектом анимации. Меню будет располагаться с левой стороны.

Установка меню

Шаг 1: HTML

Приведенный ниже HTML-код необходимо вставить в верхнюю часть сайта: Панель управления → Дизайн → Управление дизайном (шаблоны) → Верхняя часть сайта:

Код
Шаг 2: CSS
Теперь самое главное: нам необходимо стилизовать нашу навигацию. Для этого в самый верх таблицы стилей (Панель управления → Дизайн → Управление дизайном (CSS) → Таблица стилей) добавляем следующий CSS-код :

Расположение слева

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

P.S.: после установки обновите кэш страницы, нажмите Ctrl+F5.

  • Автор: Дмитрий Луценко

Источник: uguide.ru

Похожие посты