Дополнительная панель линков.


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

#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 и в самый верх добавляем:

<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>

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

Originally Posted by TAIFUN

Залейте файл vibetab.gif в папку images

этот gif -в миниатюре или....?

satnsk,в миниатюре

Как сделать, чтобы при нажатии на кнопку она оставалась гореть в том месте где ты находишься?

stwan добавил 30.06.2009 в 17:36
FAQ бы по этим кнопкам)) интересно очень, css незнаю, помогите! еще хочу узнать как к кнопке всплывающее меню сделать??

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

после размещения получается такая вот шняга

правые края ссылок не закругляются в меню ( не обрисовываются
пытался мучать проценты, добавлял новые классы :( нифига не получается :(

есть идеи как поправть?
а то не хочется разграничивать каждую кнопку параметром "width"

TAIFUN а как сделать, чтобы в vBadvanced кнопки отображались?
У меня всё работает, просто не отображается на главной

Это возникло из за ошибки в коде.

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

Упущена буква I и из за этого картинка недоступна.

Блэйз, в стандартном стиле? Куда код добавлял? Подробнее опиши действия.

ZloyEjik, благодарю
===
Первый пост обновлен. Ошибка исправлена.