Re: CSS drop down menus

Discussion in 'HTML' started by dorayme, Feb 25, 2012.

  1. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > Currently I'm using a Javascript dropdown on my site, but I was thinking
    > of replacing it with a CSS version.
    >
    > I've been playing a bit with some code I found on the web and reached
    > this result:
    > http://www.molon.de/test/test7/
    >

    Check the HTML for errors. Use a validator.

    > Now, my questions:
    >
    > 1. Can the CSS be further simplified or structured better, without
    > changing the appearance?
    >
    > 2. If I want all text longer than 170 pixel to be cut off (for instance
    > in the "Temple of Hathor in Dendera bla bla bla" cut off the "bla bla
    > bla"), what to I need to do?
    > I tried out "white-space:nowrap;" but I don't know exactly how this
    > works.
    >


    Consider sizing in ems and allowing all boxes to grow naturally. In
    fact, consider not using so many levels, there are serious usability
    issues with such.


    > 3. I got the impression that IE7 does not display properly the drop-down
    > menus (on IE8, 9 and recent versions of Firefox and Opera it's all
    > neatly aligned). Is this really the case and what do I need to do?


    For some older IE the fix is - da da dum! - a fragment of javascript!
    You can put an instruction to the js in a conditional for IE eyes only
    if you like. look up "Suckerfish"

    The better strategy is probably this: make your site and your dropdown
    in a way that it *does not matter* if the dropdown works or not. Make
    sure that all the links at the top (including your "gallery") go
    somewhere where there is a standard local menu to take you further.

    --
    dorayme
     
    dorayme, Feb 25, 2012
    #1
    1. Advertising

  2. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    >
    > > > http://www.molon.de/test/test7/
    > > >


    > > Consider sizing in ems and allowing all boxes to grow naturally.

    >
    > How to do that?
    >


    Look at your menu items and pick a size that comfortably fits the
    largest item, 10em might be first stab to see. Instead of your width
    of 170px. You would also need to change a left positioning of
    ul.dropdown ul ul from 168px, maybe 10em for that too.

    Consider not putting in anything in the dd items that needs to be cut
    off or which will not fit comfortably in the 10em or whatever you
    choose.

    > > In
    > > fact, consider not using so many levels, there are serious usability
    > > issues with such.

    >


    Do look into this, we have had many threads on this and there are many
    website pages about this.

    > The site has up to five levels of hierarchy (region, country and up to
    > three below that). Over 1200 galleries and then there are galleries of
    > galleries etc. This follows directly from the size of the site (22000
    > images).
    >


    OK, but it does not follow that the navigation of the site *needs*
    such a deeply layered dd system. I read your point about it taking
    longer without. Maybe it would take *you* and others *familiar* with
    your site longer but of even that I am not sure. The danger in
    thinking things like it is needed is that you might not making a solid
    and usable navigation system to really backbone the whole site.

    This backbone is a high level menu repeated on every page, local menus
    on the different sections one level down and so on. Huh? OK, let's say
    that on the home page, for instance, you have as a general navigation,
    'Central Europe, East Asia, ...' Seven regions in total. Regions
    without further sub regions will simply go to pages with the top level
    menu. Regions with sub regions will have a local menu showing the sub
    regions, Middle East will go to pages with Israel, Jordan... being
    the members of the local menu.


    > > > 3. I got the impression that IE7 does not display properly the drop-down
    > > > menus (on IE8, 9 and recent versions of Firefox and Opera it's all
    > > > neatly aligned). Is this really the case and what do I need to do?

    > >
    > > For some older IE the fix is - da da dum! - a fragment of javascript!
    > > You can put an instruction to the js in a conditional for IE eyes only
    > > if you like.

    >
    > Hmmm... what is market share of IE7? But seriously, I'm not
    > knowledgeable enough to fine-tune the dropdrown menus for IE7.
    >


    You don't need to if you don't *rely* on the dd menu working
    'perfectly' I was rather pleased that I made a mistake on some site
    whereby the dd did not work on IE6 in spite of my seemingly careful
    attempt to provide for it with js. Because it *still worked well
    enough*, all they really needed to see was the top level items, the
    users in IE6 would not know what was missing, they could easily
    navigate anyway. I never bothered to fix it!

    > > look up "Suckerfish"

    >
    > Aha... let me try this out.
    >
    > > The better strategy is probably this: make your site and your dropdown
    > > in a way that it *does not matter* if the dropdown works or not. Make
    > > sure that all the links at the top (including your "gallery") go
    > > somewhere where there is a standard local menu to take you further.

    >
    > You can of course navigate the site without dropdown menu. But it takes
    > longer to reach a certain page or gallery.


    See above.

    --
    dorayme
     
    dorayme, Feb 25, 2012
    #2
    1. Advertising

  3. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > I have a new version now:
    > http://www.molon.de/test/test7/index1.html
    >
    > Now it happens that when navigating down the dropdown menu some fields
    > have a white font (#ddd) on a lightblue background. How to set those
    > fields to a black (#000) font?
    > --


    Your foreground colour of BODY, it is a grey, is influencing things in
    various ways (inheritance). You need to put in a color: #000 at
    various points.

    For example in your ul.dropdown li, you have a background colour but
    no foreground one. Good habit to always consider putting in the
    foregound colour with color whenever you have a background-color.

    In your ul.dropdown a:link, you give another grey for color. But, of
    course, #000 if you want black.

    --
    dorayme
     
    dorayme, Feb 26, 2012
    #3
  4. dorayme

    dorayme Guest

    In article <>,
    dorayme <> wrote:

    > Good habit to always consider putting in the
    > foregound colour with color whenever you have a background-color.


    er... should read, might as well simplify at the same time,

    Good habit in general to give a color: whenever you give a
    background-color: and vice-versa

    --
    dorayme
     
    dorayme, Feb 26, 2012
    #4
  5. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    >
    > > Your foreground colour of BODY, it is a grey, is influencing things in
    > > various ways (inheritance). You need to put in a color: #000 at
    > > various points.

    >
    > I just tried to put a color: #000 everywhere and didn't achieve the
    > desired result.
    >


    No need to do that and if you really did this, then the reason it is
    not working is not for any CSS reason, at least not in Safari or
    Firefox. You may have a cache refresh need.

    > > For example in your ul.dropdown li, you have a background colour but
    > > no foreground one. Good habit to always consider putting in the
    > > foregound colour with color whenever you have a background-color.

    >

    ....

    > > In your ul.dropdown a:link, you give another grey for color. But, of
    > > course, #000 if you want black.

    >

    ....
    >
    > Actually I tried everything, but could not solve the problem. I suspect
    > that a new style must be added for something, to account for branches of
    > the menu tree through which you have passed.
    >


    Here is the markup and css from your last url and I made two changes,
    both as I said in the post to which you reply. And all the links go
    black. If this is not what you want, I am not sure what to advise you.
    You still had a #ddd as a foreground when I just went to it:

    ul.dropdown a:link { color: #ddd; ...

    --
    dorayme
     
    dorayme, Feb 27, 2012
    #5
  6. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > I've found out that browsers have a CSS caching issue, so for the
    > purpose of testing I've placed the CSS into the html file:
    > http://www.molon.de/test/test12/
    >


    Let's first get rid of the thing that the validator at
    http://validator.w3.org/ complains about at line 177

    Now,

    <http://dorayme.netweaver.com.au/molon.html>


    > The main issue is for some mysterious reason, when navigating down the
    > tree, the background colours of all active tree branches go to #bbd but
    > the text colours only go to #000 if the cursor is on the li element
    > (then revert to #ddd).
    >
    > I was hoping that inserting a color: #000 into ul.dropdown li.hover or
    > ul.dropdown li:hover would do the trick, but no.
    >
    > This controls the colour of the text:
    > ul.dropdown a:link { color: #ddd; text-decoration: none;}
    >
    > But once again it is really strange that when navigating down the tree
    > the background colours of the li's are all locked, while the text
    > colours flips back. Any idea?


    I see nothing untoward with *background* colours with my URL above on
    my machine. There are usability issues, best to set color and
    background-color in pairs for links and make sure you set them for
    :visited; :active; :hover; :focus; too

    --
    dorayme
     
    dorayme, Feb 29, 2012
    #6
  7. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <>, dorayme
    > says...
    >
    > > Let's first get rid of the thing that the validator at
    > > http://validator.w3.org/ complains about at line 177
    > >
    > > Now,
    > >
    > > <http://dorayme.netweaver.com.au/molon.html>

    >
    > Hmmm.... I switched to iso-8859-1. Now the page validates.
    >
    > > I see nothing untoward with *background* colours with my URL above on
    > > my machine. There are usability issues, best to set color and
    > > background-color in pairs for links and make sure you set them for
    > > :visited; :active; :hover; :focus; too

    >


    > I tried the following:
    > ul.dropdown a:link { color: #ddd; text-decoration: none;}
    > ul.dropdown a:focus { color: #000; text-decoration: none;}
    > ul.dropdown a:active { color: #000; text-decoration: none;}
    > ul.dropdown a:hover { color: #000; cursor:hand; }
    >
    > But the link won't switch to #000 after I navigate past it.
    >


    Did you try what I was suggesting in last post re

    * setting foreground colours and background colours in pairs

    and

    * setting for :visited; :active; :hover; :focus; ?

    :visit is important and will make its presence felt if you actually
    visit a link (or try to). The browser remembers the attempt in a
    session and uses the colours you or the default stylesheet or the
    browser defaults specify. Best that you specify to get what you want.

    Try this order:

    a:link {...}
    a:visited {...}
    a:focus {...}
    a:hover {...}
    a:active {...}

    There are a few ditties to help you remember the order. Let's make a
    new one to forget, I can never remember the aids to remember!

    How about a possible ultra-conservative political proposal:

    Less Votes For Heretical Activists

    ? <g>

    --
    dorayme
     
    dorayme, Feb 29, 2012
    #7
  8. Alfred Molon wrote:
    > In article<jivpat$m41$>, Jonathan N. Little says...
    >> I haven't looked into the CSS closely yet, but for me your page causes
    >> FF to hang or become unresponsive for several seconds when you try to
    >> extend the menu. There is an initial delay just to get the menu to fly
    >> out. No problems with IE9. Anyone else see this?

    >
    > I don't have this problem with FF. Will try it out on my wife's
    > computer, which is an old machine with a slow processor.


    I don't think it's a system issue, I am running a quad-core i5 CPU with
    8GB RAM on Win7 64-Bit

    I see the same problem with 64-bit Waterfox.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 4, 2012
    #8
  9. Alfred Molon wrote:
    > In article<>, Alfred Molon
    > says...
    >>> I don't think it's a system issue, I am running a quad-core i5 CPU with
    >>> 8GB RAM on Win7 64-Bit
    >>>
    >>> I see the same problem with 64-bit Waterfox.

    >>
    >> Well, it works fine on my wife's PC. Works smoothly on my PC with Opera
    >> 11, FF10, Seamonkey 2.7.2, IE9 and IE9 64 bit.

    >
    > And also 64 bit Waterfox which I just installed.


    SeaMonkey 2.7.2 is my browser of choice. But something is definitely not
    agreeing with mozilla with your test13, test7 works just fine.

    Now not going into the useability issue of a mouse-only multilevel
    flyout menu, your CSS has a lot of cruft and complicated z-index and
    extra classes.

    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, if we cannot convince you to abandon the nested menu.

    <http://www.littleworksstudio.com/temp/usenet/molon-menu>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 4, 2012
    #9
  10. "Jonathan N. Little" <> writes:

    > Alfred Molon wrote:
    >
    >> http://www.molon.de/test/test13/
    >>

    >
    > I haven't looked into the CSS closely yet, but for me your page causes
    > FF to hang or become unresponsive for several seconds when you try to
    > extend the menu. There is an initial delay just to get the menu to fly
    > out. No problems with IE9. Anyone else see this?


    Yes, I do too. Firefox 10.0.2 running on my Linux system. Some mouse
    movements can cause CPU use to got to 100% for several seconds. Of
    course, it may be a bug in FF rather than the OP's page, but either way
    it's undesirable.

    --
    Ben.
     
    Ben Bacarisse, Mar 4, 2012
    #10
  11. dorayme

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <jj0mml$7d5$>, 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
     
    dorayme, Mar 4, 2012
    #11
  12. Alfred Molon wrote:
    > In article<jj0mml$7d5$>, 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
     
    Jonathan N. Little, Mar 4, 2012
    #12
  13. Alfred Molon wrote:
    > In article
    > <>, 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
     
    Jonathan N. Little, Mar 4, 2012
    #13
  14. dorayme

    Tim Streater Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <jj0mml$7d5$>, 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
     
    Tim Streater, Mar 4, 2012
    #14
  15. Alfred Molon <> writes:

    > In article
    > <>, 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.
     
    Ben Bacarisse, Mar 5, 2012
    #15
  16. Alfred Molon <> writes:

    > In article
    > <>, 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.
     
    Ben Bacarisse, Mar 5, 2012
    #16
  17. Alfred Molon <> 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.
     
    Ben Bacarisse, Mar 5, 2012
    #17
  18. Alfred Molon wrote:
    > In article
    > <>, 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
     
    Jonathan N. Little, Mar 5, 2012
    #18
  19. Alfred Molon wrote:
    > In article<jj2cjd$ahn$>, 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
     
    Jonathan N. Little, Mar 5, 2012
    #19
  20. "Jonathan N. Little" <> writes:

    > Alfred Molon wrote:
    >> In article<jj2cjd$ahn$>, 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.
     
    Ben Bacarisse, Mar 5, 2012
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    825
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,077
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    551
    msimmons
    Jul 16, 2009
  4. Xarky

    Problem with CSS and drop down menus

    Xarky, Mar 29, 2005, in forum: Javascript
    Replies:
    5
    Views:
    126
  5. Replies:
    5
    Views:
    319
Loading...

Share This Page