FAQ Another Forum Tabs - панель линков в navbar

Пользователь · Регистрация: 12.09.2010

Another Forum Tabs - панель линков в navbar

1. Залейте файл vibetab.gif в папку images
2. Идем в "Дополнительные определения CSS", добавляем:

PHP код:



#vibetab 
{ 
    margin:5px 0 0 0px; 
    height:29px; 
    font-weight:bold; 
} 
#vibetab a 
{ 
    color:white; 
    background:url(images/vibetab.gif) 0% 0% no-repeat; 
    text-decoration: none; 
    padding-left: 6px; 
    margin:0; 
    height:29px; 
    outline:0; 
} 
#vibetab a span 
{ 
    background: url(images/vibetab.gif) 100% 0% no-repeat; 
    padding: 9px 12px 0 4px; 
    height:29px; 
    cursor: pointer;
         
#vibetab a, #vibetab a span 
{ 
    display: block; 
    float: left; 
} 
#vibetab a#active_menutopnav 
{ 
    color: black; 
    background:url(images/vibetab.gif) 0% 44% no-repeat; 
} 
#vibetab a#active_menutopnav span 
{ 
    background: url(images/vibetab.gif) 100% 50% no-repeat; 
} 
#vibetab a:hover 
{ 
    color: white; 
    background:url(images/vibetab.gif) 0% 89% no-repeat; 
} 
#vibetab a:hover span 
{ 
    background: url(images/vibetab.gif) 100% 100% no-repeat; 
} 

#vibetab ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#vibetab li 
{ 
    float: left; 
    margin: 0; 
}

3. Открываем шаблон navbar и в самый верх добавляем:

PHP код:



<div id="vibetab"> 
    <ul> 
    <li><a href="#" id="active_menutopnav"><span>Portal</span></a></li> 
    <li><a href="#"><span>Forum</span></a></li> 
    <li><a href="#"><span>Article</span></a></li> 
    <li><a href="#"><span>Mods</span></a></li> 
    <li><a href="#"><span>Styles</span></a></li> 
    <li><a href="#"><span>Graphic</span></a></li> 
    <li><a href="#"><span>Page 1</span></a></li> 
    <li><a href="#"><span>Page 2</span></a></li> 
    <li><a href="#"><span>Page 3</span></a></li> 
    </ul> 
    </div>

Вместо # пропишите путь к ссылке.
Также меняете названия.

vibetab.zip

Пользователь · 02.06.2011, 19:54

ololo, поправь код - не правильная ссылка к картинке, пропущена буква «i» в слове «images», а у тебя написано «mages»

#vibetab a span 
{ 
    background: url(mages/vibetab.gif) 100% 0% no-repeat; 
    padding: 9px 12px 0 4px; 
    height:29px; 
    cursor: pointer;

//ololo : спс ,поправил)

Пользователь · 21.06.2011, 10:51

Добавлю ещё один вариант. Меню на одном CSS.
Кнопки меню имеют одинаковое заполнение по ширине друг с другом, и занимает ту часть форума, какое кол-во кнопок будет у нас.

Открываем шаблон navbar, после <br /> добавляем код меню:

PHP код:



<!-- nav buttons bar -->
<ul id="nav">
      <li><a href="/" title="На главную страницу сайта">На главную</a></li>
      <li><a href="index.php" title="На главную форума">Форум</a></li>
      <li><a href="articles.php" title="Статьи, публикации, новости">Новости</a></li>
      <li><a href="#" title="Связаться с нами">Контакты</a></li>
      <li><a href="#" title="Часто задаваемые вопросы">FAQ</a></li>
</ul>
<!-- / nav buttons bar -->

Открываем дополнительное определение CSS нашего стиля, добавляем:

PHP код:



#nav {
    margin: 0 0 0 1px;
    padding: 0;
    float:left;
    list-style: none;
    background-color: #f8f9fc;
    border: 1px solid #ccc; 
    border-right:0;
    border-bottom:0;
}
      
#nav li {
    display: inline-block;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline; 
    width:100px;
    text-align:center;
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-variant: small-caps
    font-weight: lighter;
    color: #01265f;
    border-right: 1px solid #ccc; }
    #nav li a:hover {
    text-decoration: underline;
    color: #B80000;
    background-color: #f2f2f2; }

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

Результат:

Оформил на базе этой инструкции: Матово-черное меню на CSS

Пользователь · Регистрация: 12.06.2011

В #vibetab a span не закрыто }

И не въехал. Используется 3 цвета. Тёмный обычный, голубой при наведении курсора, а белый по идее если открыта эта страница.
Но портал всегда белым

Получается a#active не работает

аааааа! Заметил

))
Устанавливается активным только конкретный пункт меню id="active_menutopnav" а не автоматом выбирает

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