Re: [WSG] CSS or JavaScript flyout menu
Son of Suckerfish can do several levels:
http://www.htmldog.com/articles/suckerfish/dropdowns/
We developed our own in-house CMS and it works fine with that!
On 11/01/06, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote:
I had a look at Suckerfish Dropdowns but it seems to go only one level deep,
I need several levels deep.
Kind regards,
Taco Fleur - CEO
Pacific Fox http://www.pacificfox.com.au an industry leader with commercial
IT experience since 1994 .
*
Web Design and Development
*
SMS Solutions, including developer API
*
Domain Registration, .COM for as low as fifteen dollars a year,
.COM.AU for fifty dollars two years!
*
BlackBerryR Business Solutions www.OzBlackBerry.com
*
We endorse PayPal, accept payments online now!
*
Seamless Merchant integration
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Lachlan Hunt
Sent: Wednesday, 11 January 2006 5:02 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS or JavaScript flyout menu
Taco Fleur - Pacific Fox wrote:
I am looking for some ideas on how to create a
JavaScript/CSS fly-out
menu, the dreaded day has come that a client finally
insisted on using one!
...
var menu = new Object();
menu[ about_bdsrecruit ] = new Object();
Yikes! Don't generate a menu like that, it's a waste of time.
Markup:
ul
lia href=#Item 1/a/li
liItem 2
ul
liSubmenu item 1/li
liSubmenu item 2/li
liSubmenu item 3/li
/ul
/li
liItem 3/li
/ul
Make them all links if you like, I just omitted the a
elements for simplicity.
CSS:
li ul { display: none; }
li:hover ul { display: block; }
/* Plus whatever styles you want to make it look good and
layout correctly. */
JS:
Attach mouseover and mouseout event listeners to the li
elements to show and hide the sub menus.
Google for Pure CSS Menus, Suckerfish Dropdowns CSS/JS
menus or similar search terms.
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Jason Foss
http://www.almost-anything.com.au
http://www.waterfallweb.net
Windows Messenger: [EMAIL PROTECTED]
North Rockhampton, Queensland, Australia
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS or JavaScript flyout menu
Taco Fleur - Pacific Fox wrote: I am looking for some ideas on how to create a JavaScript/CSS fly-out menu, the dreaded day has come that a client finally insisted on using one! Has anyone got some ideas code samples etc.? Any help would be much appreciated. try the son of suckerfish. http://www.htmldog.com/articles/suckerfish/dropdowns/example/ Mostly non-javascript (except in IE/browser that don't support the hover pseudo class) too. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS or JavaScript flyout menu
Taco Fleur - Pacific Fox wrote: I had a look at Suckerfish Dropdowns but it seems to go only one level deep, I need several levels deep. Because of usability/accessibility issues it creates, I would not go with a CSS solution if more than one level deep is needed. Also, I would not use display:none to hide the nested ULs unless you don't care of hiding these links from assistive devices. Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS or JavaScript flyout menu
From: Thierry Koblentz [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, January 11, 2006 10:21 AM Subject: Re: [WSG] CSS or JavaScript flyout menu Taco Fleur - Pacific Fox wrote: I had a look at Suckerfish Dropdowns but it seems to go only one level deep, I need several levels deep. Because of usability/accessibility issues it creates, I would not go with a CSS solution if more than one level deep is needed. Also, I would not use display:none to hide the nested ULs unless you don't care of hiding these links from assistive devices. Sometimes it can be good to hide the sub-menus. It depends on how the site is structured and one's goals. 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. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS or JavaScript flyout menu
Al Sparber wrote: Sometimes it can be good to hide the sub-menus. It depends on how the site is structured and one's goals. Actually, with these *big* menus (2/3 levels deep), I think it's a good idea to hide everything below the top level items from assistive devices. Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] CSS or JavaScript flyout menu
PS. it needs to be able to accommodate several sub links. Kind regards, Taco Fleur - CEOPacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 Web Design and Development SMS Solutions, including developer API Domain Registration, .COM for as low as fifteendollars a year, .COM.AU for fifty dollarstwo years! BlackBerryBusiness Solutions www.OzBlackBerry.com We endorse PayPal, accept payments online now! Seamless Merchant integration From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Taco Fleur - Pacific FoxSent: Wednesday, 11 January 2006 3:34 PMTo: wsg@webstandardsgroup.orgSubject: [WSG] CSS or _javascript_ flyout menu I am looking for some ideas on how to create a _javascript_/CSS fly-out menu, the dreaded day has come that a client finally insisted on using one! I need to custom write it because it needs to be integrated with a CMS.I started working on the structure (see below)I'd like to generate the menu from, but that's where it ended. Has anyone got some ideas code samples etc.? Any help would be much appreciated. var menu = new Object(); menu[ "about_bdsrecruit" ] = new Object(); menu[ "about_bdsrecruit" ][ "vision_mission" ] = new Object(); menu[ "about_bdsrecruit" ][ "vision_mission" ][ "value" ] = "Vission/Mission"; menu[ "about_bdsrecruit" ][ "vision_mission" ][ "link" ] = "/about/bdsrecruit/vision/"; menu[ "about_bdsrecruit" ][ "history" ] = new Object(); menu[ "about_bdsrecruit" ][ "history" ][ "value" ] = "Vission/Mission"; menu[ "about_bdsrecruit" ][ "history" ][ "link" ] = "/about/bdsrecruit/history/"; menu[ "about_bdsrecruit" ][ "training" ] = new Object();menu[ "about_bdsrecruit" ][ "training" ][ "value" ] = "Training";menu[ "about_bdsrecruit" ][ "training" ][ "link" ] = "/about/bdsrecruit/training/"; menu[ "about_bdsrecruit" ][ "the_people" ] = new Object();menu[ "about_bdsrecruit" ][ "the_people" ][ "value" ] = "The People";menu[ "about_bdsrecruit" ][ "the_people" ][ "link" ] = "/about/bdsrecruit/people/"; menu[ "about_bdsrecruit" ][ "the_people" ][ "staff_profile" ] = new Object();menu[ "about_bdsrecruit" ][ "the_people" ][ "staff_profile" ][ "value" ] = "Staff Profiles";menu[ "about_bdsrecruit" ][ "the_people" ][ "staff_profile" ][ "link" ] = "/about/bdsrecruit/profile/"; -- Taco Fleur - http://www.pacificfox.com.au Web Design, Web development, Graphic Design and Complete Internet Solutionsan industry leader with commercial IT experience since 1994 Kind regards, Taco Fleur - CEOPacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 Web Design and Development SMS Solutions, including developer API Domain Registration, .COM for as low as fifteendollars a year, .COM.AU for fifty dollarstwo years! BlackBerryBusiness Solutions www.OzBlackBerry.com We endorse PayPal, accept payments online now! Seamless Merchant integration
Re: [WSG] CSS or JavaScript flyout menu
Taco Fleur - Pacific Fox wrote:
I am looking for some ideas on how to create a JavaScript/CSS fly-out menu,
the dreaded day has come that a client finally insisted on using one!
...
var menu = new Object();
menu[ about_bdsrecruit ] = new Object();
Yikes! Don't generate a menu like that, it's a waste of time.
Markup:
ul
lia href=#Item 1/a/li
liItem 2
ul
liSubmenu item 1/li
liSubmenu item 2/li
liSubmenu item 3/li
/ul
/li
liItem 3/li
/ul
Make them all links if you like, I just omitted the a elements for
simplicity.
CSS:
li ul { display: none; }
li:hover ul { display: block; }
/* Plus whatever styles you want to make it look good and layout
correctly. */
JS:
Attach mouseover and mouseout event listeners to the li elements to show
and hide the sub menus.
Google for Pure CSS Menus, Suckerfish Dropdowns CSS/JS menus or
similar search terms.
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS or JavaScript flyout menu
Hi Taco,If you will do everything in _javascript_, then your menu will lost its semantic. Take a look how it is done on http://www.optuszoo.com.auThere is _javascript_ for delay, CSS for drop-downs and ulli for semantic. best regards,Dmitry
RE: [WSG] CSS or JavaScript flyout menu
I had a look at Suckerfish Dropdowns but it seems to go only one level deep,
I need several levels deep.
Kind regards,
Taco Fleur - CEO
Pacific Fox http://www.pacificfox.com.au an industry leader with commercial
IT experience since 1994 .
*
Web Design and Development
*
SMS Solutions, including developer API
*
Domain Registration, .COM for as low as fifteen dollars a year,
.COM.AU for fifty dollars two years!
*
BlackBerryR Business Solutions www.OzBlackBerry.com
*
We endorse PayPal, accept payments online now!
*
Seamless Merchant integration
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Lachlan Hunt
Sent: Wednesday, 11 January 2006 5:02 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS or JavaScript flyout menu
Taco Fleur - Pacific Fox wrote:
I am looking for some ideas on how to create a
JavaScript/CSS fly-out
menu, the dreaded day has come that a client finally
insisted on using one!
...
var menu = new Object();
menu[ about_bdsrecruit ] = new Object();
Yikes! Don't generate a menu like that, it's a waste of time.
Markup:
ul
lia href=#Item 1/a/li
liItem 2
ul
liSubmenu item 1/li
liSubmenu item 2/li
liSubmenu item 3/li
/ul
/li
liItem 3/li
/ul
Make them all links if you like, I just omitted the a
elements for simplicity.
CSS:
li ul { display: none; }
li:hover ul { display: block; }
/* Plus whatever styles you want to make it look good and
layout correctly. */
JS:
Attach mouseover and mouseout event listeners to the li
elements to show and hide the sub menus.
Google for Pure CSS Menus, Suckerfish Dropdowns CSS/JS
menus or similar search terms.
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
