WordPress.org

Forums

Additional text to active menu item (6 posts)

  1. palermo303
    Member
    Posted 1 year ago #

    Hi,

    is there the possibility to add additional markup only to the current menu-item (wp_nav_menu) like in the example beneath?

    The classname "current-menu-item" is added by WP automatically. How could this work with the additonal span-Tag?

    <ul class="nav">
    <li class="menu-item"><a href="">ITEM 1</a></li>
    <li class="menu-item"><a href="">ITEM 2</a></li>
    <li class="menu-item current-menu-item><a href="">ITEM 3 <span class="invisible">now active-item</a></li>
    <li class="menu-item"><a href="">ITEM 4</a></li>
    </ul>

    This is an Web Accessibility thing. Therefore, DOM-Manipulating by JavaScript is no solution.

    Thank you

  2. Pioneer Web Design
    Member
    Posted 1 year ago #

    You could add the CSS:

    :before
    http://www.w3schools.com/cssref/sel_before.asp
    or
    :after
    http://www.w3schools.com/cssref/sel_after.asp

    to the style "current-menu-item" and style it:

    .current-menu-item:before {
    //add your CSS here
    }

    or

    .current-menu-item:after {
    //add your CSS here
    }
  3. palermo303
    Member
    Posted 1 year ago #

    Thank you for advice.
    I am sorry but I think it's not a good idea to use CSS generated content in this case. As far as I know screen readers will ignore these elements.

    Easy access is important here.
    Maybe there are other ideas?

  4. Pioneer Web Design
    Member
    Posted 1 year ago #

    This article has some good advise for assistive technology/screen readers and best practices. It is also very recent.

    https://www.ssbbartgroup.com/blog/2013/11/06/csscontentproperty/

    So, I stand corrected.

    It seems a good method is to use a span, but to force the text "offscreen" with CSS.

    HTML:

    <span class="offscreen">This is the item</span>

    (make sure to close all elements, in your example above it is not)

    CSS:

    .offscreen {text-indent: -10000px;}

    http://www.w3schools.com/cssref/pr_text_text-indent.asp

    That one style can be used throughout.

  5. palermo303
    Member
    Posted 1 year ago #

    you are right ... I just forgot the closing span-Element. And thank you for your tip with the the text-indent.

    But to be honest, the CSS-Part is not my problem. I don't know, how to generate the additional markup ...

    <li class="menu-item current-menu-item><a href="">ITEM 3 <span class="offscreen">now active-item</span></a></li>

  6. Pioneer Web Design
    Member
    Posted 1 year ago #

    Fortunately, WordPress has an accessibility group. Looks like they are taking a hard look at this.

    http://make.wordpress.org/accessibility/

    http://make.wordpress.org/accessibility/wp-accessibility-plugin/

Topic Closed

This topic has been closed to new replies.

About this Topic