question about a type of css menu

[camcool21]

I have a question about how to create the type of navigation menu that http://www.digg.com uses. The categories are "Technology" "Science"
"World & Business" "Sports" "Entertainment" and "Gaming". And a pointer specifies which menu you have currently selected. Now when you click on a topic and you are taken to the next page, the navigation menu has changed and below it, are categories within the category you selected, and the category within the category that you are currently in is also specified by an arrow. Now I have been searching for how to recreate such an effect and have come up empty...I was wondering if anyone here would be kind enough to explain or point me in the direction of a helpful tutorial...

http://www.dynamicdrive.com/style/cs...css-tabs-menu/
~that is an example of one already made, but I wanna learn how it works and create my own

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
~also something similar...


I've noticed, with the dynamicdrive.com examples, that javascript is used, I do not believe digg uses javascript. Is there a way to achieve this effect only using css? In basic terms, I wanna learn how to create a navigation menu, that tells the user what category they are currently in...with a submenu directly below it that also tells the user what subcategory they are currently in...help please?

EDIT: http://design.linkworth.com/test.html
~~~Just found that site, and that is exactly the effect I want to create.....I don't want the hover feature that is used here tho...

[Ryan Fait]

Just use a background image of an upwards pointing arrow on the selected item. You would be able to use nested lists here, so you'll have something more like:

Code: Select all

<div class="topmenu">
  <ul>
    <li>Tech</li>
    <li class="showArrow">Sci</li>
  </ul>
</div>
<div class="secnav">
  <ul>
    <li>This</li>
    <li>And that</li>
  </ul>
</div>

[masonbarge]

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: Select all

<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>

[camcool21]

thx guys, I'm just gonna use javascript then I guess


thx for the help