Chris.B Chris.B - 23 days ago 9
HTML Question

Dropdown in nav bar not working - items in dropdown all link to the same thing (UIKit framework)

What I would like to happen: The first three list items in the nav bar should correspond to the first three content items in the content area. The three list items in the dropdown should correspond to the remaining three content items. Hovering over the dropdown icon should display the list but the dropdown icon shouldn't link to anywhere.

What's actually happening: The first three list items work properly and link to the first three content items. The dropdown box animates properly, but the items in it all link to the 4th content item. Clicking the dropdown box's icon also links to the 4th item.

Here is the code (A lot of the code is generated, so I grabbed the code from FireBug, which is why the "uk-active" classes and "aria-hidden" attributes are there):

<nav class="uk-navbar">
<ul class="uk-navbar-nav" data-uk-switcher="{connect:'#content-area'}">
<li class="uk-active" aria-expanded="true">
<a href="">Dashboard</a>
</li>
<li aria-expanded="false">
<a href="">Summary</a>
</li>
<li aria-expanded="false">
<a href="">Details</a>
</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown="" aria-expanded="false" aria-haspopup="true">
<a href="">
<i class="uk-icon-cog"></i>
</a>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" aria-hidden="true" style="top: 40px; left: 0px;" tabindex="">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li>
<a href="">Upgrade</a>
</li>
<li>
<a href="">Configure</a>
</li>
<li>
<a href="">Settings</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>

<ul id="content-area" class="uk-switcher">
<li id="content-dashboard" class="parent.uk-container uk-container-center uk-active" aria-hidden="false">...</li>
<li id="content-summary" aria-hidden="true">...</li>
<li id="content-details" aria-hidden="true">...</li>
<li id="content-upgrade" aria-hidden="true">...</li>
<li id="content-config" aria-hidden="true">...</li>
<li id="content-settings" aria-hidden="true">...</li>
</ul>


Basically, the "on click" event handler for the 4th content item is getting added to the "settings-btn-container" list item and no event handlers are getting added to the list items under the dropdown. I can't figure out how to get the event handlers to bind to the dropdown list items instead.

Answer

Try being more explicit to the UIkit Switcher component about what constitutes a "toggle".

In the snippet below, I've used these settings:

{
    connect: '#content-area',
    toggle: '.toggle-link'
}

The default value for toggle, in the UIkit Switcher component is >*, which you'll probably recognize as a selector for "the first immediate child element of any type". Since the links in your dropdown are not immediate descendants, no Switcher events were fired when they were clicked.

By broadening the "toggle" definition to all .toggle-link elements in the switcher, each of your links gets mapped to the corresponding <li> in the #content-area element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css'>

<nav class="uk-navbar">
    <ul id="switcher-menu" class="uk-navbar-nav" data-uk-switcher="{connect: '#content-area', toggle: '.toggle-link'}">
        <li class="uk-active toggle-link"><a href="">Dashboard</a></li>
        <li class="toggle-link"><a href="">Summary</a></li>
        <li class="toggle-link"><a href="">Details</a></li>
        <li id="settings-btn-container" class="uk-parent" data-uk-dropdown>
            <a href=""><i class="uk-icon-cog"></i></a>
            <div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
                <ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
                    <li class="toggle-link"><a href="">Upgrade</a></li>
                    <li class="toggle-link"><a href="">Configure</a></li>
                    <li class="toggle-link"><a href="">Settings</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

<div class="uk-container uk-container-center">
    <ul id="content-area" class="uk-switcher">
        <li class="uk-active">... (Dashboard)</li>
        <li>... (Content Summary)</li>
        <li>... (Content Details)</li>
        <li>... (Content Upgrade)</li>
        <li>... (Content Config)</li>
        <li>... (Content Settings)</li>
    </ul>
</div>