Menu icon Foundation
Top Bar Dropdown item click does not hide dropdown

Hi,

Interesting little problem here - I am using the Top Bar with a dropdown menu, one of the menu items triggers a modal dialog. However, the dropdown is still visible after the modal is presented, until the mouse is moved away from the dropdown area.

Does anyone have any idea how to hide the dropdown when the menu item is clicked - I've tried a number of different approaches, but so far anything that manages to hide the dropdown also results in the dropdown not appearing next time I hover over the parent menu item.

Thanks
Ben

Foundation floating dropdown

  <div class="row">
    <div class="large-12 medium-12 columns contain-to-grid">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Title</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li class="has-dropdown"><a href="#">ben.owen</a>
                            <ul class="dropdown">
                                <li><a data-reveal-ajax="true" data-reveal-id="changePasswordModal" href="/Users/Manage">Change Password</a></li>
                                <li><a href="Users/Logoff">Log off</a></li>
                            </ul>
                        </li>
                </ul>
            </section>
        </nav>
    </div>
</div>

<div class="tiny reveal-modal" data-reveal="" id="changePasswordModal">
  <a class="close-reveal-modal">&#215;</a>
</div>

topbardropdownmenumodalreveal

Hi,

Interesting little problem here - I am using the Top Bar with a dropdown menu, one of the menu items triggers a modal dialog. However, the dropdown is still visible after the modal is presented, until the mouse is moved away from the dropdown area.

Does anyone have any idea how to hide the dropdown when the menu item is clicked - I've tried a number of different approaches, but so far anything that manages to hide the dropdown also results in the dropdown not appearing next time I hover over the parent menu item.

Thanks
Ben

Foundation floating dropdown

  <div class="row">
    <div class="large-12 medium-12 columns contain-to-grid">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Title</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li class="has-dropdown"><a href="#">ben.owen</a>
                            <ul class="dropdown">
                                <li><a data-reveal-ajax="true" data-reveal-id="changePasswordModal" href="/Users/Manage">Change Password</a></li>
                                <li><a href="Users/Logoff">Log off</a></li>
                            </ul>
                        </li>
                </ul>
            </section>
        </nav>
    </div>
</div>

<div class="tiny reveal-modal" data-reveal="" id="changePasswordModal">
  <a class="close-reveal-modal">&#215;</a>
</div>
Rafi Benkual over 5 years ago

From your example we made a codepen http://cdpn.io/gtevE. It looks like the background of the Reveal modal is behind the dropdown. If you move it up using z-index then the hover state will not have focus and will close.

Ben Owen over 5 years ago

Hi Rafi

Thanks for the quick response!

I applied the following style rule and everything is fine now:

.top-bar-section .dropdown {
z-index: 97; /* the z-index of the modal background is 98) */
}

Thanks again,
Ben