Because the selectors were not specific enough, the styles of .opens-right set by the JS in case of an overflowing sub-menu was overwritten by the parent's .open-left styles.
Added visual tests to check for this. The tests include two cases: one for a right aligned dropdown using `.top-bar-right` (which was fixed earlier already) and one that is positioned right because of content (where this fix can be tested).
Also added anchors to the menu's links to check for correct behavior of the links, e.g. when using keyboard.
<li>
<a>Item 1</a>
<ul class="menu">
- <li><a href="#">Item 1A</a></li>
+ <li><a href="#Item-1A">Item 1A</a></li>
<li>
- <a href="#">Item 1B</a>
+ <a href="#Item-1B">Item 1B</a>
<ul class="menu">
- <li><a href="#">Item 1B i</a></li>
- <li><a href="#">Item 1B ii</a></li>
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
- <a href="#">Item 1B iii</a>
+ <a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
- <li><a href="#">Item 1B iii alpha</a></li>
- <li><a href="#">Item 1B iii omega</a></li>
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
- <a href="#">Item 1B iv</a>
+ <a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
- <li><a href="#">Item 1B iv alpha</a></li>
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
- <li><a href="#">Item 1C</a></li>
+ <li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
- <a href="#">Item 2</a>
+ <a href="#Item-2">Item 2</a>
<ul class="menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
- <li><a href="#">Item 3</a></li>
- <li><a href="#">Item 4</a></li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
</ul>
---
<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 300px;">
<li>
- <a href="#">Item 1</a>
- <ul class="menu">
- <li><a href="#">Item 1A Loooong</a></li>
- <li><a href="#">Item 1B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 3</a>
- <ul class="menu">
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 1</a>
+ <a>Item 1</a>
<ul class="menu">
- <li><a href="#">Item 1A Loooong</a></li>
+ <li><a href="#Item-1A">Item 1A</a></li>
<li>
- <a href="#"> Item 1 sub</a>
+ <a href="#Item-1B">Item 1B</a>
<ul class="menu">
- <li><a href="#">Item 1 subA</a></li>
- <li><a href="#">Item 1 subB</a></li>
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
- <a href="#"> Item 1 sub</a>
+ <a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
- <li><a href="#">Item 1 subA</a></li>
- <li><a href="#">Item 1 subB</a></li>
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
- <a href="#"> Item 1 sub</a>
+ <a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
- <li><a href="#">Item 1 subA</a></li>
- <li><a href="#">Item 1 subB</a></li>
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
- <li><a href="#">Item 1B</a></li>
+ <li><a href="#Item-1C">Item 1C</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
</ul>
---
}
&.opens-left {
- .is-dropdown-submenu {
+ > .is-dropdown-submenu {
left: auto;
right: 100%;
}
}
&.opens-right {
- .is-dropdown-submenu {
+ > .is-dropdown-submenu {
right: auto;
left: 100%;
}
margin-top: -2px;
}
- &.opens-inner .is-dropdown-submenu {
+ &.opens-inner > .is-dropdown-submenu {
top: 100%;
}
- &.opens-left .is-dropdown-submenu {
+ &.opens-left > .is-dropdown-submenu {
left: auto;
right: 100%;
}
// [TODO] Cut back specificity
// scss-lint:disable SelectorDepth
- &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
+ //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
&.js-dropdown-active {
display: block;
}
--- /dev/null
+<html>
+
+<head>
+ <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+
+ <style>
+
+
+ </style>
+</head>
+
+<body>
+
+ <h1>Dropdown Menu: Right aligned</h1>
+ <p>This dropdown menu is aligned right using <code>.top-bar-right</code> class.</p>
+ <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
+ <button class="menu-icon" type="button" data-toggle></button>
+ <div class="title-bar-title">Menu</div>
+ </div>
+
+ <div class="top-bar" id="main-menu">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text"><strong>Site Title</strong></li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+ <li>
+ <a>Item 1</a>
+ <ul class="menu">
+ <li><a href="#Item-1A">Item 1A</a></li>
+ <li>
+ <a href="#Item-1B">Item 1B</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
+ <li>
+ <a href="#Item-1Biii">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-1Biv">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#Item-1C">Item 1C</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ <p>This dropdown menu is positioned right just by the content before it.</p>
+ <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
+ <button class="menu-icon" type="button" data-toggle></button>
+ <div class="title-bar-title">Menu</div>
+ </div>
+
+ <div class="top-bar" id="main-menu">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text"><strong>Site Title</strong></li>
+ <li class="menu-text">Some long text to push the menu.</li>
+ <li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
+ </ul>
+ </div>
+ <div class="">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+ <li>
+ <a>Item 1</a>
+ <ul class="menu">
+ <li><a href="#Item-1A">Item 1A</a></li>
+ <li>
+ <a href="#Item-1B">Item 1B</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
+ <li>
+ <a href="#Item-1Biii">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-1Biv">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#Item-1C">Item 1C</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+</body>
+</html>