Меню вертикальное с выпадающими вкладками подменю - Форум
> Яндекс.Метрика
К О М М У Н И С Т

ПРОЛЕТАРИИ ВСЕХ СТРАН, СОЕДИНЯЙТЕСЬ!


[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Меню вертикальное с выпадающими вкладками подменю
Пионер MarkoniYAДата: Пятница, 31.05.2013, 05:08 | Сообщение # 1


Загрузка наград ...
Сообщений: 832
Награды: 1  +
Репутация: 1  ±
Установите код в нужное место. Для работы необходима библиотека jQuery, на сайтах Ucoz она уже подключена.

Код
<style>   
#menu-block {
    padding: 0;
    margin: 0;
}
/*стили всего блока меню, пунктов и ссылок*/
.vertical-menu {
    display: block;
    background: #3D0066;
    border: solid 1px #B84DFF;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    width: 187px; /*ширина меню и выпадающих блоков*/
}
.vertical-menu li {
    position: relative;
    list-style: none;
    outline: none;
    background: #7339BA;
    background: -moz-linear-gradient(top, #6323b2 0%, #b685f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6323b2), color-stop(100%,#b685f7));
    background: -webkit-linear-gradient(top, #6323b2 0%,#b685f7 100%);
    background: -o-linear-gradient(top, #6323b2 0%,#b685f7 100%);
    background: -ms-linear-gradient(top, #6323b2 0%,#b685f7 100%);
    background: linear-gradient(to bottom, #6323b2 0%,#b685f7 100%);
    border: solid 1px #D6C2FF;
    border-radius: 5px;
    padding: 0;
    margin: 2px;
/*анимация для пунктов*/
    -webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
    -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
    -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
    transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.vertical-menu li:hover {
    background: #ccf;
    border: solid 1px transparent;
    border-radius: 5px;
    box-shadow: inset 0 0 8px #fff;
    margin: 2px 10px;
}
.vertical-menu a {
    display: block;
    text-decoration: none;
    text-align: left;
    font: normal normal 14px Verdana; /*шрифт всех пунктов*/
    color: #E6E6FF;
    text-shadow: 1px 0 4px #000, 2px 0 7px #d91cd9;
    box-shadow: none;
    padding: 7px; /*регулируем выоту всех кнопок меню*/
    margin: 0;
}
.vertical-menu a:hover {
    color: #3D1F4C;
    text-shadow: 1px 0 4px #fff, 2px 0 7px #290052;
}
/*стиль пункта с подменю*/
.drop-link > a {
    margin: 0;
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
}
.drop-link > a:hover {
    margin: 0 0 0 10px;
}
.drop-link:hover {
    background: #ccf; /*выделяем ссылку родитель выпадающего блока*/
}
/*стили для уголков*/
.drop-link:after,
.drop-link:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
}
.drop-link:before {
    border: solid 14px;
    border-color: #D6ADFF transparent transparent transparent;
    margin: 0 12px 0 0;
}
.drop-link:after {
    border: solid 10px;
    border-color: #4C1A80 transparent transparent transparent;
    margin: 0 15px 0 0;
}
.drop-link:hover:before {
    border: solid 16px;
    border-color: transparent #6323b2 transparent transparent;
    margin: -3px 0 0 0;
}
.drop-link:hover:after {
    border: solid 12px;
    border-color: transparent #b685f7 transparent transparent;
    margin-right: 0;
}
.drop-block {
    display: block;
    position: absolute;
    z-index: 1000;
    left: 100%; /*если меню справа - right: 100%;*/
    top: -9999em; /*скрываем выпадающие блоки*/
    background: #3D0066;
    border: solid 1px #B84DFF;
    border-radius: 10px;
    box-shadow: 0.5em 1em 1em #666; /*если меню справа - box-shadow: -0.5em 1em 1em #666;*/
/*анимация для выпадающих блоков*/
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 0;
    padding: 0;
    margin: -10px -20px 0 0; /*если меню справа - margin: -10px -10px 0 0;*/
    min-width: 250px; /*обычная ширина*/
    width: auto; /*ширина если строка без пробелов и переносов*/
}
.drop-link:hover > .drop-block {
    top: 0; /*показываем выпадающие блоки*/
    opacity: 1;
}
<!--[if IE 9]>
<style type="text/css">
.vertical-menu li {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6323b2', endColorstr='#b685f7',GradientType=0 );
}
.vertical-menu li:hover {
    margin: 2px;
}
.drop-link > a:hover {
    margin: 0;
}
ul.vertical-menu a:hover {
    background: #ccf;
}
</style>
<![endif]-->
</style>   

<div id='menu-block'>
<ul class='vertical-menu'>
<li><a href="http://markoniya.ucoz.ru/">Главная</a></li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/vneshnij_vid_windows/1-0-19">Вид Windows</a>

      <ul class='drop-block'>
        <li><a href="http://markoniya.ucoz.ru/news/vneshnij_vid_windows/1-0-19">Темы, заставки, твики</a></li>
        <li class='drop-link'><a href="http://markoniya.ucoz.ru/photo/1">Обои на рабочий стол</a>
           <ul class='drop-block'>
             <li><a href="http://markoniya.ucoz.ru/news/oboi_na_rabochij_stol/1-0-18">Обои пользователей</a>
             <li><a href="http://markoniya.ucoz.ru/photo/1">Обои сайта, часть 1</a></li>
             <li><a href="http://markoniya.ucoz.ru/photo/2">Обои сайта, часть 2</a></li>
             <li><a href="http://musora-net.ucoz.ru/photo/1">Обои сайта, часть 3</a></li>
           </ul>
        </li>
      </ul>
    </li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/1-0-1">Программы</a>
      <ul class='drop-block'>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-1">Софт без категории</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-12">Система</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-9">Офисные программы</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-10">Архиваторы</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-2">Мультимедиа</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-7">CD/DVD, Эмуляторы</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/video/1-0-37">Работа с видео</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/zvuk/1-0-39">Работа со звуком</a></li>   
             <li><a href="http://markoniya.ucoz.ru/news/grafika/1-0-38">Работа с графикой</a></li>
             <li><a href="http://markoniya.ucoz.ru/news/1-0-3">Клипарт, Шаблоны</a></li>
      </ul>
</li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/1-0-8">Интернет</a>
      <ul class='drop-block'>
        <li><a href="http://markoniya.ucoz.ru/news/1-0-8">Софт для Сети</a></li>
        <li><a href="http://markoniya.ucoz.ru/news/brauzery/1-0-40">Браузеры</a></li>
        <li><a href="http://markoniya.ucoz.ru/news/pochtovye_klienty_svjaz/1-0-41">Связь, почтовые клиенты</a></li>
      </ul>
</li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/bezopasnost/1-0-14">Безопасность</a>
      <ul class='drop-block'>
         <li><a href="http://markoniya.ucoz.ru/news/bezopasnost/1-0-14">Утилиты для безопасности</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/antivirusy/1-0-43">Антивирусы</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/shifratory/1-0-44">Шифраторы</a></li>
      </ul>
</li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/1-0-4">Фильмы, мануалы</a>
      <ul class='drop-block'>
         <li><a href="http://markoniya.ucoz.ru/news/1-0-4">Видео мануалы</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/filmy/1-0-25">Фильмы</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/multiplikacionnye/1-0-46">Мультфильмы</a></li>   
      </ul>
</li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/muzyka/1-0-20">Музыка</a>
      <ul class='drop-block'>
         <li><a href="http://markoniya.ucoz.ru/news/metall/1-0-23">Металл</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/pop/1-0-21">Поп</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/rok/1-0-22">Рок</a></li>
         <li><a href="http://markoniya.ucoz.ru/news/pank_rok/1-0-26">Панк-Рок</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/live/1-0-27">Live</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/bardy_shanson/1-0-34">Барды, Шансон</a></li>
         <li><a href="http://markoniya.ucoz.ru/news/klassika/1-0-35">Классика</a></li>
         <li><a href="http://markoniya.ucoz.ru/news/instrumentalnaja/1-0-36">Инструментальная</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/videoklipy/1-0-28">Видеоклипы</a></li>     
      </ul>
</li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/1-0-6">Книги</a>
      <ul class='drop-block'>
         <li><a href="http://markoniya.ucoz.ru/news/zhurnaly/1-0-15">Журналы</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/spravochniki/1-0-17">Справочники</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/audio_knigi/1-0-33">Аудио-книги</a></li>
         <li><a href="http://markoniya.ucoz.ru/news/fantastika/1-0-29">Фантастика, фэнтези</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/detektivy/1-0-30">Детективы</a></li>   
         <li><a href="http://markoniya.ucoz.ru/news/boeviki_priklucheniya/1-0-31">Приключения, боевики</a></li>
         <li><a href="http://markoniya.ucoz.ru/news/klassika/1-0-32">Классика</a></li>
         <li><a href="http://markoniya.ucoz.ru/news/khudozhestvennaja_literatura/1-0-16">Остальная литература</a></li>   
      </ul>
</li>

<li class='drop-link'><a href="http://markoniya.ucoz.ru/news/1-0-6">Игры</a>
      <ul class='drop-block'>
         <li><a href="http://markoniya.ucoz.ru/news/1-0-5">Скачать</a></li>   
         <li><a href="http://markoniya.ucoz.ru/stuff/">Поиграть</a></li>
      </ul>
</li>
<li class='drop-link'><a href="http://markoniya.ucoz.ru/forum/">Форум</a>
      <ul class='drop-block'>
             <li><a href="http://markoniya.ucoz.ru/forum/3">Скрипты для Ucoz</a></li>
             <li><a href="http://markoniya.ucoz.ru/forum/7">Наши чаты</a></li>
             <li><a href="http://markoniya.ucoz.ru/forum/8">Игры</a></li>
             <li><a href="http://markoniya.ucoz.ru/forum/4">Стихи</a></li>
             <li><a href="http://markoniya.ucoz.ru/forum/5">Свободные темы</a></li>
      </ul>
</li>
<li><a href="http://markoniya.ucoz.ru/news/1-0-13">Юмор</a></li>
<li><a href="http://markoniya.ucoz.ru/news/poznavatelnoe/1-0-24">Познавательное</a></li>
<li><a href="http://markoniya.ucoz.ru/blog/">Эротика</a></li>
<li><a href="http://markoniya.ucoz.ru/index/0-4">Полярнинцам</a></li>
<li><a href="http://markoniya.ucoz.ru/news/bred/1-0-47">Бред</a></li>
<li><a href="http://markoniya.ucoz.ru/publ/banneroobmen/1-1-0-39">Наши партнеры</a></li>
<li><a href="http://markoniya.ucoz.ru/gb">Гостевая</a></li>
<li><a href="http://markoniya.ucoz.ru/faq">Помощь</a></li>
<li><a href="http://markoniya.ucoz.ru/index/pravila_sayta/0-2">Правила сайта</a></li>

</ul>
</div>


Вместо цвета меню можно использовать фоновые картинки


Код
Вместо: background: #638aff;   вставляем: background: url('http://здесь путь к картинке');

Что бы посмотреть пример и проверить работоспособность скрипта вставьте код в форму.

Пожалуйста при копировании кода указывайте источник.




Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин


Статус: Offline
Октябрёнок АдминДата: Воскресенье, 29.10.2017, 10:53 | Сообщение # 2


Загрузка наград ...
Сообщений: 6
Награды: 0  +
Репутация: 0  ±
Добрый день! Как-то брала для своего сайта горизонтальное меню. Работает уже несколько лет. Теперь понадобилось вертикальное. Ваше очень нравится. Но как сделать чтобы оно раскрывалось в левую сторону? Спасибо.
Статус: Offline
Пионер MarkoniYAДата: Среда, 31.01.2018, 22:55 | Сообщение # 3


Загрузка наград ...
Сообщений: 832
Награды: 1  +
Репутация: 1  ±
Извините, пропустил вопрос. Если еще актуально, то в меню все указано, например:
 
Код
left: 100%; /*если меню справа - right: 100%;*/  т.е.  вместо  left: 100% нужно указать right: 100%

Т.е. где в пояснении к строке кода написано */если меню справа/, то меняем код на указанный справа



Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин


Статус: Offline
  • Страница 1 из 1
  • 1
Поиск:
Вся власть Советам!
Яндекс.Метрика Главная страница Правила & Информация