Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: CSS drop down menus

Reply
Thread Tools

Re: CSS drop down menus

 
 
dorayme
Guest
Posts: n/a
 
      03-04-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <jj0mml$7d5$(E-Mail Removed)>, Jonathan N. Little says...

....
>
> Regarding your "if we cannot convince you to abandon the nested menu":
>
> Do you have an idea how much effort I put into this CSS dropdown menu in
> the past 10 days? Now it's finally working and I should abandon it?


Usability is a serious matter and, of course, now that you have gone
to so much trouble, it is hard to blame you for going ahead. But, and
this is quite a separate point - not needing you to much change the
actual dd markup - it is a good idea not to be *relying on it*. But I
have already explained this point earlier about how to provide for
this.

--
dorayme
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-04-2012
Alfred Molon wrote:
> In article<jj0mml$7d5$(E-Mail Removed)>, Jonathan N. Little says...
>> SeaMonkey 2.7.2 is my browser of choice. But something is definitely not
>> agreeing with mozilla with your test13, test7 works just fine.

>
> The problem is that I can't reproduce the error you are experiencing.
> And I'm using the same browsers you are using. Even on my wife's PC
> which runs on XP there is not the remotest hint of a problem.
>
> .....
>
>> Here is a much simpler example that only uses 2 classes, 'droplist' base
>> and the 'dir' for menus with child menus. No z-indexes and other stuff.
>> Note that it WILL NOT work in IE6. and it a bit twitchy in IE<9 maybe
>> some tweaking
>>
>> <http://www.littleworksstudio.com/temp/usenet/molon-menu>

>
> It is simpler, but it still needs some fixing to make it look neat. What
> is the problem with IE8?


With 7 & 8 the box model is rendered a little off so it is a little
finicky with the sustaining the "hover" when traversing from one menu to
the child menu.

>
> Regarding your "if we cannot convince you to abandon the nested menu":


It is a accessibility nightmare. As my next version of my own site I am
dumping it.

>
> Do you have an idea how much effort I put into this CSS dropdown menu in
> the past 10 days? Now it's finally working and I should abandon it?
>
> Besides I asked if the CSS could be simplified several posts ago on this
> thread and received no feedback.


Been out of town. Don't always get to monitor your thread every day,
sorry. But your version is overly-complicated. Possibly the result of
your 10 days of tweaking. Sometimes the extra bits are stuff abandoned
when it didn't work but can still cause side effects.

>
> But anyway, thanks for your example.



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-04-2012
Alfred Molon wrote:
> In article
> <0.a1d8e310323aed76a99d.20120304215904GMT.87ling6n (E-Mail Removed)>, Ben
> Bacarisse says...
>> Of
>> course, it may be a bug in FF rather than the OP's page

>
> Would it be possible to report this to Mozilla and ask them to check?



BTW: the cursor value is 'pointer' not 'hand'

"cursor: pointer;"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      03-04-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <jj0mml$7d5$(E-Mail Removed)>, Jonathan N. Little says...
> > SeaMonkey 2.7.2 is my browser of choice. But something is definitely not
> > agreeing with mozilla with your test13, test7 works just fine.

>
> The problem is that I can't reproduce the error you are experiencing.
> And I'm using the same browsers you are using. Even on my wife's PC
> which runs on XP there is not the remotest hint of a problem.


> > Here is a much simpler example that only uses 2 classes, 'droplist' base
> > and the 'dir' for menus with child menus. No z-indexes and other stuff.
> > Note that it WILL NOT work in IE6. and it a bit twitchy in IE<9 maybe
> > some tweaking
> >
> > <http://www.littleworksstudio.com/temp/usenet/molon-menu>

>
> It is simpler, but it still needs some fixing to make it look neat. What
> is the problem with IE8?
>
> Regarding your "if we cannot convince you to abandon the nested menu":
>
> Do you have an idea how much effort I put into this CSS dropdown menu in
> the past 10 days? Now it's finally working and I should abandon it?
>
> Besides I asked if the CSS could be simplified several posts ago on this
> thread and received no feedback.
>
> But anyway, thanks for your example.


Problem with this sort of menu, and all similar ones that you see on web
pages, is that you don't have to click to activate it, and that as you
navigate down, if the mouse drifts out of the menu, you lose it. This is
particularly annoying when you've carefully navigated several levels
down.

It's not clear to me that you can avoid this with a pure CSS multi-level
menu. I've ended up using something called jsdomenu which can be found
at <http://www.dynamicdrive.com>. I also needed something that permits
me to build menus entirely dynamically.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
Ben Bacarisse
Guest
Posts: n/a
 
      03-05-2012
Alfred Molon <(E-Mail Removed)> writes:

> In article
> <0.a1d8e310323aed76a99d.20120304215904GMT.87ling6n (E-Mail Removed)>, Ben
> Bacarisse says...
>> Of
>> course, it may be a bug in FF rather than the OP's page

>
> Would it be possible to report this to Mozilla and ask them to check?


It may be worth it but there is evidence that it's fixed in newer
versions. Whatever happens, it won't help you since some people will
have a version in which it goes wrong.

It does not happen with fewer list items (so a small test case is not
possible) but I have discovered that commenting out the following rule
makes the problem go away:

ul.dropdown li:hover { position: relative; }

(You don't have it exactly like that in the source, but that's the
easiest way for me to specify the problem.)

--
Ben.
 
Reply With Quote
 
Ben Bacarisse
Guest
Posts: n/a
 
      03-05-2012
Alfred Molon <(E-Mail Removed)> writes:

> In article
> <0.50350d025b3d70b5c6ce.20120305030922GMT.87d38r7n (E-Mail Removed)>, Ben
> Bacarisse says...
>> It does not happen with fewer list items (so a small test case is not
>> possible) but I have discovered that commenting out the following rule
>> makes the problem go away:
>>
>> ul.dropdown li:hover { position: relative; }

>
> The position: relative is needed here - try taking it out and see what
> happens.


Yes I know. I am just reporting which property setting seems to be
causing FF trouble.

--
Ben.
 
Reply With Quote
 
Ben Bacarisse
Guest
Posts: n/a
 
      03-05-2012
Alfred Molon <(E-Mail Removed)> writes:
<snip>
> I ran the code through the html validator and it validated without
> errors, then through the CSS validator at
> http://jigsaw.w3.org/css-validator/
>
> and got two errors:
>
> 12 ul.dropdown li property zoom does not exist
> 31 ul.dropdown a:visited cursor hand is no cursor value
>
> (translated from the German output I got)
>
> After the removal of these two properties, the CSS validates as CSS
> level 2.1.
>
> Try it out now maybe the problem is gone:
> http://www.molon.de/test/test13/


Still there. In fact I had corrected those errors myself, and also
removed almost all of the visual stying as well, just be sure it was the
combination of position settings that seemed to be the problem for FF.

--
Ben.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-05-2012
Alfred Molon wrote:
> In article
> <0.50350d025b3d70b5c6ce.20120305030922GMT.87d38r7n (E-Mail Removed)>, Ben
> Bacarisse says...
>> It does not happen with fewer list items (so a small test case is not
>> possible) but I have discovered that commenting out the following rule
>> makes the problem go away:
>>
>> ul.dropdown li:hover { position: relative; }

>
> The position: relative is needed here - try taking it out and see what
> happens.


Okay that is the problem. I noticed that FF goes unresponsive when you
hover the root "Gallery" LI. Don't put your on the pseudo-element
":hover". That makes the UA have to "reapply" the rule on every LI on
each hover event. Just apply it staticly and be done with it.


So remove position: relative; from ul.dropdown li:hover and create a rule

ul.dropdown li { position: relative; }

In fact except for your "visibility" property being toggled your can
remove all the properties except for your background color shift to the
above static rule.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-05-2012
Alfred Molon wrote:
> In article<jj2cjd$ahn$(E-Mail Removed)>, Jonathan N. Little says...
>> Okay that is the problem. I noticed that FF goes unresponsive when you
>> hover the root "Gallery" LI. Don't put your on the pseudo-element
>> ":hover". That makes the UA have to "reapply" the rule on every LI on
>> each hover event. Just apply it staticly and be done with it.
>>
>>
>> So remove position: relative; from ul.dropdown li:hover and create a rule
>>
>> ul.dropdown li { position: relative; }

>
> Here is the new version with the changes you suggested:
> http://www.molon.de/test/test15/
>
> How does it run on your Firefox?


Yep

>
>> In fact except for your "visibility" property being toggled your can
>> remove all the properties except for your background color shift to the
>> above static rule.

>
> I removed z-index: 599 and cursor: default, with no visual change. But I
> wonder what the z-index: 599 was needed for - perhaps compatibility with
> older browsers?


If the flyout menus overlapped their parents that can render underneath
instead of overtop the parent. The z-index is an attempt if address it...


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Ben Bacarisse
Guest
Posts: n/a
 
      03-05-2012
"Jonathan N. Little" <(E-Mail Removed)> writes:

> Alfred Molon wrote:
>> In article<jj2cjd$ahn$(E-Mail Removed)>, Jonathan N. Little says...
>>> Okay that is the problem. I noticed that FF goes unresponsive when you
>>> hover the root "Gallery" LI. Don't put your on the pseudo-element
>>> ":hover". That makes the UA have to "reapply" the rule on every LI on
>>> each hover event. Just apply it staticly and be done with it.
>>>
>>>
>>> So remove position: relative; from ul.dropdown li:hover and create a rule
>>>
>>> ul.dropdown li { position: relative; }

>>
>> Here is the new version with the changes you suggested:
>> http://www.molon.de/test/test15/
>>
>> How does it run on your Firefox?

>
> Yep


Here too.

<snip>
--
Ben.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
retrive preselected value in second drop down list from the first drop down list weiwei ASP .Net 0 01-05-2007 07:29 PM
Auto Drop down a Drop Down List xxbmichae1@supergambler.com Javascript 5 11-23-2005 01:35 AM
Problem with CSS and drop down menus Xarky Javascript 5 03-30-2005 06:33 AM
New to .NET, can I have one drop down box control the data of another drop down box using a database? SirPoonga ASP .Net 2 01-07-2005 10:44 PM



Advertisments