Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 21:40
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 19
Гостей: 18
Пользователей: 1
LESIYI



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

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

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



Установка:
находим тег <body> и заменяем его на всех страницах сайта
Code
<body onload="menuSlider.init('fmenu','slide')">


В <head> ***</head> (что такое head?) вставляем скрипт функциональности меню
Code
<script type="text/javascript" language="javascript" src="http://ucozon.ru/SCRIN7/2/menu3213/arhivstop.js"></script>


Далее сам код который вы редактируете под свои ссылки и вставляете в удобное для вас место, к примеру блок контейнера, или ввержению часть сайта, или уже в сам модуль
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
    <script type="text/javascript" src="http://ucozon.ru/SCRIN7/2/menu3213/jquery.js"></script>

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

    Для того что бы скачать архив необходимо зайти на сайт как пользователь.
    Просмотров: 5182 | Комментарии: 20 | Рейтинг: 4.8/5 | |Категория: Скрипты блоки и шапки | Добавил: мир | Дата: 22.06.2011 | Скачали: 0 | Теги: меню, наведения, Горизонтальное, бегунком
    Похожие новости на нашем сайте
    Коментарий к новости

    Всего комментариев: 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]
    ПОМОГИТЕ!!!бегунок работает только на главной,на форуме и остальных страницах его нету

    +1   Спам
    18 MDNdemon   Дата: 17.12.2011  Время: 12:13   1 [№ 11547]
    значит ты не всё поставил.... Просмотри внимательно всё ещё раз!

    16 bekk777   Дата: 25.11.2011  Время: 07:12   [№ 11257]
    Админ Рэспекто от Бек!!! хорош и ответственный и все скрипты шаблоны который я скачал работает отдуши +5 я бы с радостью взял бы твою баннер кнопку на свои саит,,,без лишних реклам и блогов ,,,все четко и крачиво,,круто вообще

    15 bekk777   Дата: 25.11.2011  Время: 07:09   [№ 11256]
    круто вообще

    14 as1997lol   Дата: 01.07.2011  Время: 13:52   [№ 9300]
    а у меня она почти такая ток уменя названия подчеркнуты =(

    13 German   Дата: 27.06.2011  Время: 22:03   [№ 9231]
    Кул))

    12 mr_garga   Дата: 27.06.2011  Время: 14:29   [№ 9230]
    спс за меню, я взял зелёный

    11 frolov1028   Дата: 23.06.2011  Время: 11:58   [№ 9178]
    хорошее меню, но у меня не появилась полоска что бегает

    9 efeserg   Дата: 22.06.2011  Время: 19:12   [№ 9171]
    не эт не новые словечки
    тру-true на англ, что переводится правильно, супер и т.д.

    10 mr_garga   Дата: 22.06.2011  Время: 19:34   1 [№ 9172]
    true это истинно, то есть правда

    8 as1997lol   Дата: 22.06.2011  Время: 18:06   [№ 9170]
    Спасибо всё робит=) красавчик

    4 efeserg   Дата: 22.06.2011  Время: 14:49   [№ 9164]
    тру стили, от тру автора

    5 мир   Дата: 22.06.2011  Время: 15:41   1 [№ 9165]
    Если кто то понял что этот пользователь написал то переведите мне.

    6 Melkiy   Дата: 22.06.2011  Время: 15:58   2 [№ 9166]
    тру-это значит типо супер,круто значит
    крутые стили от супера автора=\

    7 мир   Дата: 22.06.2011  Время: 17:08   3 [№ 9167]
    Это что новые словечки в жаргоне объявились получается))

    3 gutty   Дата: 22.06.2011  Время: 14:44   [№ 9163]
    Порадовало

    2 яйцо   Дата: 22.06.2011  Время: 12:21   [№ 9162]
    Супер!

    1 STAFF   Дата: 22.06.2011  Время: 12:05   [№ 9159]
    Очень красивые меню!


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Форма входа
    Логин:
    Пароль:


    Поиск


    На форуме

    1 Файловик. Уникальные те...

    0

    2 Куплю сайты в индексе Я...

    1

    3 Куплю сайты с ТИЦ/PR (п...

    9

    4 Предлагаю услуги для ан...

    0

    5 Предлагаю услуги по про...

    0

    6 Комплексный прогон сайт...

    51

    7 Сайт онлайн фильмов на ...

    1

    8 Проблема с таблицей

    9

    9 Отредактировать фото

    2

    10 Уже все перепробовал )

    1


    Подробней о форуме


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


    Кнопка 88х31 сайта ucozon.ru