Suggestion: Pure CSS Dropdown

[green3g]

What do you think about adding a pure-css dropdown component? This component example is toggled using the :focus selector.

css

.dropdown-menu {
    display: none;
    position: absolute;
}
a.dropdown-toggle:focus,
a.dropdown-toggle:active {
    background: #f2f2f2;
}
a.dropdown-toggle:focus+.dropdown-menu,
a.dropdown-toggle:active+.dropdown-menu {
    display: block;
}
.dropdown-menu:hover {
    display: block;
}

example:

    <div class="dropdown float-left">
        <a href="#" onclick="javascript:return false;" class="btn btn-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">Dropdown Menu
          <i class="caret fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu menu">
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-fw fa-map-marker"></i> Dropdown Item 1</a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-fw fa-map-marker"></i> Dropdown Item 2</a>
                </li>
                <li class="menu-item">
                    <a href="#">
                        <i class="fa fa-fw fa-map-marker"></i> Dropdown Item 3</a>
                </li>
        </ul>
    </div>

It looks something like this:

[scriptsdemostack]

looks really nice 👍

[picturepan2]

@roemhildtg Thanks, I will consider this component with pure CSS.

[picturepan2]

@roemhildtg I tried pure CSS dropdown menu. But the toggle button with :focus is not supported in Firefox and Safari in macOS. Though it can be workable with a hidden radio solution, it is not a best practice.

[green3g]

@picturepan2 I figured there would be a catch 😉

[picturepan2]

@roemhildtg It works when I add tabindex to the button elements.

[green3g]

👍 thanks for the update, good to know!

[picturepan2]

@roemhildtg Spectre.css now provides pure CSS dropdown menu. https://picturepan2.github.io/spectre/#dropdowns

[green3g]

That is awesome! 👍