Приветствую Вас Прохожий | RSS

Пятница, 20.06.2025, 08:17

Меню сайта

Гостевая сайта

РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА

Категории раздела

Скрипты блоки и шапки [337]

Скрипты Вид новостей [366]

Скрипты php для ucoz [47]

Скрипты для форума [186]

Скрипты информеры [118]

Скрипты Разное [1105]

Мини-чат

Все вопросы задаем в форуме,
здесь они игнорируются!

Блок спам рекламы

Сайт села Екатерининско* .

Фильмы, сериалы торрент .

НОВИНКИ 2019 В FULLHD 4* .

Лучшее Хип-Хоп радио St* .

ФИЛЬМЫ ОНЛАЙН В HD! .

Облачный майнинг HF18BD* .

Сайт за 6000 wmr .

http://ucozon.ru/forum/* .

Lineagw 2: Revolution .

Фильмы на планшет торре* .

Добавлять могут только пользователи зарегистрированные 15 суток.

Статистика

Онлайн всего: 13

Гостей: 13

Пользователей: 0

Кто нас сегодня посетил
Статистика посетителей
Подписка на новости
День рождения

Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

Меню горизонтальное с бегунком наведения

Предлагаю вашему вниманию горизонтальное мню с подвижностью выделения при наведение на кнопки навигации. Живой пример можно просмотреть на этой странице так же можно выбрать любой цвет подложки самого меню из ниже предо ставленых меню горизонтальное с бегунком:

Установка:
находим тег <body> и заменяем его на всех страницах сайта

Code

В <head> ***</head> (что такое head?) вставляем скрипт функциональности меню

Code

Далее сам код который вы редактируете под свои ссылки и вставляете в удобное для вас место, к примеру блок контейнера, или ввержению часть сайта, или уже в сам модуль

Code

<div class="fmenu"><ul id="fmenu">
  <li value="1"><a href="/">UCOZON.RU</a></li>
  <li><a href="/forum/0-0-1-35">Участники</a></li>
  <li><a href="/forum/6-10-1">Правила</a></li>
  <li><a href="/forum/0-0-0-6">Поиск</a></li>
  <li><a href="forum/0-0-1-34">Новое</a></li>
  <li><a href="/forum/0-0-0-37">RSS</a></li>
</ul><div id="slide"></div></div>

далее подключаем сам стиль и цвет в нескольких вариаций вставляем в таблицу стилей для каждого цвета свой код, в принципе разница в них только в ссылке на картинку фона которую вы можете отредактировать под свой цвет если вам из предложенных не подходит, и так вставляем в таблицу стилей CSS:

для такого цвета используем такой тип стиля синий с бликом

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля к4расный без блика

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu3.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля рыжий без блика

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu4.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля оранжевый в полоску

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu5.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля зеленоватый в штрих

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu6.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля черный стильный без блика

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu7.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля ярко салатовый без блика

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu8.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля фиолетовый яркий без блика

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu9.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля простой салатовый

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu10.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля оранжевый с бликом горизонтальным

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu11.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

для такого цвета используем такой тип стиля голубенький с бликом полоски

Code

.fmenu {position:relative; margin:0; padding:0; background:url(http://ucozon.ru/SCRIN7/2/menu3213/fonmenu12.png) repeat-x; height:37px; width:auto}
.fmenu ul {list-style:none; margin:0; padding:0; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.fmenu li {float:left; margin:0; padding:0}
.fmenu a, .fmenu a:active, .fmenu a:visited, .fmenu a:hover {text-decoration:none; margin:0; padding:0; color:#ffffff; font-size : 9pt; font-weight : bold; text-align: center; padding:10px}
#slide {position:absolute; top:1px; height:35px; margin:0; padding:0; background:#bed4e5; opacity: 0.3; z-index:10}

Выбираем себе стиль и используем.
Менюшка работает на jquery, и по умолчанию в страницах есть эта библиотека, если вы решили вставлять не в страницу модуля а отдельную то вам придется для функциональности добавить и еще такой скрипт библиотеки jquery в <head> ***</head> (что такое head?)

Code

все удачи если есть вопросы то пишем тут в комментариях на нашем сайте http://ucozon.ru
если у вас тег <body> не чистый а с продолжением стиля или какой либо другой функциональностью, то пишем его тут в комментариях и я вам вставлю сам наложение функции скрипта меню.
Удачи.
Автор: мир

Автор\Источник: ucozon.ru
Для того что бы скачать архив необходимо зайти на сайт как пользователь.

Похожие новости на нашем сайте

Коментарий к новости

Всего комментариев: 20

Порядок вывода комментариев:

20 Jet_Shark Дата: 19.02.2013 Время: 16:11 [№ 14499] [Материал]

А как на этом меню, сделать подменю выпадающее ??? Помогите плиз!

19 p1ka4y777 Дата: 06.02.2012 Время: 04:07 [№ 12131] [Материал]

Извините, но я новичок в этом... Помогите люди кому не трудно... Я учусь делать сайты и меня заинтересовала эта тема, всмысле эта горизонтальная менюшка :( Как бы я её установил по даной више инструкции... и всё норм было, тоисть самое меню работало, но возникли проблемы с ФОНОМ =(
я заменил это <body style="background: url(images/fon.jpg) no-repeat center bottom fixed; margin:0px; padding:0px;"> на тэг, данный в самом начале и фон пропал... помогите ребята... можно ли как то объединить фон с этим <body onload="menuSlider.init('fmenu','slide')"> ??? если знаете отпишитесь плиз...

17 LiTeS Дата: 17.12.2011 Время: 00:28 [№ 11545] [Материал]

ПОМОГИТЕ!!!бегунок работает только на главной,на форуме и остальных страницах его нету

18 MDNdemon Дата: 17.12.2011 Время: 12:13 № 1 [№ 11547] [Материал]

значит ты не всё поставил.... Просмотри внимательно всё ещё раз!

16 bekk777 Дата: 25.11.2011 Время: 07:12 [№ 11257] [Материал]

Админ Рэспекто от Бек!!! хорош и ответственный и все скрипты шаблоны который я скачал работает отдуши +5 я бы с радостью взял бы твою баннер кнопку на свои саит,,,без лишних реклам и блогов ,,,все четко и крачиво,,круто вообще