Модуль Раздвижное вертикальное меню на jQuery для блока CMPS

Администратор · Регистрация: 27.02.2009

Приспособим вертикальное раздвижное меню на jQuery в блок vbaCMPS

Нам нужно будет подключить библиотеку jQuery к нашему форуму (если она не используется на данный момент).

В шаблон headinclude вставляем код вызова библиотеки jQuery:

PHP код:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Теперь перейдем в админке vBaCMPS -> Добавить модуль -> [Шаблон модуль]
Название модуля: Навигация
Активно: Да
Подключаемый шаблон: adv_portal_navmenu
Стиль: (отмечаем, удерживая CTRL стили в которых будет работать данное меню)
Содержимое шаблона: копируем, предварительно отредактировав, ниже указанный код:

PHP код:



<tr>
<td class="$bgclass">

<script src="modules/menu.js" type="text/javascript"></script>
<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->
<style type="text/css">
ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 180px;
}

ul#menu a {
  display: block;
  text-decoration: none;    
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {
  background: #ddd;
  border-bottom:3px solid #555; 
  color: #555;    
  padding: 0.5em;
}

ul#menu li a:hover {
    background: #f2f2f2;
}

ul#menu li ul li a {
  background: #f4f4f4;
  color: #555;
  padding-left: 20px;
}

ul#menu li ul li a:hover,ul#menu li ul .current a {
  background: #eee;
  border-left: 5px #555 solid;
  padding-left: 15px;
}
</style>

    <ul id="menu">
         <li>
            <a href="#">Пункт 1</a>
            <ul>
                <li><a href="http://pcvector.ru/f27/">Пункт 1.1</a></li>
                <li><a href="http://pcvector.ru/f28/">Пункт 1.2</a></li>
                <li><a href="http://pcvector.ru/f29/">Пункт 1.3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Пункт 2</a>
            <ul>
                <li><a href="http://pcvector.ru/f2/">Пункт 2.1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Пункт 3</a>
            <ul>
                <li><a href="http://pcvector.ru/f23/">Пункт 3.1</a></li>
                <li><a href="http://pcvector.ru/f4/">Пункт 3.2</a></li>
                <li><a href="http://pcvector.ru/f7/">Пункт 3.3</a></li>
            </ul>
        </li>
    </ul>

</td>
</tr>

Сохраняем.

Из архива в папку modules/ копируем файлик menu.js
И готово.

Замечание к коду меню:
Его можно редактировать найдя шаблон adv_portal_navmenu.
Если хотите для каждого своего стиля форума использовать индивидуальное оформление меню, то из кода выше, нужно вырезать CSS стиль
и отредактировав его, вставить в Дополнительные определения CSS вашего стиля.

Ссылки на разделы вашего форума в коде меню исправьте на свои, так же как и название пунктов.
Добавить дополнительные разделы и пункты думаю из самого кода понятно как (скопировав аналогичный кусочек кода для Пункта).

Скачать

Специально для pcvector.ru

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Вертикальное меню с подменю методами html	noname	HTML, CSS	0	31.03.2011 14:50
Статья Выбор блока питания	Vector	Блоки питания, UPS (ИБП)	1	27.07.2010 09:47
Инфо Калькулятор мощности Блока питания	Vector	Блоки питания, UPS (ИБП)	8	10.07.2010 13:56
FAQ Вертикальное меню с пояснениями	Vector	HTML, CSS	0	18.01.2010 23:10
Обзор 3 блока питания GlacialPower, HuntKey, Antec от 650 до 750 Вт	Vector	Блоки питания, UPS (ИБП)	0	23.11.2009 02:29