...

View Full Version : Peterneds hover menu in screenreaders



helenp
02-03-2012, 08:31 PM
Hi,
I have Peterneds whatever hover menu, as for those date is not familiar with it
is a 100% css menu wich as the name says use hover to display the menu.
Well I dont know javascript and I dont like to use it if not necesarry.
Is it possible to add to the css an onclick for those that dont support hover
as touch screens (the title is wrong did not mean tochscreens, cant edit :( )?
I mean have 2 styles in the style sheet,
if so how can it be done?

This is where the hover is in the css:

#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;}
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;}

Thanks, in advance

dylanbaumannn
02-03-2012, 08:57 PM
Just to clarify, you've created a menu that functions by using the hover feature.
So is the issue:

A. You're worried that screen-readers won't be able to see them?
or
B. You're worried that touch-screen computers wont' be able to access them?

helenp
02-03-2012, 09:28 PM
Just to clarify, you've created a menu that functions by using the hover feature.
So is the issue:

A. You're worried that screen-readers won't be able to see them?
or
B. You're worried that touch-screen computers wont' be able to access them?

To be honest dont know how screen-readers work,
but the title is wrong, I meant touch-screens, such as smartphones, tablets etc arenīt able to access.

Thanks

dylanbaumannn
02-03-2012, 09:39 PM
hmmmm the best way to go about that would most likely be to add an anchor tag around your LI's so that if somebody clicked your list item it would also act the same as if somebody was hovering over it (since you have to hover over something in order to click it :p ).

Since you have anchors already in the li's you'll have to create a class to apply to them so that you can still have both the Hover state as well as the Click state.

I was attempting to style the css for you, but i'm not really sure how your HTML is structured or how this hover menu works exactly. Could you provide the HTML where your hover list is located at?

helenp
02-03-2012, 09:48 PM
hmmmm the best way to go about that would most likely be to add an anchor tag around your LI's so that if somebody clicked your list item it would also act the same as if somebody was hovering over it (since you have to hover over something in order to click it :p ).

Since you have anchors already in the li's you'll have to create a class to apply to them so that you can still have both the Hover state as well as the Click state.

I was attempting to style the css for you, but i'm not really sure how your HTML is structured or how this hover menu works exactly. Could you provide the HTML where your hover list is located at?

Thanks, not to paste the whole menu, this is the beginning, the rest is equal,
as you can see all have only one level with lis without links that are hovered, however there is one that have 2 levels of lis without links.
I been trying using an empy link with # however dont make it work.


<ul>
<li><p>Home<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li><a class="nivel1" href="index.htm">Homepage</a></li>
</ul>
</li>
</ul>
<ul>
<li><p>About Us<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li class="level4"><a href="guestbook_2011.htm">Holiday makers comments and tips</a></li>
<li class="level4"><a href="about_us.htm">About Us</a></li>
<li class="level4"><a href="pacos_pros.htm">Pacos Pros, maintenance company</a></li>
</ul>
</li>
</ul>
<ul>
<li><p>Properties<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li class="level2">Marbella Town Center<img src="new_arrow.gif" alt="Arrow right" border="0">
<ul>
<li class="level3"><a href="banana_beach_beachfront_apartment_marbella.htm">Banana Beach (4-6 persons) 7 apartments 4*</a></li>
<li class="level3"><a href="costa_nagueles2_apartment_marbella.htm">Costa Nagueles 2 (4 persons) apartment 4*</a></li>
<li class="level3"><a href="hacienda_nagueles_apartments_marbella.htm">Hacienda Nagueles (4 persons) 2 apartments 4*</a></li>
<li class="level3"><a href="la_zambomba_beachfront_apartment_marbella_centre.htm">La Zambomba 2 (4 persons) apartment 4*</a></li>
<li class="level3"><a href="marbelcenter_1_apartment_centre_marbella.htm">Marbelcentre 1 (4 persons) apartment 4*</a> </li>
<li class="level3"><a href="marbella_del_mar_apartments_marbella.htm">Marbella del Mar (4-6 persons) 3 apartments 4*</a></li>
<li class="level3"><a href="SolMarbella6_apartment_marbella_centre.htm">Sol Marbella 6 (4 persons) apartment 4*</a></li>
<li class="level3"><a href="solymar2_apartment_marbella_centre.htm">Solymar 2 (4 persons) apartment 5*</a></li>
<li class="level3"><a href="las_canas_beach_beachfront_apartments_marbella.htm">Las Caņas Beach (4-6 persons) 2 apartments 5*</a></li>
<li class="level3"><a href="casa_blanca_4_villa_marbella.htm">Casa Blanca 4 (10 persons) villa 5*</a></li>
</ul>
</li>
<li class="level2">Marbella<img src="new_arrow.gif" alt="Arrow right" border="0">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum