How do I?

[simonc101]

Does anyone know of or know how to create a navbar like this site?

http://www.fiatforum.com

I like the fact that it has been split in two and that the main catgegories have small icons assigned to them.

This would be a great if someone could help out.

[slappy]

If you go to the Forum and right click on your browser you can choose "view source" and actually look at some of the code. You can do this here. You will get a mass of code that is hard to decipher. However is your have a good text editor, you can search for the word "mainmenu_control" and you should be within the Navbar. It would help if you took a look at the navbar template in your default style, so you had an idea what you are looking for.

Theirs starts with a <div> or divider statement:

	<div align="center"> <table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center" style="border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px;"> <tr align="center">

Then each of the buttons is indicated with code like this:

<td class="mainmenu_control" width="11%">
		<img src="/images/misc/menuicons/forum.gif" width="15" height="13" alt="" />
			&nbsp;&nbsp;
		<a href="/">Forum</a>
	</td> 
	<td class="mainmenu_control" width="13%">
		<img src="/images/misc/menuicons/guides.gif" width="13" height="15" alt="" />
			&nbsp;&nbsp;
		<a href="/guides">Guides</a>
	</td> 
	<td class="mainmenu_control" width="10%">
		<img src="/images/misc/menuicons/chat.gif" width="15" height="15" alt="" />
			&nbsp;&nbsp;
		<a href="/javachat.php">Chat</a>
	</td> 
	<td class="mainmenu_control" width="14%">
		<img src="/images/misc/menuicons/photogallery.gif" width="15" height="12" alt="" />
			&nbsp;&nbsp;
		<a href="/gallery">Gallery</a></td> <td class="mainmenu_control" width="15%">
		<img src="/images/misc/menuicons/classifieds.gif" width="13" height="15" alt="" />
		&nbsp;&nbsp;

You can see the words in bold which are the button title and href of what it does. This could be a link to another forum or page somewhere, or a javascript which does something, like the "chat" button.

After it gets to the "Links" button, there is another divider which defines and starts the second row:

<div align="center"> <table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center" style="border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px;"> <tr align="center"> 
	<td class="vbmenu_control">
		<a href="/register.php" rel="nofollow">Register</a>
	</td> 
	<td class="vbmenu_control">
		<a href="/faq.php" accesskey="5">FAQ</a>
	</td>

until it gets down to the end of the Table and Division, marked by:

</table> </div>

This should give you a good start at learning the code. There are several navbar modification hacks here you could search for.

Regards,

<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">