E-mail List Archives
Thread: Vertical fly out menus with image replacement.
Number of posts in this thread: 2 (In chronological order)
From: Wayne Turner
Date: Fri, Apr 05 2013 12:54PM
Subject: Vertical fly out menus with image replacement.
No previous message | Next message →
I am updating the navigation for the ADA services site at
isu.edu/ada4isuand it has been requested that I replace the existing
text-based links with
graphical buttons with large print.
The menu would stay as it is for screen readers, but the idea is to have
easier navigation to read for the sight impaired without having to zoom in
on the page.
The powers that be want the vertical navigation on the side, so a drop
down menu isn't an option.
Does anybody know of a CSS or JavaScript solution for this? Most image
replacement scripts I find will only work for top level links, but not
nested menus.
From: Warden, Michael
Date: Fri, Apr 05 2013 2:15PM
Subject: Re: Vertical fly out menus with image replacement.
← Previous message | No next message
Is there a need to do it fully with graphics? The easiest way to do it would be to create a graphical backgrounds for the different levels of the menu (or a single background for all menu levels) and then increase the font-size, font-weight, etc. of the text in the links.
In looking at the source for the menu you should have sufficient classes in-place already to use as targets,
.navlinks li
{
background-image: url(***background graphic***);
}
.navlinks li a
{
font-size:1.5em;
}
.navlinks li .toggle li
{
background-image: url(***submenu background graphic***);
}
Just a thought.
>I am updating the navigation for the ADA services site at
>isu.edu/ada4isuand it has been requested that I replace the existing
>text-based links with
>graphical buttons with large print.
>
>The menu would stay as it is for screen readers, but the idea is to have
>easier navigation to read for the sight impaired without having to zoom in
>on the page.
>
>The powers that be want the vertical navigation on the side, so a drop
>down menu isn't an option.
>
>Does anybody know of a CSS or JavaScript solution for this? Most image
>replacement scripts I find will only work for top level links, but not
>nested menus.
Email Disclaimer: http://marincounty.org/nav/misc/EmailDisclaimer.cfm