Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    65
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Peterneds hover menu in screenreaders

    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
    Last edited by helenp; 02-03-2012 at 08:39 PM.

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    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?

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    65
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dylanbaumannn View Post
    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

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    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 ).

    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?

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    65
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dylanbaumannn View Post
    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 ).

    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.

    Code:
    <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">


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •