Мы в твиттере Мы в телеграме!

Провеббер » Web » Скрипты » Вертикальное раздвижное меню

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

Вертикальное раздвижное меню

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Вертикальное раздвижное меню.

Вертикальное раздвижное меню



Меню вытащил: MysterIoes

Описание: Пойдет под любой сайт и под любой шаблон.

Сделал по просьбе!

Установка:

в конец css ставим:
.block{width:218px;float:left;padding:0 0 10px 0;*float:none;}
.greenblock_header{background:url(../images/greenblock_header.gif) no-repeat;width:209px;height:39px;}
.greenblock_header h3{padding:11px 0 0 36px;*padding:12px 0 0 36px;}
.block_center{background:url(../images/block_center.gif) repeat-y;width:209px;float:left;padding:0 0 2px 0;}
.block_centertxt{padding:15px 10px 0 10px;}
.block_bot{background:url(../images/block_bot.gif) no-repeat;width:209px;height:10px;float:left;}

.leftmenu{padding:5px 0 0 0;}
.leftmenu_cat{background:#F2F2F2;text-align:center;padding:5px 0 5px 0;color:#4fbeeb;border-bottom:1px solid #EDEDED;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;}
.leftmenu_catbg{padding:3px 0 0 0;}

ul.leftmenu_list{padding:0;margin:0;list-style:none;}
ul.leftmenu_list li{border-bottom:1px solid #EDEDED;padding:5px 0 5px 10px;}
ul.leftmenu_list li a{color:#626262;}
ul.leftmenu_list li a:hover{color:#4fbeeb;text-decoration: underline;}


Там где хотим видеть меню ставим это:
<div class="block"> 
          <div class="greenblock_header"><h3>Навигация</h3></div>
          <div class="block_center">
             <div class="leftmenu">
                <div class="leftmenu_cat">Движки сайтов</div>
        <ul class="leftmenu_list">
                              <li><a title="Datalife Engine" href="javascript:ShowOrHide('menu1');">Datalife Engine</a></li>
                              <div id="menu1" style="display:none;">
                              <ul>
                              <li><a href="/dle_relizi/">Релизы</a>
                              <li><a href="/bugs/">Баг-Фиксы</a>
                              <li><a href="/dle_sborki/">Сборки</a>
                              <li><a href="/dle_haki/">Хаки</a>
                              <li><a href="/dle_moduli/">Модули</a>
                              <li><a href="/dle_moduli_commercial/">Модули(платные)</a>
                              <li><a href="/dle_templates/">Шаблоны</a>
                              <li><a href="/dle_templates_commercial/">Шаблоны(платные)</a>
                              <li><a href="/dle_raznoe/">Разное</a>
                              </ul>
                              </div>
                              <li><a title="ProWebber.Ru" href="javascript:ShowOrHide('menu2');">Joomla</a></li>
                              <div id="menu2" style="display:none;">
                              <ul>
                              <li><a href="#">Релизы</a>
                              <li><a href="#">Баг-Фиксы</a>
                              <li><a href="#">Сборки</a>
                              <li><a href="#">Хаки</a>
                              <li><a href="#">Модули</a>
                              <li><a href="#">Модули(платные)</a>
                              <li><a href="#">Шаблоны</a>
                              <li><a href="#">Шаблоны(платные)</a>
                              <li><a href="#">Разное</a>
                              </ul>
                              </div>

        </ul>
        <div class="leftmenu_cat">ProWebber.ru</div>
        <ul class="leftmenu_list">
                              <li><a title="MysterIoes" href="javascript:ShowOrHide('menu3');">MysterIoes</a></li>
                              <div id="menu3" style="display:none;">
                              <ul>
                              <li><a href="#">Релизы</a>
                              <li><a href="#">Баг-Фиксы</a>
                              <li><a href="#">Сборки</a>
                              <li><a href="#">Хаки</a>
                              <li><a href="#">Модули</a>
                              <li><a href="#">Модули(платные)</a>
                              <li><a href="#">Шаблоны</a>
                              <li><a href="#">Шаблоны(платные)</a>
                              <li><a href="#">Разное</a>
                              </ul>
               </div>                          

        </ul>

             </div>
          </div>
          <div class="block_bot"></div>
       </div>

Ссылки меняем на свои.
Ну и качаем картинки и кидаем в папку images
Внимание! У Вас нет прав для просмотра скрытого текста.


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


-1
Просмотры: 65 809 :: Комментарии (32) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#21pernatik

  • 16 мая 2010 15:38
  • Регистрация: 4.02.2010
  • Был(а) онлайн: 5.05.2014
  • Комментариев: 122
  • 0
Все хорошо работает, ставил без картинок... люблю минимализм

#22Plan

  • 26 мая 2010 01:01
  • Регистрация: 25.05.2010
  • Был(а) онлайн: 25.04.2024
  • Комментариев: 80
  • 0
Как сделать чтобы меню сразу открыто было?

#23nartuk

  • 26 мая 2010 01:05
  • Регистрация: 7.05.2010
  • Был(а) онлайн: 22.10.2014
  • Комментариев: 220
  • 0
Plan,
Убрать:
href="javascript:ShowOrHide('menu1');"

Для menu2, menu3 (или как у кого) и т.д.
А также убрать для нужных меню:
style="display:none;"

--------------------

#24Alexander.S

  • 5 ноября 2010 00:01
  • Регистрация: 27.11.2009
  • Был(а) онлайн: 21.08.2023
  • Комментариев: 120
  • 0
Два вопроса, как сделать так что бы при открытом уже меню, и заходя в следующие, предыдущие закрывалось.

И еше один момент, поставил на денвере всё ок, поставил на сайт почему то пропала плавность при открытии меню. В чем проблемко?

#25xxara

  • 3 марта 2011 11:35
  • Регистрация: 21.02.2011
  • Был(а) онлайн: 17.05.2011
  • Комментариев: 2
  • 0
cool Классный скрипт

#26KYJIER

  • 12 июля 2011 22:25
  • Регистрация: 21.12.2010
  • Был(а) онлайн: 7.01.2022
  • Комментариев: 5
  • 0
klass cool cool

#27max-chi

  • 18 января 2012 00:43
  • Регистрация: 17.01.2012
  • Был(а) онлайн: 17.01.2012
  • Комментариев: 1
  • 0
Тот же вопрос, что и у Alexander.S:
как сделать так, чтобы уже открытое меню схлопывалось при открытии другого?

#28XaXaTyH4uk

  • 11 июля 2012 06:11
  • Регистрация: 16.06.2012
  • Был(а) онлайн: 9.12.2012
  • Комментариев: 13
  • 0
Описание: Пойдет под любой сайт и под любой шаблон.

У меня НЕ подходит!

--------------------

#29prazza

  • 8 января 2013 13:28
  • Регистрация: 8.01.2013
  • Был(а) онлайн: 8.01.2013
  • Комментариев: 1
  • 0
Помогите пожалуйста разобраться. У меня не работает раздвижное меню. Все поставила куда нужно. Но оно стоит мертвым колом. Мой сайт:http://razvlekawka.ru/

Код поставила внизу css, может быть есть уже некоторые функции в моем коде?

/* Sidebar */

.sidebar {
color:#222;
overflow:hidden;
}
.sidebar ul {
padding:0;
margin:0;
list-style: none;
font-size:1.2em;
}
.sidebar ul ul {
font-size:1em;
}

.sidebar ul li {
margin:0 0 2em 0;
}

.sidebar ul ul {
margin:0;
padding:0;
}

.sidebar li li {
margin:0.1em 0;
}

.sidebar li li:before {
content: "\203A \0020";
font-size:1.2em;
}

.sidebar li li li {
padding-left:10px;
}

.sidebar ul h2 {
background: rgb(255,124,216);
background: -moz-linear-gradient(top, rgba(255,124,216,1) 0%, rgba(251,166,225,1) 7%, rgba(252,236,252,1) 13%, rgba(253,137,215,1) 19%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,124,216,1)), color-stop(7%,rgba(251,166,225,1)), color-stop(13%,rgba(252,236,252,1)), color-stop(19%,rgba(253,137,215,1)));
background: -webkit-linear-gradient(top, rgba(255,124,216,1) 0%,rgba(251,166,225,1) 7%,rgba(252,236,252,1) 13%,rgba(253,137,215,1) 19%);
background: -o-linear-gradient(top, rgba(255,124,216,1) 0%,rgba(251,166,225,1) 7%,rgba(252,236,252,1) 13%,rgba(253,137,215,1) 19%);
background: -ms-linear-gradient(top, rgba(255,124,216,1) 0%,rgba(251,166,225,1) 7%,rgba(252,236,252,1) 13%,rgba(253,137,215,1) 19%);
background: linear-gradient(to bottom, rgba(255,124,216,1) 0%,rgba(251,166,225,1) 7%,rgba(252,236,252,1) 13%,rgba(253,137,215,1) 19%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7cd8', endColorstr='#fd89d7',GradientType=0 );
border-radius:5px;
margin:10px;
padding:5px;
font-size:1.2em;
text-transform:uppercase;
}

.sidebar a.rsswidget img {
border:0;
float:right;
}

#30viktor77

  • 26 апреля 2013 10:27
  • Регистрация: 21.04.2013
  • Был(а) онлайн: 5.05.2013
  • Комментариев: 1
  • 0
Меню класс, но как сделать, чтоб при открытом меню и при нажатие на другое меню, открытое закрывалось?

#31asiatik

  • 22 января 2014 14:32
  • Регистрация: 22.01.2014
  • Был(а) онлайн: 22.01.2014
  • Комментариев: 1
  • 0
А как на счет различных браузеров, во всех работает?

#32Maks77

  • 26 января 2014 14:04
  • Регистрация: 26.01.2014
  • Был(а) онлайн: 26.01.2014
  • Комментариев: 1
  • 0
Отличное меню, все работает! Только очень нужна опция "закрывания" уже открытого списка пунктов меню при открытии нового. Тему поднимали kaban, Alexander.S и max-chi. Кто знает, подскажите. Заранее благодарен.

1 2
Предыдущая    Следующая
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)
Июнь 2024 (30)

Последние комментарии: