Хаки lavalamp меню для navbar на jQuery

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

Демо: на базе этого урока

В шаблон headinclude вставить:

PHP код:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='clientscript/navbar/jquery.easing.min.js'></script>
<script type='text/javascript' src='clientscript/navbar/jquery.lavalamp.js'></script>
    <script type="text/javascript">
        $(function() {
            $("#navmenu").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Если вы уже используете jQuery библиотеку, тол повторно её подключать не нужно.

В Основная таблица CSS - Дополнительные определения CSS (во второе поле) вставить:

PHP код:



         .navmenu {
            position: relative;
            background-color: #738FBF;
            overflow: hidden;
            border-bottom: 4px solid #fff;
            border-top: 4px solid #fff;
        }
                .navmenu td {
                    float: left;
                    list-style: none;
                }
                    .navmenu td.back {
                        border-bottom: 5px solid blue;
                        width: 9px;
                        z-index: 8;
                        position: absolute;
                        margin-top: -2px;
                    }
                    .navmenu td a {
                        text-decoration: none;
                        outline: none;
                        text-align: center;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }   
                        .navmenu td a:hover, .navmenu td a:active, .navmenu td a:visited {
                            border: none;
                        }

Замечание:
Тут .navmenu td.back { border-bottom: 5px solid blue; - цвет плавающей черты

Далее, открыть шаблон navbar

Найти участок кода отвечающий за пункты меню, обычно он находится между комментариями:

PHP код:



<!-- nav buttons bar -->
код меню
<!-- / nav buttons bar -->

Далее будем работать только с этим участком кода!

Самое начало привести к виду:

PHP код:



<div class="tborder" style="border-top-width:0px">
    <table id="navmenu" class="navmenu"  cellpadding="0"  cellspacing="0" border="0" width="100%" align="center"  >

(добавляем класс и id navmenu к таблице, и у DIV оставляем только одно свойство стиля)
Далее к любому из пунктов меню дописываем класс current, например,

PHP код:



<td class="vbmenu_control current"><a   href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>

Теперь скачать архив и скопировать содержимое папки upload в корень форума.

Скачать

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

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Дополнительное выпадающее меню в navbar	Vector	Навигация (navbar, navbits, header и т.д.)	4	19.10.2012 17:24
Вопрос Меню для сайта с помощью jQuery	FLisC	Вопросы по vBulletin 3.х	5	11.03.2012 18:58
Вопрос Как правильно дабавить сылку в меню navbar?	Wor	Вопросы по vBulletin 3.х	1	08.11.2011 15:22
Модуль Раздвижное вертикальное меню на jQuery для блока CMPS	Vector	Модули для vba CMPS	0	30.09.2011 17:09
Вопрос Как русифицировать меню из navbar	krishtianu	Вопросы по vBulletin 3.х	1	12.04.2011 17:19