E-mail List Archives

Thread: 'hamburger' menu

for

Number of posts in this thread: 3 (In chronological order)

From: Terzian, Sharon
Date: Thu, Mar 23 2017 3:48AM
Subject: 'hamburger' menu
No previous message | Next message →

Hi

I’m trying to fit everything requested and continue to be ADA compliant on our website, so this is a redesign in process….

I’ve now been asked to include the ‘hamburger’ icon/menu so when the main menu collapses on a smaller device, that’s what shows….



As it is, my main drop down menu I had to look long and hard for a script that would handle it and be ADA and acceptable looking to a committee and be reasonably customizable


From what I’m reading about the hamburger, it’s not ADA, and the samples I’ve seen also don’t seem to be able to work with the current method I’m using (once again, ADA compliant) to create my accordion menu.

If it's not compliant, it's not compliant, I'm finding I'm butting heads constantly with those who don't understand when something is not, it's not, so if that is the case, I need to see some 'official' stance on it not being compliant as

my research/pages I've seen is never good enough.



So here is the sample (work in progress again), this is a 'throw everything you have at it' page so people can see all the components they've requested in one place, not the final design


And if you know of a ‘hamburger’ menu that will work with this, please point me, thank you.

http://www.ric.edu/sherlockcenter/test/navi/navitablenavbarjs2.html#

Paul V. Sherlock Center on Disabilities<http://www.ric.edu/sherlockcenter/test/navi/navitablenavbarjs2.html#>;
www.ric.edu
Paul V. Sherlock Center on Disabilities



Sharon Terzian

Webmistress/Sherlock Center

Adjunct Professor/CIS/School of Management

Rhode Island College

www.sherlockcenter.org<;http://www.sherlockcenter.org/>;

From: Beranek, Nicholas
Date: Thu, Mar 23 2017 7:50AM
Subject: Re: 'hamburger' menu
← Previous message | Next message →

Hi Sharon,

You are referencing a classic "Menu Button". You can find more information about it in the WAI-ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

You can find a demo of it at the following link: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-1/menu-button-1.html

I hope this helps you!

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Terzian, Sharon
Sent: Thursday, March 23, 2017 5:49 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] 'hamburger' menu

Hi

I’m trying to fit everything requested and continue to be ADA compliant on our website, so this is a redesign in process….

I’ve now been asked to include the ‘hamburger’ icon/menu so when the main menu collapses on a smaller device, that’s what shows….



As it is, my main drop down menu I had to look long and hard for a script that would handle it and be ADA and acceptable looking to a committee and be reasonably customizable


From what I’m reading about the hamburger, it’s not ADA, and the samples I’ve seen also don’t seem to be able to work with the current method I’m using (once again, ADA compliant) to create my accordion menu.

If it's not compliant, it's not compliant, I'm finding I'm butting heads constantly with those who don't understand when something is not, it's not, so if that is the case, I need to see some 'official' stance on it not being compliant as

my research/pages I've seen is never good enough.



So here is the sample (work in progress again), this is a 'throw everything you have at it' page so people can see all the components they've requested in one place, not the final design


And if you know of a ‘hamburger’ menu that will work with this, please point me, thank you.

http://www.ric.edu/sherlockcenter/test/navi/navitablenavbarjs2.html#

Paul V. Sherlock Center on Disabilities<http://www.ric.edu/sherlockcenter/test/navi/navitablenavbarjs2.html#>;
www.ric.edu
Paul V. Sherlock Center on Disabilities



Sharon Terzian

Webmistress/Sherlock Center

Adjunct Professor/CIS/School of Management

Rhode Island College

www.sherlockcenter.org<;http://www.sherlockcenter.org/>;



The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Terzian, Sharon
Date: Thu, Mar 23 2017 8:08AM
Subject: Re: 'hamburger' menu
← Previous message | No next message

Hi Nick

Thanks, yes essentially, but I've already got that with my main menus, so I need something that will list those if the screen gets too small.....
And I'm very visual, so I need pretty much exact examples

I was working off this, but our menus drop down and down and down, most of this stuff seems to deal with compressing the menu with no drop downs afterwards (just the major headings)
http://blog.teamtreehouse.com/create-an-absolute-basic-mobile-css-responsive-navigation-menu


once again, if this cannot be done, I'm fine with it, as it is now, the page collapses pretty far down before it all goes wonky, I don't see the need to make something that isn't necessary that will not work with the code for things that I REALLY need

thanks
ST
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Thursday, March 23, 2017 9:50 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] 'hamburger' menu

Hi Sharon,

You are referencing a classic "Menu Button". You can find more information about it in the WAI-ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

You can find a demo of it at the following link: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-1/menu-button-1.html

I hope this helps you!

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Terzian, Sharon
Sent: Thursday, March 23, 2017 5:49 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] 'hamburger' menu

Hi

I’m trying to fit everything requested and continue to be ADA compliant on our website, so this is a redesign in process….

I’ve now been asked to include the ‘hamburger’ icon/menu so when the main menu collapses on a smaller device, that’s what shows….



As it is, my main drop down menu I had to look long and hard for a script that would handle it and be ADA and acceptable looking to a committee and be reasonably customizable


From what I’m reading about the hamburger, it’s not ADA, and the samples I’ve seen also don’t seem to be able to work with the current method I’m using (once again, ADA compliant) to create my accordion menu.

If it's not compliant, it's not compliant, I'm finding I'm butting heads constantly with those who don't understand when something is not, it's not, so if that is the case, I need to see some 'official' stance on it not being compliant as

my research/pages I've seen is never good enough.



So here is the sample (work in progress again), this is a 'throw everything you have at it' page so people can see all the components they've requested in one place, not the final design


And if you know of a ‘hamburger’ menu that will work with this, please point me, thank you.

http://www.ric.edu/sherlockcenter/test/navi/navitablenavbarjs2.html#

Paul V. Sherlock Center on Disabilities<http://www.ric.edu/sherlockcenter/test/navi/navitablenavbarjs2.html#>;
www.ric.edu
Paul V. Sherlock Center on Disabilities



Sharon Terzian

Webmistress/Sherlock Center

Adjunct Professor/CIS/School of Management

Rhode Island College

www.sherlockcenter.org<;http://www.sherlockcenter.org/>;



The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.