How to I create a simple navbar for my site??

I need to know how to create a simple navbar for my site. At the time being all I really want or need is just one that includes links on the right hand side of my site pages. I would like to create a navbar so I can create new page links as I need them without having to add them to each page of my site.

I wasn't sure if I should use JavaScript Code, CSS, or What exactly. I have seen codes for navbars that use an unordered ("ul") code, but I really don't understand them very well. I have no clue how to go about designing them at all.

I currently have an example page for you to view (gives you an idea of how I want my navbar to appear on the right hand side of the page):
http://www.jabsfreelanceworld.com/indexdraft.html

BTW, my site currently views best in IE 6.0 and 7.0 and FF 3.0 for now.

 

Here is how I would do it. I might be a little excessive on some parts, but I think it should work.

The css style:

<style>
a:link {
text-decoration: none; <-= removes bullet points
color: black;
}

a:visited { text-decoration: none; }
a:hover { text-decoration: none; color: blue; }
a:active { text-decoration: none; }

#navigation {
width: 220px; <-= width of the "box"
float: right; <-= you want it on the right side
text-align: left;<-= doesn't have to be left

#navigation p {
color: black; <-= font color
font-style: normal;
font-size: 11px;
</style>

Now for the coding:

<div class="navigation">
<ul>
<li><a href="LINK HERE">LinkName</a>
<li><a href="LINK2 HERE">LinkName2</a>
</ul>
</div>

 

Hi there !
What html editor are you using?
Because:
I am using Namo webeditor and when you start creating a website, you can use the site wizard and create an outline structure of your site. let´s say you create 7 pages in there.

Then you save the structure and go and edit the pages for content you can insert a navigation bar wherever you want and include just the pages you want you can have vertical or horizontal navigation bars, have rollover effects, and much more. You insert that navagation bar onto every page you got. Just once!
Then as you add pages in the site wizard they will automatically show in your navigation bar on every page.

 

Take a look at [ http://css.maxdesign.com.au/listamatic/ ] and pick the navbar that suits your needs

 

Thank you.

 

Thank you very much for your help so far, everyone. I probably will try one of the options given to me via your replies. My goal is to be able to just include a navbar code on the pages of my site that I have so far, and then each time I add a new page all I need to do is add it once. Is that what this code given to me is for (given by Steve)? Or others?

I mean, I wonder if once I add this code if then all I need to do is add new page navbar links to my index page or what? My goal is to not have to spend time adding it to every single new page I create, and/or having to keep copying and pasting code every time I create a new page. Is that what this code is for? Just wondering.

I hope so because it would make adding new pages much easier. Otherwise, maybe perhaps I would ask a question about this in the Javascript section?? (or some other coding language).

 

just use blogger or wordpress and it creates your navbar already, plus you can update your site with just a few clicks

 

You can use php includes. Just add the code to every page you create then all you need to do is update one txt file. You can add it to HTML pages, but you'll probably need to modify the htaccess file. Let me know if you're interested and I'll dig up the files and code.

 

Im not really going to look at that code, just a few pointers.

Your applying a class to a <div> so your css should be .navigation not #

You use the # paired with id, e.g. <div id="navigation">

 

Thats a great site...thanks for posting it...very useful