главная
файлы
Контакты
регистрация
Навигация
Главная
Шаблоны
Скрипты
Статьи
Иконки
Веб дизайн
Программы
Прочее
 

Ucozu Talk

Для добавления необходима авторизация
 

Популярные переходы
 

RSS лента

RSS лента

Подпишись на обновления по электронной почте!
 

Опрос
Что-бы вы хотели видеть больше всего у нас на сайте ?
[ Результаты · Архив опросов ]
Всего ответов: 185
 

Выпадающее меню со вкладками

Добавил: Вадим
Оценка:
  • 1
  • 2
  • 3
  • 4
  • 5


Ранее на нашем сайте был выложен скрипт вкладок для Ucoz который достаточно популярен, теперь я решил выложить более усовершенственную версию этого скрипта выпадающее меню со вкладками.


1.Копируем само тело меню, cами пункты меню формируются на основе неупорядоченного списка.

Code
<!-- Элементы закладок основного меню -->
  <div id="tabs-container">
  <ul class="tabs">
  <li class="active"><a href="#">Раздел 1</a></li>
  <li><a href="#">Раздел 2</a></li>
  <li><a href="#">Раздел 3</a></li>
  <li><a href="#">Раздел 4</a></li>
  </ul>
  </div>

  <!-- Верхнее меню -->
  <div id="nav-container">
  <ul class="nav" id="1">
  <!-- Элементы верхнего меню -->
  <li><a href="#">Меню 1</a></li>
  <li><a href="#">Меню 2</a>
  <!-- Элементы подменю -->
  <ul class="sub">
  <li><a href="#">Подменю 2_1</a></li>
  <li><a href="#">Подменю 2_2</a></li>
  <li><a href="#">Подменю 2_3</a></li>
  <li><a href="#">Подменю 2_4</a></li>
  </ul>
  </li>
  . . .
  </ul>
. . .
  </div>



2.Устанавливаем стили в таблицу стилей css.

Code
/* Стили основного меню */

/* Секция закладок */
#tabs-container {
  clear:both;
  font-size:11px;
  height:26px;
  margin:0 auto;
  padding:0
}
.tabs li {
  float:left;
  list-style:none;
  position:relative
}
.tabs li a:first-child {
  margin-left:10px
}
.tabs li a {
  background:#f3f3f3;
  border:none;
  border-left:1px solid #d5d5d5;
  border-right:1px solid #d5d5d5;
  border-top:1px solid #d5d5d5;
  color:#333;
  display:block;
  margin:0 2px 0 0;
  padding:6px 10px 4px
}
.tabs li.active a {
  -webkit-border-radius:4px 4px 0 0;
  background:#fff;
  border-bottom:1px solid #fff;
  border-left:1px solid #d5d5d5;
  border-radius:4px 4px 0 0;
  border-right:1px solid #d5d5d5;
  border-top:1px solid #d5d5d5;
  color:#222;
  display:block;
  padding:6px 10px 4px
}
.tabs li.child a {
  -webkit-border-radius:0 4px 0 0;
  background:#f3f3f3;
  border-radius:0 4px 0 0;
  color:#333;
  display:block;
  margin:0;
  padding:6px 10px 4px
}
.tabs li a:hover {
  background:#fafafa;
  border-bottom:1px solid #d5d5d5;
  color:#fff;
  text-decoration:none
}

/* Меню первого уровня */
.tabs {
  display:block;
  margin:0;
  padding:1px 0 2px;
  position:absolute;
  z-index:100
}
.tabs > li > a:hover {
  background:#ececec;
  color:#222
}
.tabs > li.active > a:hover {
  -moz-border-radius:3px 3px 0 0;
  -webkit-border-radius:3px 3px 0 0;
  background:#fff;
  border-bottom:1px solid #fff;
  border-radius:3px 3px 0 0;
  color:#222
}

/*Выпадающая навигация*/
#nav-container {
  border-bottom:1px solid #d5d5d5;
  border-top:1px solid #d5d5d5;
  clear:both;
  font-size:11px;
  height:33px;
  margin:0 auto;
  padding:0
}

/* Меню первого и второго уровня */
.nav li {
  float:left;
  list-style:none;
  position:relative
}
.nav li a {
  background:url(images/arrow.png) no-repeat right;
  border:none;
  color:#222;
  display:block;
  margin:0 5px 0 0;
  padding:5px 20px 5px 8px
}

/* Меню первого уровня */
.nav {
  display:block;
  margin:0;
  padding:5px 0 2px;
  position:absolute;
  z-index:100
}
.nav > li > a:hover {
  -moz-border-radius:3px 3px 0 0;
  -webkit-border-radius:3px 3px 0 0;
  background:#507aa5 url(images/arrow_hover.png) no-repeat right;
  border-radius:3px 3px 0 0;
  color:#fff;
  padding:5px 20px 5px 8px
}

/* Меню второго уровня */
.nav li ul {
  -moz-border-radius-bottomleft:3px;
  -moz-border-radius-bottomright:3px;
  -moz-border-radius-topright:3px;
  -moz-box-shadow:1px 1px 1px #333;
  -webkit-border-bottom-right-radius:3px;
  -webkit-box-shadow:1px 1px 1px #333;
  background:#507aa5;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
  border-top-right-radius:3px;
  box-shadow:1px 1px 1px #333;
  color:#222;
  display:none;
  margin:0;
  padding:2px 0;
  position:absolute;
  width:140px
}
.nav li ul li {
  width:100%
}
.nav li ul li a {
  background:#507aa5;
  border:none;
  color:#fff;
  line-height:25px;
  margin:0;
  padding:0 0 0 8px
}
.nav li ul li a:hover {
  background:#466A90
}
.nav li ul li.strong-archive a {
  border-top:1px solid #466A90;
  font-weight:600
}

/* Класс добавляется с помощью jQuery */
.nav li.current > a {
  -moz-border-radius:3px 3px 0 0;
  -moz-box-shadow:1px 1px 1px #333;
  -webkit-border-radius:3px 3px 0 0;
  -webkit-box-shadow:1px 1px 1px #333;
  background:#507aa5 url(images/arrow_hover.png) no-repeat right;
  border-radius:3px 3px 0 0;
  box-shadow:1px 1px 1px #333;
  color:#fff
}

/* Обратная совместимость CSS */
.nav li:hover > ul.child {
  display:block
}



3.Устанавливаем jQuery плагин для работы меню перед закрывающим тегом body.

Code
<br> $(document).ready(function(){ <br> $('.tabs li a').click(function () { <br> $('.tabs li').removeClass('active'); <br> $(this).parent().addClass('active'); <br><br> $('.nav').hide(); <br> var index = $('.tabs li a').index(this); <br> $('.nav').eq(index).show(); <br> return false; <br> }); <br><br> $('.nav li').has('ul').hover(function(){ <br> $(this).addClass('current').children('ul').fadeIn(); <br> }, function() { <br> $(this).removeClass('current').children('ul').hide(); <br> }); <br> }); <br>


Смотреть демо
Автор\Источник: ruseller.com
Добавлено: 25.07.2012 в 15:39
Вы находитесь на странице материала Выпадающее меню со вкладками из раздела нашего сайта

Скрипты для ucoz

который можно скачать совершенно бесплатно и без регистрации.
Также рекомендуем:
  • Кисти (краски) для фотошопа
  • Игровой шаблон Crea-Game Green для ucoz
  • Шаблон - u7even для uCoz
  • Галерея Egallery. Шаблон для Ucoz.
  • Шаблон Аниме для uCoz
  • Комментарии сайта
  • Комментарии Вконтакте
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
О нас
Ucozu.Ru - перспективный сайт с удобным дизайном и многими уникальными статьями, файлами. Здесь вы сможете скачивать и просматривать файлы без регистрации.На нашем сайте вы найдёте много шаблонов,скриптов и тд.Все для uCoz.Так же множество статей по раскрутки вашего сайта и системе uCoz.
 

Кто онлайн
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи
Гости сайта
 

 

Рекомендуем
Волоконно-оптические кроссы

Последние комментарии
17:06
winbloger
Понравился шаблон, спасибо!
Ответить
30.01.2015
12:40
Peshka0973
Если отображение страницы исчезло, то скорее всего потерли лишнего. А вставлять надо туда, где должн
Ответить
18.08.2014
13:11
Peshka0973
А конкретнее можно? Как ругается при этом?
Ответить
02.04.2014
11:58
Arrow
не рабоотает
Ответить
02.04.2014
09:55
Peshka0973
Когда вызываешь файловый менеджер, из меню - Управление - Файловый менеджер, то в первое окно которо
Ответить
18.03.2014
09:01
Peshka0973
Крик души ? ;о))
По какому поводу, и кто имеется ввиду ?
Ответить
14.02.2014
14:22
Leonid
Что за люди ._. стыдно за таких. Учите русский и книжки читайте для общего развития.
Ответить
13.02.2014
09:38
Peshka0973
А полный текст ошибки?
Ответить
10.01.2014
18:30
_dahack_
Админы помогите!!! у меня проблема с разделом "Стена" пишет App is blocked и фото не грузя
Ответить
09.01.2014
09:16
Peshka0973
А почему мы не должны верить? Мы все должны тебя поблагодарить за труд ! :о))
Сейчас ты навер
Ответить
09.01.2014
09:39
Peshka0973
Какая панель имеется ввиду? Что касается расположения информеров, то в CSS гляньте.
Советую п
Ответить
29.11.2013
23:04
Аля
все установила,все получилось. Только не высвечивается сверху сама панель управления и конструктор с
Ответить
27.11.2013
11:59
Peshka0973
Да, прикольная :о))
Ответить
30.05.2013
15:22
Aviana
Клевая! respect
Ответить
29.05.2013
09:44
Peshka0973
Снизу под статьей справа есть кнопка - Скачать файл. Жми и получай, регистрироваться не надо.
Ответить
13.05.2013

©Ucozu.Ru 2018