Делаем фиксированное меню для Vbulleitn

03-26-2011, 07:46 PM

В этой теме я научу вас делать неплохое быстрое меню - панель для Vbulletin.
Исходная версия
Демо

Итак, начнем

Шаг I
Для начала закачайте файлы из аттача в корень форума.

Шаг II
Основаня таблица CSS форума --> дополнительная таблица CSS --> второе окно ( самое нижнее )
Вставить следующий текст

PHP Code:


			
#nav{

    height:35px;

    border-bottom:1px solid #ddd;

    position:fixed;

   valign="bottom"

 top:0px;

    left:0px;

    right:0px;

    background:#fff url(../images/nav.png) repeat-x center left;

    bottom:0px

}

#nav ul{

    height:25px;

    list-style:none;

    margin:6px auto 0px auto;

  width:600px;   

}

#nav ul li{

    display:inline;

    float:left;

    margin:0px 2px;

}

#nav a{

    font-size:11px;

    font-weight:bold;

    float:left;

    padding: 2px 4px;

    color:#999;

    text-decoration: none;

    border:1px solid #ccc;

    cursor: pointer;

    background:transparent url(../images/overlay.png) repeat-x center left;

    height:16px;

    line-height:16px;

}

#nav a:hover{

    background:#D9D9DA none;

    color: #fff;

}

#nav a.top span, #nav a.bottom span{

    float:left;

    width:16px;

    height:16px;

}

#nav a.top span{

    background:transparent url(../images/top.png) no-repeat center center;

}

#nav a.bottom span{

    background:transparent url(../images/bottom.png) no-repeat center center;

}



#nav ul li.search{

    float:right;

}

#nav input[type="text"]{

    float:left;

    border:1px solid #ccc;

    margin:0px 1px 0px 50px;

    padding:2px 2px 2px 2px;

}

input.searchbutton{

    border:1px solid #ccc;

    padding:1px;

    cursor:pointer;

    width:30px;

    height:22px;

    background:#E8E9EA url(../images/search.png) no-repeat center center;

}

input.searchbutton:hover{

    background-color:#D9D9DA;

}

В #nav ul строчку width:600px; можно убрать. Тогда панель растянется на всю ширину.

Шаг III
Шаблон Navbar --> в самый верх

PHP Code:


			
<body>

        <div id="nav">

            <ul>

                <li><a class="top" href="#top"><span></span></a></li>

                <li><a>Link 1</a></li>

                <li><a>Link 2</a></li>

                <li><a>Link 3</a></li>

                <li><a>Link 4</a></li>

                <li><a>Link 5</a></li>

                <li><a>Link 6</a></li>

                <li class="search">

                    <input type="text"/><input class="searchbutton" type="submit" value=""/>

                </li>

            </ul>

        </div> 

       

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

        <script type="text/javascript">

            $(function() {

                 $(window).scroll(function(){

                    var scrollTop = $(window).scrollTop();

                    if(scrollTop != 0)

                        $('#nav').stop().animate({'opacity':'0.2'},400);

                    else    

                        $('#nav').stop().animate({'opacity':'1'},400);

                });

                

                $('#nav').hover(

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $('#nav').stop().animate({'opacity':'1'},400);

                        }

                    },

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $('#nav').stop().animate({'opacity':'0.2'},400);

                        }

                    }

                );

            });

        </script>

Готово.

Линки типа

PHP Code:


			
<li><a>Link 1</a></li>

Можно менять на свои.

P.S. Использует библиотеку JQuery для скрытия при скроллинге страницы. При желании не сложно убрать.

P.S.S.
Демо заработало.

P.S.S.S Спасибо cyberdaemon и GuCci за помощь и обьяснения )

03-26-2011, 07:58 PM

ага, демо знатное.

Quote:

Unable to add cookies, header already sent.
File: /home/pasqo870/domains/xn----8sbuyccs.xn--p1ai/public_html/XN--L1ADGMC/index.php
Line: 5

Search Engine Friendly URLs by vBSEO 3.5.1 PL1

03-26-2011, 08:37 PM

Подправил до нужной кондиции. Все работает как надо.

03-26-2011, 09:58 PM

Так и нет рабочего демо, как будет все выглядеть на булке

03-26-2011, 10:47 PM

попробую к четверке примотать. Ни у кого еще опыта в этом не появилось?

p.s. возьми еще домен в ru зоне, и ссылки давай на него, а роботсе пропиши домен в РФ как главное зеркало и поставь редирект на РФ домен. А то пока поисковики эти ссылки плохо видят, да и сами домены хреновато индексируют.

03-26-2011, 10:53 PM

Quote:

Originally Posted by kep

попробую к четверке примотать. Ни у кого еще опыта в этом не появилось?

p.s. возьми еще домен в ru зоне, и ссылки давай на него, а роботсе пропиши домен в РФ как главное зеркало и поставь редирект на РФ домен. А то пока поисковики эти ссылки плохо видят, да и сами домены хреновато индексируют.

Прикручивается нормально к любой линейке вроде бы. По крайней мере на 3.x.x. пашет точно.

03-27-2011, 12:08 AM

120р насколько помнится. не, если хош могу конечно подогнать какой нить не нужный, но смысл то? вроде проще купить.
неправильно выразился... не индексация а выдача.

kep добавил 26.03.2011 в 23:08
ммда, а ведь Основаня таблица CSS форума то в четверке неизменяется...

03-27-2011, 01:29 AM

А еще копирайты ей можно отлично прятать

03-27-2011, 04:19 PM

Quote:

Originally Posted by PasqOo

#nav {
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
valign="bottom"
top:0px;
left:0px;
right:0px;
background:#fff url(../images/nav.png) repeat-x center left;
bottom:0px;
}

Я в истерике.

Вот это убрать из кода вообще:

Quote:

valign="bottom"
top:0px;

Так как там есть это:

Quote:

bottom:0px;

Это пример для расположения панели снизу.