Помогите сделать меню

Derek88894 · 12 февраля, 2014

Помогите сделать раздвижное меню чтобы он раздвигался и сворачивался

вот есть пример

помогите срочно зарание спасибо

aqaholding · 12 февраля, 2014

1. Подключаем jquery в index.tpl (если не подключена была ранее):

<script type="text/javascript" src="/jquery-latest.js"></script>

2. Делаем разметку вида:

<div id="menu_pop">
<ul id="accordion">
 <li><div class="first">CSS3<br>
 <span class="button_podtext">Основные возможности</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 </ul>
 </li>
 <li><div>HTML5<br>
 <span class="button_podtext">Продолжение или новая платформа?</span></div>
 <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><div>WordPress<br>
 <span class="button_podtext">Новости в мире CMS</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 </ul>
 <li><div>Основное<br>
 <span class="button_podtext">Блог, Тесты, Форум</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 </ul>
 </li>
</ul>
<div class="menu_bottom"><i>Разработано Глебом Кавраским</i></div>

3. В css/style.css в конце:

#menu_pop {
 margin: 120px auto ;
 width: 280px;
 background: url('wood.jpg');
 border-radius: 6px;
 padding: 7px;
 box-shadow: 0px 1px 5px #000;
}
#accordion {
 list-style: none;
 padding: 0px;
 margin: 0px;
}
#accordion .button_podtext {
 font-size: 9px;
 color: #b1b1b1;
}
#accordion div {
 display: block;
 cursor: pointer;
 text-decoration: none;
 display: block;
 padding: 8px 0px 8px 11px;
 background: #000;
 color: #fff;
 font-size: 12px;
 font-family: tahoma;
 background: url('bg.png') 0px 0px;
 text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
 list-style: circle;
}
#accordion div:hover {
 background: url('bg.png') 0px -44px;
}
.first {
 border-radius: 3px 3px 0px 0px;
}
#accordion ul a {
 color: #777;
}
#accordion ul {
 list-style: none;
 padding: 5px;
 font-size: 10px;
 font-family: Tahoma;
 background: #1a1a1a;
 box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
 display: none;
}
#accordion ul li {
 font-weight: normal;
 cursor: auto;
 padding: 3px 7px;
}
#accordion a {
 text-decoration: none;
}
#accordion a:hover {
 text-decoration: underline;
}
#menu_pop .menu_bottom {
 display: block;
 padding: 3px 6px 3px;
 background: #000;
 color: #fff;
 font-size: 9px;
 border-radius: 0px 0px 3px 3px;
 font-family: georgia;
 background: url('bg_bottom.png') 0px 0px;
 text-align: right;
 text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
}

4. Так как мы используем плагин jQuery, нам необходимо его вызвать, вызов плагина нам необходимо инициализировать в основном документе, для работоспособности на остальных страницах.
Вставляем между <head></head> в index.tpl

{literal}
<script type="text/javascript">
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(280);
}
$(this).next().slideToggle(280);
});
$('#accordion ul:eq(0)').show();
</script>
{/literal}

Кроме этого вы можете указать в данном фрагменте кода скорость открытия и закрытия подпунктов. По умолчанию она установления на значении 280мс.

aqaholding · 12 февраля, 2014

Демо: http://www.rudebox.org.ua/demo/vertical-sliding-menu-described/

Yaross · 15 февраля, 2014

Пробовал повторить - не получается..помогите пожалуйста.

chocolate_moles · 15 февраля, 2014

Пробовал повторить - не получается..помогите пожалуйста.

Пробую помочь...

не получается...

aqaholding · 16 февраля, 2014

Блин, ну все же описано. Предлагаю 5 раз перечитать, и сделать по шагам. Или учить HTML + CSS + Smarty + PHP

teplogaz · 20 февраля, 2014

Derek88894 Yaross

Начните отсюда:

http://forum.simplacms.ru/topic/5167-раскрывающееся-меню-категорий/

добавлю, начал я с этого:

http://forum.simplacms.ru/topic/5511-аккордион-меню/

rarara · 24 марта, 2014

Д

Блин, ну все же описано. Предлагаю 5 раз перечитать, и сделать по шагам. Или учить HTML + CSS + Smarty + PHP

Пробую помочь...

не получается...

Делаю все по пунктам, но вместо менюшки просто картинка меню, анимация и навигация не работает, подскажите как исправить, вы наверника знаете??

rarara · 26 марта, 2014

йяпсс-йяаааапссс. тема актуальна.

Войти

Помогите сделать меню

Рекомендуемые сообщения

Derek88894

Ссылка на сообщение

Поделиться на другие сайты

aqaholding

Ссылка на сообщение

Поделиться на другие сайты

aqaholding

Ссылка на сообщение

Поделиться на другие сайты

Yaross

Ссылка на сообщение

Поделиться на другие сайты

chocolate_moles

Ссылка на сообщение

Поделиться на другие сайты

aqaholding

Ссылка на сообщение

Поделиться на другие сайты

teplogaz

Ссылка на сообщение

Поделиться на другие сайты

rarara

Ссылка на сообщение

Поделиться на другие сайты

rarara

Ссылка на сообщение

Поделиться на другие сайты

Присоединяйтесь к обсуждению

Сайт

Активность

Поддержка