Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Feb 2018
    Posts
    15
    Member #
    58467

    Aria issues with navigation menu bar

    I have a menu bar but
    It seems like I had the functionalilty wrong, according to this page https://www.w3.org/TR/wai-aria-pract...menubar-1.html

    the menu bar should open with the down arrows, and navigate via up and down keys, to go to the next tab you should be pressing left or right not TAB, tab should get out of the menu itself and on to the content... how can i do this with the given code i have above. thank you
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--Author URL: https://codepen.io/andornagy/pen/RNeydj
    Description: A Generic Hierarchical Menu Navigation
    Version: 1-->
        <style>
            /* CSS Document */
            body {
                background: #212121;
                font-size: 22px;
                line-height: 32px;
                color: #ffffff;
                margin: 0;
                padding: 0;
                word-wrap: break-word !important;
                font-family: 'Open Sans', sans-serif;
    
    
    
            height: 100vh;
            /*100% of the viewport*/
            display: flex;
            flex-direction: column;
        }
    
        main#content {
            flex: 1;
            overflow-y: scroll;
        }
    
        h1 {
            font-size: 60px;
            text-align: center;
            color: #FFF;
        }
    
        h3 {
            font-size: 30px;
            line-height: 34px;
            text-align: center;
            color: #FFF;
        }
    
        h3 a {
            color: #FFF;
        }
    
        ul {
            list-style-type: none;
        }
    
        nav>ul {
            display: flex;
        }
    
        nav>ul>li {
            position: relative;
        }
    
        nav>ul>li>ul {
            padding: 0;
            top: 100%;
            left: 0;
            position: absolute;
        }
    
        input:checked~ul {
            display: block;
        }
    
        button::after {
            content: '\25bc';
        }
    
        li:focus-within>button::after {
            content: '\25b2';
        }
    
        a {
            color: #FFF;
        }
    
        h1 {
            margin-top: 100px;
            text-align: center;
            font-size: 60px;
            line-height: 70px;
            font-family: 'Bree Serif', 'serif';
        }
    
        #container {
            margin: 0 auto;
            max-width: 890px;
        }
    
        p {
            text-align: center;
        }
    
        /* Giving a background-color to the nav container. */
        nav {
            margin: 0;
            padding: 0;
            background-color: #E64A19;
        }
    
        #logo {
            display: block;
            padding: 0 30px;
            float: left;
            font-size: 20px;
            line-height: 60px;
        }
    
        /* Since we'll have the "ul li" "float:left"
     * we need to add a clear after the container. */
    
    nav:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Removing padding, margin and "list-style" from the "ul",
     * and adding "position:reltive" */
            nav ul {
                float: right;
                padding: 0;
                margin: 0;
                list-style: none;
                position: relative;
            }
    
    /* Positioning the navigation items inline */
    nav ul li {
        margin: 0px;
        display: inline-block;
        float: left;
    }
    
    nav button {
        border: none;
        height: 100%;
    }
    
    /* Styling the links */
    nav a,
    nav button {
        display: block;
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
        text-decoration: none;
        background-color: #E64A19;
    }
    
    nav ul li ul li:hover {
        background: #000000;
    }
    
    /* Background color change on Hover */
    nav a:hover,
    nav button:hover {
        background-color: #000000;
        text-decoration: underline;
    
    }
    
    input#drop {
        display: none;
    }
    
    /* Hide Dropdowns by Default
     * and giving it a position of absolute */
            nav ul ul {
                display: none;
                position: absolute;
                /* has to be the same number as the "line-height" of "nav a" */
                top: 60px;
            }
    
    /* Display Dropdowns on focus */
    nav ul li:focus>ul {
        display: inherit;
    }
    
    /* Fisrt Tier Dropdown */
    nav ul ul li {
        width: 170px;
        float: none;
        display: list-item;
        position: relative;
    }
    
    /* Second, Third and more Tiers	
     * We move the 2nd and 3rd etc tier dropdowns to the left
     * by the amount of the width of the first tier.
    */
            nav ul ul ul li {
                position: relative;
                top: -60px;
                /* has to be the same number as the "width" of "nav ul ul li" */
                left: 170px;
            }
    
    
        /* Making dropdowns tabbable */
        li ul {
            display: none;
        }
    
        li:focus-within ul {
            display: block;
        }
    
        /* hamburger icon */
        label.hamburger {
            position: relative;
            display: none;
            height: 50px;
            width: 75px;
        }
    
        .line {
            position: absolute;
            left: 10px;
            height: 4px;
            width: 55px;
            background: #fff;
            border-radius: 2px;
            display: block;
            transition: 0.5s;
            transform-origin: center;
        }
    
        .line:nth-child(1) {
            top: 12px;
        }
    
        .line:nth-child(2) {
            top: 24px;
        }
    
        .line:nth-child(3) {
            top: 36px;
        }
    
        input#drop:checked~label.hamburger .line:nth-child(1) {
            transform: translateY(12px) rotate(-45deg);
        }
    
        input#drop:checked+label.hamburger .line:nth-child(2) {
            opacity: 0;
        }
    
        input#drop:checked+label.hamburger .line:nth-child(3) {
            transform: translateY(-12px) rotate(45deg);
        }
    
        /* Media Queries
    --------------------------------------------- */
    
        @media all and (max-width : 768px) {
    
            #logo {
                display: block;
                padding: 0;
                width: 100%;
                text-align: center;
                float: none;
            }
    
            nav>ul {
                display: none;
            }
    
            nav>ul>li>ul {
                position: static;
            }
    
            /* Styling the toggle lable */
            .toggle {
                display: block;
                height: 50px;
                background-color: #E64A19;
                /* padding: 14px 20px; */
                color: #FFF;
                font-size: 17px;
                text-decoration: none;
                border: none;
            }
    
            /* Display Dropdown when clicked on Parent Lable */
            input#drop:checked~ul {
                display: flex;
                flex-direction: column;
            }
    
            nav ul {
                float: none;
            }
    
            nav ul ul {
                margin-left: 1em;
            }
    
            label.hamburger {
                display: block;
            }
    
        }
    
    
    
        @media all and (max-width : 330px) {
    
            nav ul li {
                display: none;
                width: 94%;
            }
    
        }
    </style>
    <title>Menu Navigation Test</title>
    </head>
    
    <body>
        <header>
            <nav>
               <div role="tablist" aria-label="Menu" id="logo">Syracuse University Libraries</div>
            <input type="checkbox" id="drop" />
            <label for="drop" class="hamburger" tabindex="1">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </label>
            <ul class="menu">
                <li><a href="">Home</a></li>
                <li>
                    <!-- First Drop Down -->
                    <button role="tab" aria-selected="true" aria-controls="about-tab" id="about">About</button>
                    <ul>
                       <div tabindex="0" role="tabpanel" id="about-tab" aria-labelledby="about"> <li><a href="#">Departments</a></li> </div>
                       <div tabindex="0" role="tabpanel" id="about-tab" aria-labelledby="about"> <li><a href="#">News</a></li> </div>
                    </ul>
    
                </li>
                <li>
                    <!-- First Drop Down -->
                   <button role="tab" aria-selected="false" aria-controls="rooms-tab" id="rooms">Rooms</button>
                    <ul>
                        <div tabindex="0" role="tabpanel" id="rooms-tab" aria-labelledby="rooms"> <li><a href="#">Resources</a></li></div>
                        <div tabindex="0" role="tabpanel" id="rooms-tab" aria-labelledby="rooms"> <li><a href="#">Links</a></li></div>
                    </ul>
                </li>
                <li><a href="">Special Collections</a></li>
                <li><a href="">Giving</a></li>
                <li><a href="">More</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Sample Text -->
    <main class="scroll" id="content">
        <h1>
            <p>This is a Generic Hierarchical Menu Navigation.</p>
        </h1>
        <p>This is a sticky Hierarchical Menu Navigation. It contains a dropdown functionality when clicked on. <br>When tabbing through it the dropdown menu opens on focus. <br>When minimized it turns in to a animated hamburger menu.</p>
    
    </main>
    <nav>
        <footer>
    
            Copyright  2020 Syracuse University Libraries
        </footer>
    </nav>
    <!-- Core Javascript Bottom -->
    <script src="/assets/plugins/jquery-1.12.3.min.js" type="text/javascript"></script>
    <script src="/assets/plugins/back-to-top.js" type="text/javascript"></script>
    </body>
    
    
    </html>

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2020
    Posts
    1
    Member #
    61387
    Hi,
    Sorry bit i dont understand.
    Can you send pictures and explain exactly what you would like to do.

    Thanks
    Raffaele

    Inviato dal mio A10QI18G utilizzando Tapatalk

  4. #3
    Junior Member
    Join Date
    Feb 2018
    Posts
    15
    Member #
    58467
    I wanto be able to tab through my menu via arrow keys please see example
    https://www.w3.org/TR/wai-aria-pract...menubar-1.html

  5. #4
    Junior Member
    Join Date
    Feb 2018
    Posts
    15
    Member #
    58467
    Quote Originally Posted by soupii View Post
    I wanto be able to tab through my menu via arrow keys please see example
    https://www.w3.org/TR/wai-aria-pract...menubar-1.html
    anyone have any suggestions please


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com