SitePoint.com

Markdidj · Feb 21, 2004, 13:43

I had a go creating a css dropdown menu......

Code:

<title>active menu</title>
<style type="text/css">
.menuDiv1 { position:absolute;top:10px;left:10px;height:100px;width:100px;overflow:hidden }
.menuDiv2 { position:absolute;top:30px;left:10px;height:100px;width:100px;overflow:hidden }
.menuDiv3 { position:absolute;top:50px;left:10px;height:100px;width:100px;overflow:hidden }
.menuDiv4 { position:absolute;top:70px;left:10px;height:100px;width:100px;overflow:hidden }
.m1 a {display:block;z-Index:1;width:40px}
.m1 a:active,.m1 a:focus { background:red;height:100px;z-Index:0}
.m1 p { position:relative;left:40px;top:-120px;z-Index:1 }
.m1 p a { width:70px }
</style>
<body>
<div class="menuDiv1">
<div class="m1">
<a class="m1" href="#1">one</a>
<p>
<a href="#11">one one</a>
<a href="#12">one two</a>
<a href="#13">one three</a>
</p>
</div>
</div>
<div class="menuDiv2">
<div class="m1">
<a class="m1" href="#2">two</a>
<p>
<a href="#21">two one</a>
<a href="#22">two two</a>
<a href="#23">two three</a>
</p>
</div>
</div>
<div class="menuDiv3">
<div class="m1">
<a class="m1" href="#3">three</a>
<p>
<a href="#31">three one</a>
<a href="#32">three two</a>
<a href="#33">three three</a>
</p>
</div>
</div>
<div class="menuDiv4">
<div class="m1">
<a class="m1" href="#4">four</a>
<p>
<a href="#41">four one</a>
<a href="#42">four two</a>
<a href="#43">four three</a>
</p>
</div>
</div>
</body>

Can't seem to get it to work in Opera? any suggestions, any other problems, and is there any others that have been made?

Thanks

Markdidj · Feb 21, 2004, 15:20

this em version seems to work better.....

Code:

body { font-size:1em; }
.menuDiv1 { position:absolute;top:1em;left:10px;height:5em;width:8em;overflow:hidden }
.menuDiv2 { position:absolute;top:2em;left:10px;height:5em;width:8em;overflow:hidden }
.menuDiv3 { position:absolute;top:3em;left:10px;height:5em;width:8em;overflow:hidden }
.menuDiv4 { position:absolute;top:4em;left:10px;height:5em;width:8em;overflow:hidden }
.m1 a {display:block;z-Index:1;width:3em}
.m1 a:hover { background:red;height:5em}
.m1 p { position:relative;left:3em;top:-6em}
.m1 p a { position:relative;top:0em;width:5em }
.m1 p a:hover { position:relative;top:3.8em }

Found others that work with li:hover or other tags, which is not IE and Opera compatible, but this one works in all my browsers, and it doesn't look like there's anything to stop it working in NS4 either. Could someone let me know, I haven't got it installed.

Cheers loads.......

Doh...didn't check it in IEEEEEEEEAAARRRGGGHHH............ More Work!!!
Tomo Perhaps.....

Paul O'B · Feb 21, 2004, 16:06

Hi Mark,

Your first version seemed to work better in ie and mozilla. However both versions seem to suffer from the sub menus disappearing when you roll over them (even though you can still select them). If you can cure that then your on to a winner

I used a similar method that worked well in ie (using display:block and display:none) and using the active state to hold the sub menu in place. This allowed sub menu items to be selected.

However I came across the same problem in Opera not holding the active state and never got it to work properly for opera.

It looks like there may be a solution in there somewhere if perhaps you could combine a couple of different methods to get opera to play ball.

I tried nn4.7 for you but nothing happens at all in that browser I'm afraid.

Hope that's of some use

Paul

Markdidj · Feb 22, 2004, 01:45

Thanks Paul. Tried slight variations, Opera doesn't like the first and IE the second. I think someone from Opera was saying in thier forum that something was going to change with their active and focus commands. I think I'll wait to see what it is. I've got a feeling their next browser is going to be pretty good.

Thanks again......

jorasmi · Feb 26, 2004, 00:30

where's the script?

Paul O'B · Feb 26, 2004, 00:37

Quote:

where's the script?

There's no script - That's the point

Mark was trying to create a drop down without a script (and it very nearly works

)

Paul

Markdidj · Feb 29, 2004, 13:04

I created a better version, here it is. You'll need a btnPlus and btnMinus gif image.

Code:

<title>active menu</title>
<style type="text/css">
.menuDiv1 { position:absolute;top:20px;left:0px;height:100px;width:200px;overflow:hidden }
.menuDiv2 { position:absolute;top:40px;left:0px;height:100px;width:200px;overflow:hidden }
.menuDiv3 { position:absolute;top:60px;left:0px;height:100px;width:200px;overflow:hidden }
a.plus {display:block;position:relative;top:0px;left:60px;height:15px;width:15px;background-position:0px 5px;background-repeat:no-repeat;background-image:url(btnPlus.gif);text-decoration:none}
a:active.plus,a:focus.plus { height:100px;width:100px;background-image:url(btnMinus.gif);}
.pmenu {position:relative;top:-120px;left:80px }
.pmenu a {display:block;height:auto;width:auto;background-image:none }
</style>
<body>
<div class="menuDiv1">
<a href="#link1" style="float:left">Link1</a>
<a href="#1" class="plus">&#160&#160&#160</a>
<p class="pmenu">
<a href="#11">one one</a>
<a href="#12">one two</a>
<a href="#13">one three</a>
</p>
</div>
<div class="menuDiv2">
<a href="#link1" style="float:left">Link2</a>
<a href="#1" class="plus">&#160&#160&#160</a>
<p class="pmenu">
<a href="#11">two one</a>
<a href="#12">two two</a>
<a href="#13">two three</a>
</p>
</div>
<div class="menuDiv3">
<a href="#link3" style="float:left">Link3</a>
<a href="#3" class="plus">&#160&#160&#160</a>
<p class="pmenu">
<a href="#31">three one</a>
<a href="#32">three two</a>
<a href="#33">three three</a>
</p>
</div>

Paul, it doesn't matter if menu disappears on active or focus because it's then forwarded to the next page ( which could be left open on default ).
Shame it doesn't work in Opera yet though......

Images attached.......

Added: not finished yet but close

Markdidj · Feb 29, 2004, 14:43

And finally........

Code:

 
<title>active menu</title>
<style type="text/css">
.menuDiv1 { position:absolute;top:10px;left:100px;height:100px;width:100px;overflow:hidden }
.menuDiv2 { position:absolute;top:30px;left:100px;height:100px;width:100px;overflow:hidden }
.menuDiv3 { position:absolute;top:50px;left:100px;height:100px;width:100px;overflow:hidden }
.menuDiv4 { position:absolute;top:70px;left:100px;height:100px;width:100px;overflow:hidden }
.links { position:absolute;top:10px;left:50px;width:50px }
.m1 a {display:block;z-Index:1;width:100px;background-position:5px 5px;background-repeat:no-repeat;background-image:url(btnPlus.gif);text-decoration:none}
.m1 a:active,.m1 a:focus { background-image:url(btnMinus.gif);height:100px;z-Index:0}
.m1 p { position:relative;left:20px;top:-120px;z-Index:3 }
.m1 p a { background-image:none;display:block;width:70px;z-Index:3 }
.m1 p a:active,.m1 p a:focus { position:relative;top:80px;background:none }
</style>
<body>
<div class="menuDiv1">
<div class="m1">
<a class="m1" href="#1">&#160&#160&#160</a>
<p>
<a href="#11">one one</a>
<a href="#12">one two</a>
<a href="#13">one three</a>
</p>
</div>
</div>
<div class="menuDiv2">
<div class="m1">
<a class="m1" href="#2">&#160&#160&#160</a>
<p>
<a href="#21">two one</a>
<a href="#22">two two</a>
<a href="#23">two three</a>
</p>
</div>
</div>
<div class="menuDiv3">
<div class="m1">
<a class="m1" href="#3">&#160&#160&#160</a>
<p>
<a href="#31">three one</a>
<a href="#32">three two</a>
<a href="#33">three three</a>
</p>
</div>
</div>
<div class="menuDiv4">
<div class="m1">
<a class="m1" href="#4">&#160&#160&#160</a>
<p>
<a href="#41">four one</a>
<a href="#42">four two</a>
<a href="#43">four three</a>
</p>
</div>
</div>
<div class="links">
<a href="#link1">Link1</a>
<a href="#link2">Link2</a>
<a href="#link3">Link3</a>
<a href="#link4">Link4</a>
</div>
</body>

mixture of all three, position near a set of links

works in IE, NS, Mozilla but not Opera, just need a javascript equivalent for that.....

jorasmi · Mar 1, 2004, 01:14

Quote:

Originally Posted by Paul O'B

There's no script - That's the point

Mark was trying to create a drop down without a script (and it very nearly works

)

Paul

uuups! sorry! i thought it can only be done with a script.

jorasmi · Mar 1, 2004, 01:20

is there any way it can work those browsers including opera without using any javascript?

Paul O'B · Mar 1, 2004, 07:14

Hi Mark,

The example works great in Mozilla but I'm having a problem getting the second and third links of the menu to go anywhere.

The first link of the submenu goes to wherever its pointed but the second and third links don't go anywhere.

Is it just me or do you have this problem. I've had a quick play with it but haven't been able figure out why it's not working yet.

If you can get this working reliably it will be great. I've tried a number of different ways to achieve this previously for ie (mozillas easy because it understands the hover on other elements apart form the a) but I've always run into the same problem of only being able to have one active link in the sub-menu.

Good work though

Paul

Paul O'B · Mar 1, 2004, 08:32

Hi Mark,

If you change the width of the <a> from 100px to 15px then the links in the submenu all seem to work properly in IE6 (and mozilla still works ok).

e.g.

Code:

.m1 a {display:block;z-Index:1;width:15px;background-position:5px 5px;background-repeat:no-repeat;background-image:url(btnPlus.gif);text-decoration:none}

If only Opera would play ball it would be even better

Quote:

Originally Posted by jorasmi

is there any way it can work those browsers including opera without using any javascript?

Now yet

Paul

Markdidj · Mar 1, 2004, 15:29

Thanks Paul, I noticed that too, and changed it to 20px so in Mozilla the plus will be in the center of the active dotted border.

It also looks good with the .m1 a:active and the p background-colors added.

Arkkimaagi · Mar 3, 2004, 08:06

Nope, I do not get it to work in ie, nor firefox.

Maybe if you'd paste the html and doctypes aswell, currently that's far from a complete code.

edit: DOH, as I did not have the images, I did not found them, nor did I click them. How stupid of me.. ..it seems to work atlest in ie..

Markdidj · Mar 3, 2004, 15:06

It does work in Opera too..... allbeit badly!! lol

Use shift and direction button to chose a menu to open, then rollover highlighted part with mouse to open....

I think they'll be fixing it in their next browser, since it almost works in their present.......

JesterCMK · Mar 24, 2004, 12:38

OK, please, pardon my ignorance. But, I have some questions on how this is working:

1. What exactly causes them to appear and disappear when the main links are accessed?
2. Where the heck does that dotted border come from?

We use IE6 where I work and the buttons appear inside the dotted border of the appearing sub-menu links. I think this looks a little cluttered and confusing. (Do the buttons go with the new sub-menu choices or no?) Could the sub-menus be moved farther to the right to show a little more separation from the buttons?

I support our employees with disabilities and I work mostly with web application accessibility. I'm still testing this method in the JAWS screen reader, but I'm hoping something like this will work when I suggest accessible alternatives to our developers who are emotionally attached to the inaccessible drop-down menus.

Thanks to all, Christopher

Feb 26, 2004, 00:30	#5
jorasmi web daemon Join Date: Nov 2001 Location: Philippines Posts: 275	where's the script? __________________ http://www.itworks.tk http://www.thecode.tk --micro$oft free website--

Mar 1, 2004, 01:20	#10
jorasmi web daemon Join Date: Nov 2001 Location: Philippines Posts: 275	is there any way it can work those browsers including opera without using any javascript? __________________ http://www.itworks.tk http://www.thecode.tk --micro$oft free website--

Mar 3, 2004, 15:06	#15
Markdidj ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Join Date: Sep 2002 Location: Bournemouth, South UK Posts: 1,397	It does work in Opera too..... allbeit badly!! lol Use shift and direction button to chose a menu to open, then rollover highlighted part with mouse to open.... I think they'll be fixing it in their next browser, since it almost works in their present....... __________________ LiveScript: Putting the "Live" Back into JavaScript if live output_as_javascript else output_as_html end if

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Feb 21, 2004, 15:20	#2
Markdidj ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Join Date: Sep 2002 Location: Bournemouth, South UK Posts: 1,397	this em version seems to work better..... Code: body { font-size:1em; } .menuDiv1 { position:absolute;top:1em;left:10px;height:5em;width:8em;overflow:hidden } .menuDiv2 { position:absolute;top:2em;left:10px;height:5em;width:8em;overflow:hidden } .menuDiv3 { position:absolute;top:3em;left:10px;height:5em;width:8em;overflow:hidden } .menuDiv4 { position:absolute;top:4em;left:10px;height:5em;width:8em;overflow:hidden } .m1 a {display:block;z-Index:1;width:3em} .m1 a:hover { background:red;height:5em} .m1 p { position:relative;left:3em;top:-6em} .m1 p a { position:relative;top:0em;width:5em } .m1 p a:hover { position:relative;top:3.8em } Found others that work with li:hover or other tags, which is not IE and Opera compatible, but this one works in all my browsers, and it doesn't look like there's anything to stop it working in NS4 either. Could someone let me know, I haven't got it installed. Cheers loads....... Doh...didn't check it in IEEEEEEEEAAARRRGGGHHH............ More Work!!! Tomo Perhaps..... __________________ LiveScript: Putting the "Live" Back into JavaScript if live output_as_javascript else output_as_html end if Last edited by Markdidj; Feb 21, 2004 at 16:02..

Feb 21, 2004, 16:06	#3
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 29,298	Hi Mark, Your first version seemed to work better in ie and mozilla. However both versions seem to suffer from the sub menus disappearing when you roll over them (even though you can still select them). If you can cure that then your on to a winner I used a similar method that worked well in ie (using display:block and display:none) and using the active state to hold the sub menu in place. This allowed sub menu items to be selected. However I came across the same problem in Opera not holding the active state and never got it to work properly for opera. It looks like there may be a solution in there somewhere if perhaps you could combine a couple of different methods to get opera to play ball. I tried nn4.7 for you but nothing happens at all in that browser I'm afraid. Hope that's of some use Paul

Feb 22, 2004, 01:45	#4
Markdidj ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Join Date: Sep 2002 Location: Bournemouth, South UK Posts: 1,397	Thanks Paul. Tried slight variations, Opera doesn't like the first and IE the second. I think someone from Opera was saying in thier forum that something was going to change with their active and focus commands. I think I'll wait to see what it is. I've got a feeling their next browser is going to be pretty good. Thanks again...... __________________ LiveScript: Putting the "Live" Back into JavaScript if live output_as_javascript else output_as_html end if

Mar 1, 2004, 07:14	#11
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 29,298	Hi Mark, The example works great in Mozilla but I'm having a problem getting the second and third links of the menu to go anywhere. The first link of the submenu goes to wherever its pointed but the second and third links don't go anywhere. Is it just me or do you have this problem. I've had a quick play with it but haven't been able figure out why it's not working yet. If you can get this working reliably it will be great. I've tried a number of different ways to achieve this previously for ie (mozillas easy because it understands the hover on other elements apart form the a) but I've always run into the same problem of only being able to have one active link in the sub-menu. Good work though Paul

Mar 1, 2004, 15:29	#13
Markdidj ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Join Date: Sep 2002 Location: Bournemouth, South UK Posts: 1,397	Thanks Paul, I noticed that too, and changed it to 20px so in Mozilla the plus will be in the center of the active dotted border. It also looks good with the .m1 a:active and the p background-colors added. __________________ LiveScript: Putting the "Live" Back into JavaScript if live output_as_javascript else output_as_html end if

Mar 3, 2004, 08:06	#14
Arkkimaagi SitePoint Zealot Join Date: Mar 2002 Location: Lappeenranta, Finland Posts: 177	Nope, I do not get it to work in ie, nor firefox. Maybe if you'd paste the html and doctypes aswell, currently that's far from a complete code. edit: DOH, as I did not have the images, I did not found them, nor did I click them. How stupid of me.. ..it seems to work atlest in ie..

Mar 24, 2004, 12:38	#16
JesterCMK SitePoint Member Join Date: Mar 2004 Location: Illinois, USA Posts: 1	Questions on how it works. OK, please, pardon my ignorance. But, I have some questions on how this is working: 1. What exactly causes them to appear and disappear when the main links are accessed? 2. Where the heck does that dotted border come from? We use IE6 where I work and the buttons appear inside the dotted border of the appearing sub-menu links. I think this looks a little cluttered and confusing. (Do the buttons go with the new sub-menu choices or no?) Could the sub-menus be moved farther to the right to show a little more separation from the buttons? I support our employees with disabilities and I work mostly with web application accessibility. I'm still testing this method in the JAWS screen reader, but I'm hoping something like this will work when I suggest accessible alternatives to our developers who are emotionally attached to the inaccessible drop-down menus. Thanks to all, Christopher