Css expanding menu ?

[Accurax]

hi guys ...

havnt been around here for ages... so hello to you all <waves>.. i misse dyou all

Im trying to come up with a veritcal css menu that expands either on click or on hover... preferably without any javascript.

Cdan anyone recomend a tutorial, as im struggling to find something that fits the bill

Sorry for the short post... ill come back and say hi in the cafe properly later

acc

[Lchad]

Hey!!

Several flyout navs here all with css. Quite a few to choose from.
http://www.cssplay.co.uk/menus/

I've had good luck with this one as well. http://www.tanfa.co.uk/css/examples/menu/

[Accurax]

ive had to use a little JS linda my sweety

This is because i only want them to open onclick.... js was the easiest option.

It looks good... but, i have a new problem !

I have a hover and a normal and a "open" graphic for my buttons, now the normal and hover work fine, but i cant figure out how to show the "active" button when the menu is open.

a:active doesnt work (didnt think it would)

Any idea's?

[Lchad]

Yes... selected state is done like this...

Code: Select all

<a href="index.html" class="selected">Home</a>

Css looks like this

Code: Select all

ul li a.selected {
    text-decoration: none;    
    font: bold small-caps 16px "MS Serif";
    color: #759EFF;    
    }

note that a colon is not used with this state.

[Accurax]

im not sure that will work ... heres my html :

Code: Select all

<dl id="menu">
        <dt onclick="javascript:show('smenu1');"><a href="#">CD's and Music</a></dt>
            <dd id="smenu1">
                <ul>
                    <li><a href="#">MP3 Players</a></li>
                    <li><a href="#">CD's and Music</a></li>
                </ul>
            </dd>
            <dt onclick="javascript:show('smenu2');"><a href="#">Computing</a></dt>
            <dd id="smenu2">
                <ul>
                    <li><a href="#">Computers & Laptops</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Printers</a></li>
                    <li><a href="#">Satellite Navigation</a></li
                    <li><a href="#">MP3 Players</a></li>
                    <li><a href="#">Office Furnature</a></li>
                    <li><a href="#">Cameras</a></li>
                </ul>
            </dd>
            <dt onclick="javascript:show('smenu3');"><a href="#">DVD's and Video</a></dt>
            <dd id="smenu3">
                <ul>
                    <li><a href="#">DVD's</a></li>
                    <li><a href="#">DVD Rentals</a></li>
                </ul>
            </dd>
            <dt onclick="javascript:show('smenu4');"><a href="#">Electrical Goods</a></dt>
            <dd id="smenu4">
                <ul>
                    <li><a href="#">Home entertainment</a></li>
                    <li><a href="#">Satellite Navigation</a></li>
                    <li><a href="#">MP3 Players</a></li>
                    <li><a href="#">Kitchen Appliances</a></li>
                    <li><a href="#">Household Appliances</a></li>
                </ul>
            </dd>
</dl>
</div><!-- /leftdiv -->

and my css so far

Code: Select all

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width:151px;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 32px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background-image:url(../images/closedleft.jpg)
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu dt a:hover{
background-image:url(../images/overleft.jpg)
}
#menu dt a:active{
background-image:url(../images/overleft.jpg)
}
#menu li a:hover, #menu dd a:hover, #menu dl a:hover {
background: #e90236;
}

[Accurax]

i think ,ill need to assign a class via javascript when the "onclick" is true... but im not sure how to do this.

[Lchad]

Ah... I see... I have no experience with Javascript so hopefully someone else can help ya!

[Accurax]

must be a echo command or somethign similar to php.... just not sure... rpint maybe lol... arg

[pa007]

You'll need to get the id so it only affects the menu links then loop through all of the links withing the element with that id then add an onclick event handler that sets the bg image of the clicked element to the specified image and set all the others to the standard bg image.

Alterbatively you can change the class name of the 'active' nav item using JS. You need the alternative css style in the CSS fiel already of course. You would follow the same instructions as above but would set the class name rather than the bg property. Changing the class name seems to be a lot quicker than altering the bg style so it may be your best bet.

I'm actually doing something like this myself at the minute. I should be done withing the next few days. When I get it all working, I'll post up the script. It's not particularly difficult, to be honest.

Pete.

[Accurax]

thanks mate.... my js really does suck

[pa007]

Have you ever looked at quirksmode.org? It's the home of JavaScript-god-who-is Peter-Paul Koch. It's a brilliant site and I can also recommend his book PPK on JavaScript, likewise DOM Scripting by Jeremy Keith is also excellent. They aren't particularly technical but they show you how JS works, how it should work, when to use it etc and they also provide real world example. In Keith's book you basically put a site together with loads of funky and accessible JS features. The JS Bible is pretty good for the technical stuff, there are simply too many bits and bobs to remember so this is very useful.

Anyway, I should get to work on that script.

Pete.