Новые сообщения · Участники · Правила форума · Поиск
Страница 1 из 3123»
Модератор форума: z-17, Anarki 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Многоуровневое горизонтальное выпадающее меню (Анимированное)
Многоуровневое горизонтальное выпадающее меню
MHДата: Понедельник, 05.12.2011, 11:40 | Сообщение # 1
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
Скрипт многоуровневого выпадающего меню с анимацией на css3 и js









УСТАНОВКА


1) Непосредственно код самого меню - вставлять куда необходимо:

Code
<ul id="menu">
    <li><a href="">Ссылка1</a></li>

    <li>
     <a href="">Ссылка2</a>
     <ul>
      <li>
       <a href="">Раздел1</a>
       <ul>
        <li><a href="">Подраздел1</a></li>
        <li><a href="">Подраздел2</a></li>
        <li><a href="">Подраздел3</a></li>
        <li><a href="">Подраздел4</a></li>
       </ul>       
      </li>
      <li>
       <a href="">Раздел2</a>

       <ul>
        <li><a href="">Подраздел1</a></li>
        <li><a href="">Подраздел2</a></li>
        <li><a href="">Подраздел3</a></li>
        <li><a href="">Подраздел4</a></li>
       </ul>       
      </li>

      <li>
       <a href="">Раздел3</a>
       <ul>
        <li><a href="">Подраздел1</a></li>
        <li><a href="">Подраздел2</a></li>
        <li><a href="">Подраздел3</a></li>
        <li><a href="">Подраздел4</a></li>

       </ul>       
      </li>
      <li>
       <a href="">Раздел4</a>       
       <ul>
        <li><a href="">Подраздел1</a></li>
        <li><a href="">Подраздел2</a></li>
        <li><a href="">Подраздел3</a></li>
        <li><a href="">Подраздел4</a></li>
       </ul>    
      </li>
     </ul>
    </li>
    <li>
     <a href="">Ссылка3</a>
     <ul>

      <li>
       <a href="">Раздел1</a>
       <ul>
        <li>
         <a href="">Подраздел1</a>     
         <ul>
          <li><a href="">Подраздел11</a></li>
          <li><a href="">Подраздел12</a></li>
          <li><a href="">Подраздел13</a></li>
         </ul>          
        </li>
        <li>
         <a href="">Подраздел2</a>
         <ul>
          <li><a href="">Подраздел21</a></li>
          <li><a href="">Подраздел22</a></li>
          <li><a href="">Подраздел23</a></li>
         </ul>          
        </li>
        <li>
         <a href="">Подраздел3</a>
         <ul>
          <li><a href="">Подраздел31</a></li>
          <li><a href="">Подраздел32</a></li>

          <li><a href="">Подраздел33</a></li>
         </ul>          
        </li>
       </ul>        
      </li>
      <li>
       <a href="">Раздел2</a>
       <ul>
        <li>

         <a href="">Подраздел21</a>
         <ul>
          <li><a href="">Подраздел 211</a></li>
          <li><a href="">Подраздел 212</a></li>
          <li><a href="">Подраздел 213</a></li>
         </ul>          
        </li>

        <li>
         <a href="">Подраздел22</a>
         <ul>
          <li><a href="">Подраздел 221</a></li>
          <li><a href="">Подраздел 222</a></li>
          <li><a href="">Подраздел 223</a></li>
         </ul>          
        </li>

        <li>
         <a href="">Подраздел 23</a>
         <ul>
          <li><a href="">Подраздел 231</a></li>
          <li><a href="">Подраздел 232</a></li>
          <li><a href="">Подраздел 233</a></li>
         </ul>          
        </li>

       </ul>        
      </li>
      <li>
       <a href="">Раздел3</a>
       <ul>
        <li>
         <a href="">Подраздел31</a>
         <ul>

          <li><a href="">Подраздел 311</a></li>
          <li><a href="">Подраздел 312</a></li>
          <li><a href="">Подраздел 313</a></li>
         </ul>          
        </li>
        <li>
         <a href="">Подраздел 32</a>

         <ul>
          <li><a href="">Подраздел 321</a></li>
          <li><a href="">Подраздел 322</a></li>
          <li><a href="">Подраздел 323</a></li>
         </ul>          
        </li>
        <li>
         <a href="">Подраздел 33</a>

         <ul>
          <li><a href="">Подраздел 331</a></li>
          <li><a href="">Подраздел 332</a></li>
          <li><a href="">Подраздел 333</a></li>
         </ul>          
        </li>
       </ul>        
      </li>

     </ul>     
    </li>
    <li><a href="">Ссылка4</a></li>
    <li><a href="">Ссылка5</a></li>
</ul>


2) Стили в Css сайта:

Code
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    width: 100%;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background-image: -webkit-linear-gradient(#444, #111);
    background-image: -o-linear-gradient(#444, #111);
    background-image: -ms-linear-gradient(#444, #111);
    background-image: linear-gradient(#444, #111);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 1px 1px #777;
    -webkit-box-shadow: 0 1px 1px #777;
    box-shadow: 0 1px 1px #777;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}
#menu:after {
    clear: both;
}
#menu {
    zoom:1;
}

#menu li {
    float: left;
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    box-shadow: 1px 0 0 #444;
    position: relative;
}
#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
    color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}

#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 9999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
#menu ul a:hover {
    background-color: #0186ba;
    background-image: -moz-linear-gradient(#04acec,  #0186ba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background-image: -webkit-linear-gradient(#04acec, #0186ba);
    background-image: -o-linear-gradient(#04acec, #0186ba);
    background-image: -ms-linear-gradient(#04acec, #0186ba);
    background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child > a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
}
#menu ul li:last-child > a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}


3) Подключаем на странице, где размещено меню:

Code
<script type="text/javascript" src="http://qwe.ucoz.ru/js/jquery-latest.js"></script>
<script type="text/javascript">
       $(function() {
         if ($.browser.msie && $.browser.version.substr(0,1)<7)
         {
           $('li').has('ul').mouseover(function(){
               $(this).children('ul').css('visibility','visible');
               }).mouseout(function(){
               $(this).children('ul').css('visibility','hidden');
               })
         }
       });           
</script>


Готово!


Взято с этого сайта
Отредактировано - MH

Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов

http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH


Сообщение отредактировал MH - Понедельник, 05.12.2011, 11:42
 
UnShameДата: Понедельник, 05.12.2011, 15:57 | Сообщение # 2
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
зачем jQuery 1.7 подключать?
того, что стоит на укозе хватит с головой

Тот, кто удалит этот пост будет гореть в аду.
 
RazipДата: Понедельник, 05.12.2011, 16:04 | Сообщение # 3
Ленивый котэ
Сообщений: 2319
Репутация: 142
Социальная репутация:

Статус: Offline
UnShame, ведь можно поставить не только на ucoz
 
UnShameДата: Понедельник, 05.12.2011, 16:14 | Сообщение # 4
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
Quote
Скрипты для uCoz сайта » Многоуровневое горизонтальное выпадающее меню (Анимированное)

Тот, кто удалит этот пост будет гореть в аду.
 
MHДата: Понедельник, 05.12.2011, 17:26 | Сообщение # 5
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
UnShame, можешь не подключать, в чем проблема? )))
http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
UnShameДата: Понедельник, 05.12.2011, 17:33 | Сообщение # 6
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
я о тех, кто будет устанавливать путем копипаста забочусь
+100 лишних КБ к весу страниц же

Тот, кто удалит этот пост будет гореть в аду.
 
UnShameДата: Понедельник, 05.12.2011, 20:03 | Сообщение # 7
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
мля, "коды" поддерживают не "хосты", а браузеры
а ты несешь ересь
сжечь

Тот, кто удалит этот пост будет гореть в аду.

Сообщение отредактировал UnShame - Понедельник, 05.12.2011, 20:03
 
RazipДата: Понедельник, 05.12.2011, 20:33 | Сообщение # 8
Ленивый котэ
Сообщений: 2319
Репутация: 142
Социальная репутация:

Статус: Offline
UnShame, это не ересь,просто я не могу тебе объяснить свлю мысль, ладно
 
EstennyДата: Понедельник, 05.12.2011, 20:36 | Сообщение # 9
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Offline
Razip, ага, ты и слова английские не знаешь как писать и всегда ересь несешь.
 
UnShameДата: Понедельник, 05.12.2011, 20:58 | Сообщение # 10
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
Razip, постоделитер
Тот, кто удалит этот пост будет гореть в аду.
 
Админ4369Дата: Воскресенье, 11.03.2012, 20:46 | Сообщение # 11
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Offline
установил всё хорошо работает во всех браузерах хорошее красивое меню только вот загвоздка в эксплоэре всё криво косо и окна не открываются http://test-rose.my1.ru/ помогите пожалуста
 
Administrator9868Дата: Четверг, 30.05.2013, 13:26 | Сообщение # 12
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Offline
Здравствуйте,
может у Вас есть возможность мне подсказать?
Как сделать ссылки в меню по центру?
Я что то перелопатил весь стиль, но так и не смог понять, где это сделать или что/куда добавить (типа позиционирования и т.д. и т.п.)
В общем наглядно, вот сайт и там верхнее данное меню получается слева, а желаемый результат - по центру.
Буду очень благодарен за подсказку.
 
funeralismaticДата: Понедельник, 03.06.2013, 20:13 | Сообщение # 13
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
Administrator9868, text-align:center;
Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
volfgunusДата: Понедельник, 03.06.2013, 21:06 | Сообщение # 14
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
нет
 
djemNaДата: Понедельник, 03.06.2013, 23:50 | Сообщение # 15
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
Цитата (volfgunus)
нет


Вот, вот он!! Вот он истинный тролль! Я его нашел! Это типичный ответ самого толстого тролля в мире!

Цитата (Administrator9868)
Как сделать ссылки в меню по центру?

Нормальный вопрос.

Цитата (funeralismatic)
Administrator9868, text-align:center;

Ответ.

Цитата (volfgunus)
нет

А это самый толстый троллинг. Лишь бы херню написать! Так напиши, что не так!!

-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Многоуровневое горизонтальное выпадающее меню (Анимированное)
Страница 1 из 3123»
Поиск: