Re: [WSG] CSS flyout menu

[Jack Kennard]

Works in Mozilla suites & ie7 (with a little design difference)

Jack Kennard
Web Designer
http://www.WebSailingDesigns.com
770 933-2000 x233





Stay up to date with the latest travel
technology on the web
http://www.websailingdesigns.com/blog/

Win a free trip to Andalucia
http://www.romanticislandgetawaytours.net/rss/

Stay in touch by Instant Messenger
msn- [EMAIL PROTECTED]
yahoo- javajoba 
Please do not use these for emails




John 'Max' Maxwell wrote:


Kepler Gelotte wrote:


John 'Max' Maxwell wrote:
   

If anyone has a second could they please take a look at this again at 
www.project.ex16.co.uk and let m eknow how the flyout menu performs on 
their specific set-up.


Max.
 


xp :: ie/ff/opera
It is working for me in the above browsers. No problem holding the 
flyout for me. Nothing is perfect. So be it.

Regards,
~dL
   



Hi Max,

As David states your submenus work on a Windows XP machine using IE6,
FireFox1.5, Opera 8. I did notice a strange gap in the bottom left hand side
in IE6 however. I put a screenshot here:
http://www.neighborwebmaster.com/examples/projectXie6.jpg 

 


Hi Kepler,

thanks for that - yeah I know about the gap at the bottom already on it.

cheers,

Max.

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.407 / Virus Database: 268.12.9/458 - Release Date: 9/27/2006
 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[John 'Max' Maxwell]

Kepler Gelotte wrote:

  
John 'Max' Maxwell wrote:


  If anyone has a second could they please take a look at this again at 
www.project.ex16.co.uk and let m eknow how the flyout menu performs on 
their specific set-up.

Max.
  

xp :: ie/ff/opera
It is working for me in the above browsers. No problem holding the 
flyout for me. Nothing is perfect. So be it.
Regards,
~dL

  
  
Hi Max,

As David states your submenus work on a Windows XP machine using IE6,
FireFox1.5, Opera 8. I did notice a strange gap in the bottom left hand side
in IE6 however. I put a screenshot here:
http://www.neighborwebmaster.com/examples/projectXie6.jpg 

  

Hi Kepler,

thanks for that - yeah I know about the gap at the bottom already on it.

cheers,

Max.



***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***

Re: [WSG] CSS flyout menu

[Al Sparber]

Also, for all the people advocating using a JavaScript solution, 
remember to
make sure the submenus are visible when JavaScript is turned off. A 
lot of
the examples I have seen do not degrade nicely with JavaScript 
disabled -
the submenus just become inaccessible. I know you *can* make the 
submenus
work (by making them always visible) with JavaScript off, I just 
think

sometimes people forget to test their sites with JavaScript off.


It's very easy, but not always the best solution :-)

Perhaps this article will at least explain my personal perspective on 
the matter:

http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".









***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] CSS flyout menu

[Kepler Gelotte]

> John 'Max' Maxwell wrote:
> >>
> > If anyone has a second could they please take a look at this again at 
> > www.project.ex16.co.uk and let m eknow how the flyout menu performs on 
> > their specific set-up.
> >
> > Max.
> xp :: ie/ff/opera
> It is working for me in the above browsers. No problem holding the 
> flyout for me. Nothing is perfect. So be it.
> Regards,
> ~dL

Hi Max,

As David states your submenus work on a Windows XP machine using IE6,
FireFox1.5, Opera 8. I did notice a strange gap in the bottom left hand side
in IE6 however. I put a screenshot here:
http://www.neighborwebmaster.com/examples/projectXie6.jpg 

I also tested Netscape 7.1. The submenus appear at the top of the browser
instead of next to the parent menu item. I have a screenshot here:
http://www.neighborwebmaster.com/examples/projectXns71.jpg


If I have time later, I will see if I can figure out what is causing that
behavior.

 
Also, for all the people advocating using a JavaScript solution, remember to
make sure the submenus are visible when JavaScript is turned off. A lot of
the examples I have seen do not degrade nicely with JavaScript disabled -
the submenus just become inaccessible. I know you *can* make the submenus
work (by making them always visible) with JavaScript off, I just think
sometimes people forget to test their sites with JavaScript off.


Regards,
Kepler Gelotte

http://www.neighborwebmaster.com






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Al Sparber]

From: "John 'Max' Maxwell" <[EMAIL PROTECTED]>

I would say, this approach is more usable:
http://www.projectseven.com/csslab/testing/listmenus/exp_vproto/

? Surely if you try to go from 'bridges' to 'manhattan' it does the 
same thing - vanishes?


It's a lot less likely to happen. We actually conducted a lab on this 
very menu, as it is to be a future product.



Are you actually saying you prefer the alternative of a larger 
button as a 'method'? I presumed after your damning review that you 
were going to show me a whizz bang alternative that only a proper 
coder could achieve ... not a 'bigger button'.


I apologize if you think my review was damning. I was trying to give 
you a little advice. You don't have to accept it.



I'll take all the usability issues on board thanks but what I really 
meant was - does it work.


From a purely mechanical standpoint, yes - it does function as I 

believe you intend it to.

Sorry if you misunderstood my intentions and best of luck to you.

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".







***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Christian Heilmann]

I have selected your response from a cast as the only one I feel even
merits acknowledgement. Thank you for your response and advise I will
indeed look at the other options.

I am not quite sure what warrants the attitude of some of the posters on
here but it really is tiresome. Coding skills you have - but people
skills? It is true that they really rarely co-exist.


Basically as the explanantion to use JavaScript and a timeout does
allow you to offer the UI effect Andy was talking about? The article I
posted explains in detail why CSS only solutions fail and what more
you can achieve by making CSS and JavaScript work together. The post
was commissioned by one of the admins of CSS-Discuss as exactly this
discussion has been happening there over and over again.

People skills also include dealing with criticism and filtering
responses as to what is valuable to solve your problem for a wider
audience. Simply judging others on a mailing list response is not
enough for that. I found that I got the best results out of
controversial discussions and some of the people I had real email
fights with now work with me or have become very good contacts indeed.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[John 'Max' Maxwell]

A


I would say, this approach is more usable:
http://www.projectseven.com/csslab/testing/listmenus/exp_vproto/

? Surely if you try to go from 'bridges' to 'manhattan' it does the same 
thing - vanishes? Are you actually saying you prefer the alternative of 
a larger button as a 'method'? I presumed after your damning review that 
you were going to show me a whizz bang alternative that only a proper 
coder could achieve ... not a 'bigger button'.


I'll take all the usability issues on board thanks but what I really 
meant was - does it work.


Thanks again.

Max.





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[John 'Max' Maxwell]

Hi Andy,

I have selected your response from a cast as the only one I feel even 
merits acknowledgement. Thank you for your response and advise I will 
indeed look at the other options.


I am not quite sure what warrants the attitude of some of the posters on 
here but it really is tiresome. Coding skills you have - but people 
skills? It is true that they really rarely co-exist.


Thanks again Andy.

Kind regards,

Max.




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Al Sparber]

From: "Christian Heilmann" <[EMAIL PROTECTED]>
> It is working for me in the above browsers. No problem holding 
> the

> flyout for me. Nothing is perfect.

It might not be possible to be perfect, but we should strive to
produce the best $x possible.


If you imitate rich client interfaces do it to the full extend or
don't do it at all. Would you use the windows start menu if it
collapsed every time you slip a bit off a selection?


I'd get a Mac. 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Christian Heilmann]

> It is working for me in the above browsers. No problem holding the
> flyout for me. Nothing is perfect.

It might not be possible to be perfect, but we should strive to
produce the best $x possible.


If you imitate rich client interfaces do it to the full extend or
don't do it at all. Would you use the windows start menu if it
collapsed every time you slip a bit off a selection?

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[David Dorward]

On Fri, Sep 29, 2006 at 11:22:05AM -0400, ~davidLaakso wrote:

> It is working for me in the above browsers. No problem holding the 
> flyout for me. Nothing is perfect.

It might not be possible to be perfect, but we should strive to
produce the best $x possible.

-- 
David Dorward  http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[~davidLaakso]

John 'Max' Maxwell wrote:


If anyone has a second could they please take a look at this again at 
www.project.ex16.co.uk and let m eknow how the flyout menu performs on 
their specific set-up.


Max.

xp :: ie/ff/opera
It is working for me in the above browsers. No problem holding the 
flyout for me. Nothing is perfect. So be it.

Regards,
~dL

--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Christian Heilmann]

> That makes the menu totally unusable, in my opinion. Tis the Achilles
> heel of "pure CSS" menus.
>
Hi All - back again and hopefully without any need for any javascript.
If anyone has a second could they please take a look at this again at
www.project.ex16.co.uk and let m eknow how the flyout menu performs on
their specific set-up.

"That makes the menu totally unusable, in my opinion" ... is that a bit
strong or is it me? I think the navigation on my page above is pretty
straight forward to use and a lot better than some seen on the net - it
certainly isn't 'totally unusable' - thank you.


Yes, it is a bit strong but it has a lot of truth in it. Please stop
flogging that dead horse of "hopefully without any need for
JavaScript". CSS was never meant to define behaviour, and you are
completely at the mercy of the browser. At least with a bit of
JavaScript doing the heavy behaviour lifting you can test if your menu
system can be applied, you can determine whether the menu will fit the
screen without causing scrollbars and you can make the functionality
time delayed to allow for user mistakes. There is really nothing but
an academic "wow it can be done" about CSS only solutions for menus.

In case you care, I make my case here:
http://www.wait-till-i.com/index.php?p=327

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Al Sparber]

From: "John 'Max' Maxwell" <[EMAIL PROTECTED]>
Hi All - back again and hopefully without any need for any 
javascript. If anyone has a second could they please take a look at 
this again at www.project.ex16.co.uk and let m eknow how the flyout 
menu performs on their specific set-up.


"That makes the menu totally unusable, in my opinion" ... is that a 
bit strong or is it me? I think the navigation on my page above is 
pretty straight forward to use and a lot better than some seen on 
the net - it certainly isn't 'totally unusable' - thank you.


I mouse over "Seniors". I see the sub-menu. I want to click on 
"Athletic". I jusr worked out and my arm muscles are a bit "quivery". 
My natural tendency is to move my mouse diagonally, following the 
straightest possible path to my destination. The popout menu keeps 
snapping shut on me.


I would say, this approach is more usable:
http://www.projectseven.com/csslab/testing/listmenus/exp_vproto/

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".









***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Andy Warwick]

On 29 Sep 2006, at 15:50, John 'Max' Maxwell wrote:


Al Sparber wrote:
dragged diagonally to the submenu item instead of along and then  
down.

and menus vanish unless the mouse is

That makes the menu totally unusable, in my opinion. Tis the  
Achilles heel of "pure CSS" menus.


Hi All - back again and hopefully without any need for any  
javascript. If anyone has a second could they please take a look at  
this again at www.project.ex16.co.uk and let m eknow how the flyout  
menu performs on their specific set-up.


"That makes the menu totally unusable, in my opinion" ... is that a  
bit strong or is it me? I think the navigation on my page above is  
pretty straight forward to use and a lot better than some seen on  
the net - it certainly isn't 'totally unusable' - thank you.


Hi John/Max

Works fine on Safari 2.0.4 on Mac OS X 10.4.7.

You might want to think about adding some visual clue that there is a  
pop-out menu to the appropriate items on the navigation, like small  
right-facing arrows flush to the RHS.


As for the 'totally unusable' comment, I think what Al is pointing  
out is the issue with all CSS menus, in that you can't 'skip' the  
mouse diagonally into the pop-up menu diagonally from the main menu,  
as the menu disappears; it's a very subtle thing, but is easy to  
notice when you compare it to the OS-level pop-outs.


I.E

Seniors (a)   >  Chiefs
Quins
Athletic
Colts
(b) Vets

	You can't move directly from (a) to (b), as the sub-menu disappears  
when you move diagonally down and right, away from (a).


See  for a better  
explanation.


HTH

--
Andy Warwick, Creed New Media Ltd.
Contact me: http://www.creed.co.uk/contact.htm
Thank me: http://www.amazon.co.uk/gp/registry/2XK5NOX5Z5TQK/





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[John 'Max' Maxwell]

Al Sparber wrote:

dragged diagonally to the submenu item instead of along and then down.
and menus vanish unless the mouse is

That makes the menu totally unusable, in my opinion. Tis the Achilles 
heel of "pure CSS" menus.


Hi All - back again and hopefully without any need for any javascript. 
If anyone has a second could they please take a look at this again at 
www.project.ex16.co.uk and let m eknow how the flyout menu performs on 
their specific set-up.


"That makes the menu totally unusable, in my opinion" ... is that a bit 
strong or is it me? I think the navigation on my page above is pretty 
straight forward to use and a lot better than some seen on the net - it 
certainly isn't 'totally unusable' - thank you.


cheers,

Max.




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[Al Sparber]

From: "David Dorward"


Submenus lack keyboard access


That could be desirable if the site is engineered in a certain way.



and menus vanish unless the mouse is
dragged diagonally to the submenu item instead of along and then 
down.


That makes the menu totally unusable, in my opinion. Tis the Achilles 
heel of "pure CSS" menus.


--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".










***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[~davidLaakso]

John 'Max' Maxwell wrote:

John 'Max' Maxwell wrote:
www.project.ex16.co.uk Their is sub nav available under the senior 
and junior sections (hopefully).

Max.

No flyout in xp ie/6.0. Thirteen captures (linux/mac/win2k/xp):

~dL

--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[John 'Max' Maxwell]

John 'Max' Maxwell wrote:

Hi All,

Back again - what a day - after being strict with myself about 100% 
valid HTML, CSS and access on ALL designs that leave my studio this 
year ... I realised my own site was in a bit of a pickle - how 
embarrassing! Anyway - all done - though I will have to go back to 
statcounter to get the valid version of their code.


Anyways - reason I am here - I have just been working on a CSS flyout 
menu - please see www.project.ex16.co.uk and I wondered if you guys 
could try it out on different platforms for me to see how it behaves. 
Their is sub nav available under the senior and junior sections 
(hopefully).


Many thanks,

Max.




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Thanks for the replies (joke) - will be back soon with same plus IE hacks!!

:-(


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] CSS flyout menu

[David Dorward]

On Thu, Sep 28, 2006 at 07:48:45PM +0100, John 'Max' Maxwell wrote:
> Anyways - reason I am here - I have just been working on a CSS flyout 
> menu - please see www.project.ex16.co.uk

Submenus lack keyboard access, and menus vanish unless the mouse is
dragged diagonally to the submenu item instead of along and then down.

-- 
David Dorward  http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] CSS flyout menu

[John 'Max' Maxwell]

Hi All,

Back again - what a day - after being strict with myself about 100% 
valid HTML, CSS and access on ALL designs that leave my studio this year 
... I realised my own site was in a bit of a pickle - how embarrassing! 
Anyway - all done - though I will have to go back to statcounter to get 
the valid version of their code.


Anyways - reason I am here - I have just been working on a CSS flyout 
menu - please see www.project.ex16.co.uk and I wondered if you guys 
could try it out on different platforms for me to see how it behaves. 
Their is sub nav available under the senior and junior sections (hopefully).


Many thanks,

Max.




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***