При копировании материала с этой страницы вы обязаны установить ссылку на нее согласно ч.4 Гражданского Кодекса РФ об интеллектуальных правах. В случае нарушения данного требования кража контента будет преследоваться по закону.
Учебник ucoz
Суббота, 27.05.2017, 01:46
Приветствую Вас Гость | RSS
 
Главная РегистрацияВход
Учебник ucoz
Форма входа
Главная » 2012 » Июнь » 15 » Скрипт меню для ucoz
10:03
Скрипт меню для ucoz

скрипт меню для ucozСкрипт меню для ucoz популярный поисковый запрос. Красивое меню для сайта ucoz стимулирует пользователей совершать активные действия по переходу на новые страницы. Всегда приятно нажимать меню сайта, если оно гармонично с общим дизайном и словно просит: «Нажми меня!».

Скрипт меню для ucoz поможет воплотить вам различные идеи по созданию красивого меню.

Предлагаем очень простой в установке скрипт меню для ucoz, с которым справится даже новичок.

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


<div class="slider">
  <span id="root"></span>
  <span id="parent1"></span>
  <span id="parent2"></span>
  <span id="parent3"></span>
  <span id="child1"></span>
  <span id="child2"></span>
  <span id="subchild1"></span>

  <div id="tabs">
  <dl>
  <dd>
  <a class="fwd" href="#parent1">Меню #1</a>
  <a class="fwd" href="#parent2">Меню #2</a>
  <a class="fwd" href="#parent3">Меню #3</a>
  </dd>
  </dl>
  <dl class="parent1">
  <dd>
  <a class="fwd" href="#child1">Пункт #1#1</a>
  <a class="fwd" href="#child2">Пункт #1#2</a>
  <a href="#">Пункт #1#3</a>
  <a href="#">Пункт #1#4</a>
  <a href="#">Пункт #1#5</a>
  </dd>
  <dd><a href="#root">Назад</a></dd>
  </dl>
  <dl class="parent2">
  <dd>
  <a href="#">Пункт #2#1</a>
  <a href="#">Пункт #2#2</a>
  <a href="#">Пункт #2#3</a>
  <a href="#">Пункт #2#4</a>
  <a href="#">Пункт #2#5</a>
  </dd>
  <dd><a href="#root">Назад</a></dd>
  </dl>
  <dl class="parent3">
  <dd>
  <a href="#">Пункт #3#1</a>
  <a href="#">Пункт #3#2</a>
  <a href="#">Пункт #3#3</a>
  <a href="#">Пункт #3#4</a>
  <a href="#">Пункт #3#5</a>
  </dd>
  <dd><a href="#root">Назад</a></dd>
  </dl>
  <dl class="child1">
  <dd>
  <a class="fwd" href="#subchild1">SubПункт #1#1</a>
  <a href="#">SubПункт #1#2</a>
  <a href="#">SubПункт #1#3</a>
  <a href="#">SubПункт #1#4</a>
  <a href="#">SubПункт #1#5</a>
  </dd>
  <dd><a href="#parent1">Назад</a></dd>
  </dl>
  <dl class="child2">
  <dd>
  <a href="#">SubПункт #2#1</a>
  <a href="#">SubПункт #2#2</a>
  <a href="#">SubПункт #2#3</a>
  <a href="#">SubПункт #2#4</a>
  <a href="#">SubПункт #2#5</a>
  </dd>
  <dd><a href="#parent1">Назад</a></dd>
  </dl>
  <dl class="subchild1">
  <dd>
  <a href="#">Links #1</a>
  <a href="#">Links #2</a>
  <a href="#">Links #3</a>
  </dd>
  <dd><a href="#child1">Назад</a></dd>
  </dl>
  </div>

</div>

Когда скрипт меню для ucoz будет установлен, перейдите в Дизайн – Управление дизайном (css).

В таблицу стилей добавьте этот код скрипта меню для ucoz:

.slider { background-color: #FFFFFF; border: 1px solid #000000; margin: 50px auto; overflow: hidden; padding: 10px; position: relative; width: 200px; } .slider span { display:none } #tabs { background-color: #FFFFFF; margin-left: 0; overflow: hidden; width: 2000px; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; } #tabs dl { float: left; height: 300px; margin: 0; opacity: 0; padding: 0; position: relative; width: 200px; } #tabs dl:first-child { opacity:1; } #tabs dl dd a.fwd { background-color:#C8CEFF; } #tabs dl dd a { background-color: #F4F5FE; color: #000000; display: block; font-size: 18px; line-height: 32px; margin: 10px; text-align: center; text-decoration: none; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; } #tabs dl dd:first-child { height: 250px; overflow: auto; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; } #tabs dl dd a:hover { box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); } #root:target ~ #tabs { margin-left:0; } #parent1:target ~ #tabs { margin-left:-200px; } #parent2:target ~ #tabs { margin-left:-400px; } #parent3:target ~ #tabs { margin-left:-600px; } #child1:target ~ #tabs { margin-left:-800px; } #child2:target ~ #tabs { margin-left:-1000px; } #subchild1:target ~ #tabs { margin-left:-1200px; } #parent1:target ~ #tabs .parent1 { opacity:1; } #parent2:target ~ #tabs .parent2 { opacity:1; } #parent3:target ~ #tabs .parent3 { opacity:1; } #child1:target ~ #tabs .child1 { opacity:1; } #child2:target ~ #tabs .child2 { opacity:1; } #subchild1:target ~ #tabs .subchild1 { opacity:1; }

Не забываем сохранить изменения после внесения. На этом установка скрипта меню для ucoz завершена. Можно перейти к следующему этапу: форматированию меню для ucoz. Меняете скрипт меню для ucoz по своему усмотрению.

Категория: Шаблоны, скрипты | Просмотров: 1752 | Добавил: admin | Теги: Скрипт меню для ucoz, скрипт меню, меню ucoz | Рейтинг: 4.5/4
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Обучение
Хостинг, домены [15]
Заработок [14]
Шаблоны, скрипты [12]
Оптимизация и раскрутка [50]
Реклама [4]
Поисковики [14]
Блоги [7]
Видеоуроки [5]
Программирование [3]
WEB-дизайн [6]
CMS [7]
Игры [1]
Архив записей
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright polza.my1.ru © 2017
Бесплатный хостинг uCoz