1. You could actually do nested lists using
css -- You have to display the submenus using pseudo-classes and a bag of tricks.
I did it once for fun, but it was hugely difficult to get it right cross-browser, and was unwieldy and balky even when it worked -- it's more a parlor trick than a working method of page building. It's absurd given the power of javascript. If I saved the file somewhere I'll post it here when I find it.
I got the framework from that woman who did the box hack for IE 5.5. I'm sure it's on the search engines if you want to look.
2. What Ryan said. If you have static
html, just put a different menu on each page.
3. I do the effect with
PHP. You give each page an internal name (or you could use the page title, it's just that a new variable means cleaner-looking code; I use $b = a short description like "p1" or "index"). Then I do "if" clauses for each page name in the header include. It's a bit bulky but runs fast and is rock-solid stable. You can do anything you want to with the header.
Here's an example. The classes may be a little odd, as you have to allow for differences in the left or rightmost list items. I've put in x's - the "xx" class changes the colors of a top row item and puts a red dot on the item that looks like a little red LED; "xx" does the same thing on a dropdown (aka flyout) item. The "bm2" is a negative bottom margin adjustment to fix gaps in IE7.
Code:
<ul> // this is the main navigation list
// first, a filler graphic
<li class="xxx"><img src="http://www.webforumz.com/images/nav_filler2.gif"
height="19" width="229" alt="interactive health bar graphic" />
</li>
// next, a top-level entry with no dropdown
<li
<?php if ($b == 'index') {
echo ' class="xx"><img
src="./images/redarrowleft.gif" class="redarrow" width="5" height="5"
alt="arrow to health" />Index';
} else {
echo '><a href="./index.php">Index</a>';
}
?>
</li>
// another top level entry, but this one has a dropdown list
<li
<?php if ($b == 'foo') {
echo ' class="xx"><img
src="./images/redarrowleft.gif" class="redarrow" width="5" height="5"
alt="arrow to health" /> Foo';
} else {
echo '><a href="./foo.php">Foo</a> ';
}
?>
// here's the dropdown list, a second ul with css "ul li ul", "ul li ul li.__", "ul li
ul li a:whatever", etc
<ul>
<li
<?php if ($b == 'bar') {
echo ' class="x bm2"><img
src="./images/redarrowleft.gif" class="redarrow" width="5" height="5"
alt="arrow to health" />Bar';
} else {
echo ' class="bm2"><a href="./foobar.php">
Bar</a> ';
}
?>
</li>
Submit Your Article
Announcements
Contact
