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
 
      02-25-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-25-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>, 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
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-26-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-26-2012
In article <(E-Mail Removed)>,
dorayme <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-27-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>, 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-29-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-29-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>, 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-04-2012
Alfred Molon wrote:
> In article<jivpat$m41$(E-Mail Removed)>, 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-04-2012
Alfred Molon wrote:
> In article<(E-Mail Removed). com>, 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
 
Reply With Quote
 
Ben Bacarisse
Guest
Posts: n/a
 
      03-04-2012
"Jonathan N. Little" <(E-Mail Removed)> 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.
 
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