Web Hosting Talk






PDA

View Full Version : Navigation suggestions for expanding site

Acert93
09-06-2005, 03:03 AM
Hello,

I am working on a site and am debating the best way to create the navigation bar. The big thing for me is 1) it will be fairly large and 2) it needs to be expandable, both for parent topics and daughter topics.

The site is an ancient language site will be fairly content heavy (lots of grammar, vocabulary, etc) and I want the body of the page to be as open as possible and leave room for a side bar "table of contents" for the different sections.

I like Macromedia.com's horizontal navigation bar. I want to stay away from flash on this site for now. I can do java dropdown menu in Dreamweaver but I was wondering if I could get the same effect using CSS (or if there is yet an even more effecient way).

I would like to make the nav a library item so I can add new categories and add sub-categories on a regular basis as the content expands and the site grows. Basically medium sized project that I would like to expand over the years without having to do a lot of extra site design work to make the site accessible.

Any ideas and suggestions welcome. I am not tied to the horizontal nav btw, it was just what I had in mind.

Thanks :)
ironpath
09-06-2005, 06:11 PM
I use a menu system called transmenus. www.nlayer.com has a working example of it....very smooth flowing...http://www.youngpup.net/2004/transmenus
Yevhen
09-07-2005, 01:59 AM
I think for type of menu closer to marcromedia's one need use combination of ccs and javascript. Take a look on their web site with no-flash plugin browser to see how they make it.
Cendas
09-24-2005, 04:35 PM
This is just a sample but if its the kinda thing your looking for then glad i could help.

Firstly put all this in an html document:

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="navlist.css">
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="" title="">Products</a></li>
<li><a href="" title="">Service</a></li>
</ul>
</div>
</body>
</html>

Then put all of this into a css file and dont forget to name it navlist and save into the same folder as the html document.

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}

#navlist a:hover { color: #000; }

There you go, thats just a simple navigation bar done in css, but the hyperlink dont work because i didnt put any in, lol.

if thats the kinda thing your looking for let me know