Image Specifications Style Guide Menu

2022 3rd Party Header Markup

Browser View

Markup for 2022 3rd Party Header

<!--Begin 3rd Party Menu Markup 2022-->
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="https://cluballiance.aaa.com/css/third-party-header-redesign.css">
<div id="aaa-third-party-header" class="header-wrap">
    <header id="desktop-menu-main" class="mega-nav mega-nav--mobile mega-nav--desktop@md position-relative js-mega-nav">
        <div class="mega-nav__container">
            <a href="https://cluballiance.aaa.com/" class="mega-nav__logo" aria-label="Cluballince Logo">
                <img src="https://cluballiance.aaa.com/img/menu-icons/aaa-logo.svg" alt="cluballiance logo">
            </a>
            <button class="hamburger hamburger--3dx btn-open first show-tablet" type="button">
                <span class="hide-mobile bold" aria-haspopup="true" aria-controls="mobile menu">Menu</span>
                <span class="hide-desktop hamburger-box">
                    <span class="hamburger-inner"></span>
                    <span class="visuallyhidden">menu button</span>
                </span>
            </button>
            <div class="mega-nav__nav js-mega-nav__nav" id="mega-nav-navigation" role="navigation"
                 aria-label="Main">
                <nav class="mega-nav__nav-inner" aria-label="main menu">
                    <ul class="mega-nav__items show-desktop" role="menubar">
                        <li class="mega-nav__label">Menu</li>
                        <!-- Auto -->
                        <li class="mega-nav__item js-mega-nav__item">
                            <a href="https://cluballiance.aaa.com/automotive" class="reset mega-nav__control js-mega-nav__control js-tab-focus">
                                <span>Auto</span>
                            </a>
                        </li>
                        <!-- Insurance -->
                        <li class="mega-nav__item js-mega-nav__item">
                            <a href="https://cluballiance.aaa.com/insurance" class="reset mega-nav__control js-mega-nav__control js-tab-focus">
                                <span>Insurance</span>
                            </a>
                        </li>
                        <!-- Money -->
                        <li class="mega-nav__item js-mega-nav__item">
                            <a href="https://cluballiance.aaa.com/money" class="reset mega-nav__control js-mega-nav__control js-tab-focus">
                                <span>Money</span>
                            </a>
                        </li>
                        <!-- Shop -->
                        <li class="mega-nav__item js-mega-nav__item">
                            <a href="https://shop.cluballiance.aaa.com/" class="reset mega-nav__control js-mega-nav__control js-tab-focus">
                                <span>Shop</span>
                            </a>
                        </li>
                        <!-- Travel -->
                        <li class="mega-nav__item js-mega-nav__item">
                            <a href="https://cluballiance.aaa.com/travel" class="reset mega-nav__control js-mega-nav__control js-tab-focus">
                                <span>Travel</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div class="overlay"></div>
    <div id="mobile-menu-main" class="zeynep first third-party-mobile-menu" aria-labelledby="mobile menu">
        <div class="wrap"
             style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem;">
            <a href="#" class="mobile-mm-logo"><img src="https://cluballiance.aaa.com/img/menu-icons/aaa-logo.svg" alt="cluballiance logo"></a>
            <button class="zeynep-close" aria-label="close">
                <span>close</span>
            </button>
        </div>
        <ul class="mobile-link-list">
            <li>
                <a href="https://cluballiance.aaa.com/automotive">Auto</a>
            </li>
            <li>
                <a href="https://cluballiance.aaa.com/insurance">Insurance</a>
            </li>
            <li>
                <a href="https://cluballiance.aaa.com/money">Money</a>
            </li>
            <li>
                <a href="https://shop.cluballiance.aaa.com/">Shop</a>
            </li>
            <li>
                <a href="https://cluballiance.aaa.com/travel" data-submenu="travel">Travel</a>
            </li>
            <li>
                <a href="https://cluballiance.aaa.com/the-extra-mile" data-submenu="tem">The Extra Mile</a>
            </li>
        </ul>
    </div>
</div>

<script src="https://cluballiance.aaa.com/scripts/jquery-3.6.0.min.js"></script>
<script src="https://cluballiance.aaa.com/js/aaa-third-party-header-menu.js"></script>
<!--End 3rd Party Menu Markup 2022-->