How do i create a navigation bar?

MadGamer · 16-10-2003, 23:26

Hi, i have got my own website and was just wondering how you create a navagation bar. See the thing is i want to spuce it up a bit and i want to start by putting a navigation bar in. Of course i would do the coding manually in notepad, but was wondering how i go about setting up a navagation bar.

Any help apprecieted

WNA

Richard M · 16-10-2003, 23:37

I have a killer one which acts and looks identical to the old Win95/98/ME/NT/2000 style program menus.
If you want the code let me know. (i.e PM me because I might not see any new responses in this thread)

MadGamer · 17-10-2003, 17:06

Quote:

Originally Posted by Roger K

I have a killer one which acts and looks identical to the old Win95/98/ME/NT/2000 style program menus.
If you want the code let me know. (i.e PM me because I might not see any new responses in this thread)

No No you misstead the thread. I said a navagation bar (Like the one on nthellworld.co.uk at the top.)

MadGamer · 22-10-2003, 19:09

Isn't anyone going to reply? Didn't mean to be aggressive lol.

Alan Waddington · 22-10-2003, 19:15

The following bit of code is producing the nthellworld Nav bar

Code:

	<a href="usercp.php?"><img src="images/buttons/top_profile.gif" alt="top_profile.gif" title="Here you can view your subscribed threads, work with private messages and edit your profile and preferences" border="0" vspace="8" /></a>
	
	<a href="calendar.php?"><img src="images/buttons/top_calendar.gif" alt="top_calendar.gif" title="Calendar" border="0" vspace="8" /></a>
	<a href="memberlist.php?"><img src="images/buttons/top_members.gif" alt="top_members.gif" title="Find other members" border="0" vspace="8" /></a>
	<a href="faq.php?"><img src="images/buttons/top_faq.gif" alt="top_faq.gif" title="Frequently Asked Questions" border="0" vspace="8" /></a>
	<a href="search.php?"><img src="images/buttons/top_search.gif" alt="top_search.gif" title="Search" border="0" vspace="8" /></a>
	<a href="index.php?"><img src="images/buttons/top_home.gif" alt="top_home.gif" title="Home" border="0" vspace="8" /></a>

Basically you create a hyperlink with <a> and then use an image inside the hyperlink.

MadGamer · 22-10-2003, 20:58

What bits do i have to change cos i have load of links on my website CLICK HERE

ntluser · 22-10-2003, 22:28

Quote:

Originally Posted by WNA

What bits do i have to change cos i have load of links on my website CLICK HERE

Interesting avatar!

If I say 'snap' do I get to keep them both?

MetaWraith · 23-10-2003, 12:39

It's fairly easy to use CSS to define a navbar style
to which you can apply to any text based links,
and thus build up a navbar which is easily customised.

I can supply examples if required.

There is also some freebie programs on the web that will
automate the process for you. one such is here
http://www.popularshareware.com/CSS-...load-1387.html

Hope this helps

Mantrid · 23-10-2003, 14:01

I use this site for navigation bars:

http://www.dynamicdrive.com/dynamicindex1/index.html

Alan Waddington · 23-10-2003, 14:22

Quote:

Originally Posted by WNA

What bits do i have to change cos i have load of links on my website CLICK HERE

Looking at your website, I can see you already know how to do hyperlinks using:

Code:

<a href="url_to_go_to_when_clicked.html">text_that_becomes_the_link</a>

You also have an image on the front page which is formed using:

Code:

<img src="url_of_the_image.gif">

You put these together to form a clickable button like this:

Code:

<a href="url_to_go_to_when_clicked.html"><img src="url_of_the_image.gif"></a>

You need to create a gif image of the button of course. So you will need a drawing program that can create gif images. Paint on XP will do this, but the version that comes with some earlier versions of windows doesn't and you will need paintshop pro or something similar.

Unfortunately, the web browser will by default put an ugly blue border around the image. You can get rid of this by specifying border="0". We can also specify some text that appears if we hover over the button (in IE) using the alt tag e.g. alt="some_text". i.e. we now have:

Code:

<a href="url_to_go_to_when_clicked.html"><img src="url_of_the_image.gif" alt="some_text" border="0"></a>

If you use the above code several times in a row, using different images and different urls to go to, then the result will be a simple button bar. This is how the nthellworld button bar works.

You now add the same code to the top of all of your pages, so that the bar appears to stay the same as you navigate round your site.

Alan

SMHarman · 23-10-2003, 14:41

And before you add it to all the pages you make sure the code is complete tested and working and has all the buttons you want as it is a right royal pain to go back and replace the code in each page.

Alternately you make a top frame with the nav bar and a main frame.