Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Переключатели / Навигация
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Выпадающее многоуровневое меню с анимацией на css3 и js для сайтов uCoz

    Дата добавления: 09.11.2014 - 19:37
    Добавил: Buger
    Количество просмотров: 2.7k
    Количество комментариев: 0
    Рейтинг материала: 0.0 / 0
    Выпадающее многоуровневое меню с анимацией на css3 и js для сайтов uCoz
    БЕСПЛАТНО
    рейтинг 0.0
    /
    голосов 0
    Если вы нуждаетесь в горизонтальном, анимированном, выпадающем, многоуровневом меню на CSS3 и JS для вашего сайта в системе ucoz, то думаю что вам понравится то что мы вам предложим. Установка данного меню очень простая. В меню так же не используются изображения и какие либо картинки и иконки. Градиенты фона написаны на чистом CSS3, что соответственно не нагружает сайт и хорошо и быстро читаем браузерами.

    Меню тестировалось в Firefox 8, Chrome 15, Opera 11.52, Safari и IE7, проше говоря, оно работает на всех популярных, современных браузерах.

    Установка:
    Скопировав данный код ниже, вставьте туда, где желаете видеть меню навигации
    Код
    <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="">art-ucoz.ru</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>


    Далее копируем стили меню и вставляем в самом низу в ваш файл стилей .css
    Код
    #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;  
    }


    Теперь нам нужно подключить код js. Его вставляем перед самим кодом меню.
    Код
    <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>
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: