intelligent navigation
June 25, 2008 9:29 AM   Subscribe

Hello all. Building a new website for a company and would very much like to incorporate a navigational system such as exists on the left hand side of this site.

I've seen this on quite a few sites now and like the simplicity of it. I'm not sure if it is SSI driven or if it is using ASP.net or java to accomplish it but I think the structure is pretty self-explanatory. As you click through to a new URL, the nav adjusts by making the black arrow orange (to indicate this is the page you are on) and below the orange arrow, new links show up related to that section.

If someone knew of a tutorial on this, it would be greatly appreciated.
posted by j.p. Hung to Computers & Internet (8 answers total) 2 users marked this as a favorite
 
Looking at the page source, it appears to be javascript. Could be proprietary, or not. Depending on your comfort level with JS, you could probably look through some jscript navigation tutorials and put something together.

I suspect you could also put something together with pure CSS. This guy has done some pretty cool menu stuff with CSS only.

IMHO - if you don't have experience with Javascript, you might want to farm it out before you undertake the task.
posted by producerpod at 9:40 AM on June 25, 2008


Looks like an asp site, but they are using css for the nav. Listamatic and A List Apart both have good info/tutorials. Or search for css list navigation, there's a ton out there.
posted by miss tea at 10:17 AM on June 25, 2008


Or something even easier, use Div's and includes.

Make the site so that the left column like that is empty except for a call to include the menu (I'd use PHP but server side would work just as well). Then create a file that has the code you'd put in for the menu.

One file to edit, and from my end of things it looks like you have the menu hard coded into every page.

Feel free to MeFi mail me if you have any questions.
posted by theichibun at 10:31 AM on June 25, 2008


I couldn't find a specific tutorial, but I did find a tree menu that you can license.

The color scheme in this sample is pretty offensive, but the sothink tree menu code seems to perform the functions that you want, albeit for $60.
posted by mattybonez at 10:31 AM on June 25, 2008


There are a hundred thousand ways to do it, but yes css unordered lists with liberal use of display:none is almost always part of it (divs would also work, as theichibun says).

If you don't want to reload a new page with every click, you'll need Javascript to trigger the re-draw with the proper items collapsed/expanded.
posted by rokusan at 12:28 PM on June 25, 2008


the dead easiest way to do this is to give each arrow a unique id and set the ID of the body tag on each page to something unique. then you can do something like this

<body id="page1">

<menu>
   <item id="item1" class="menuItem">text</item>
   <item id="item2" class="menuItem">text</item>
   <item id="item3" class="menuItem">text</item>
   <item id="item4" class="menuItem">text</item>
   <item id="item5" class="menuItem">text</item>
</menu>

</body>

and then in the css

.menuItem {color:black;}

#page1 #item1 {color:orange;}
#page2 #item2 {color:orange;}
#page3 #item3 {color:orange;}
#page4 #item4 {color:orange;}
#page5 #item5 {color:orange;}
posted by nihlton at 5:22 PM on June 26, 2008


in fact, just whipped up some actual markup. you'll have to make the css more specific to only target an arrow in the <li> elements but that shouldn't be hard.

markup:

<div id="page1">
<ul>
<li id="item1" class="menuItem">item1</li>
<li id="item2" class="menuItem">item2</li>
<li id="item3" class="menuItem">item3</li>
<li id="item4" class="menuItem">item4</li>
<li id="item5" class="menuItem">item5</li>
</ul>
</div>

<div id="page2">
<ul>
<li id="item1" class="menuItem">item1</li>
<li id="item2" class="menuItem">item2</li>
<li id="item3" class="menuItem">item3</li>
<li id="item4" class="menuItem">item4</li>
<li id="item5" class="menuItem">item5</li>
</ul>
</div>

<div id="page3">
<ul>
<li id="item1" class="menuItem">item1</li>
<li id="item2" class="menuItem">item2</li>
<li id="item3" class="menuItem">item3</li>
<li id="item4" class="menuItem">item4</li>
<li id="item5" class="menuItem">item5</li>
</ul>
</div>

<div id="page4">
<ul>
<li id="item1" class="menuItem">item1</li>
<li id="item2" class="menuItem">item2</li>
<li id="item3" class="menuItem">item3</li>
<li id="item4" class="menuItem">item4</li>
<li id="item5" class="menuItem">item5</li>
</ul>
</div>

<div id="page5">
<ul>
<li id="item1" class="menuItem">item1</li>
<li id="item2" class="menuItem">item2</li>
<li id="item3" class="menuItem">item3</li>
<li id="item4" class="menuItem">item4</li>
<li id="item5" class="menuItem">item5</li>
</ul>
</div>



CSS

.menuItem {color:black;}

#page1 #item1 {color:orange;}
#page2 #item2 {color:orange;}
#page3 #item3 {color:orange;}
#page4 #item4 {color:orange;}
#page5 #item5 {color:orange;}
posted by nihlton at 5:28 PM on June 26, 2008


pretending of course those divs are the body tag. this way its the same menu markup, same css. only the body tag ID changes.
posted by nihlton at 5:29 PM on June 26, 2008


« Older Solo 21st in san francisco- ideas?   |   Why doesn't my XBox 360 know it's an XBox 360? Newer »
This thread is closed to new comments.


Tags

Share