Reading Requirement

Before I begin, please first read the tutorial from CSS-Tricks to understand the initial concept: Convert a Menu to a Dropdown for Small Screens

The HTML

Here is the simplified HTML I use for the navigation:

<ul id="list-products">
<li class="category"><h3>Cable Management</h3></li>
<li><a href="/products/sumo/">Sumo</a></li>
<li><a href="/products/cableboxmini/">CableBox Mini</a></li>
<li><a href="/products/cableclip/" >CableClip</a></li>
<li><a href="/products/cabledrop/">CableDrop</a></li>
<li><a href="/products/cablebox/">CableBox</a></li>
<li><a href="/products/cableyoyo/">Cableyoyo</a></li>
<li class="category"><h3>Stands</h3></li>
<li><a href="/products/mika/">Mika</a></li>
<li><a href="/products/milo/">Milo</a></li>
<li><a href="/products/nest/">Nest</a></li>
<li><a href="/products/notebookkit/">Notebook Kit</a></li>
<li><a href="/products/coolfeet/">Cool Feet</a></li>
<li class="category"><h3>Chargers</h3></li>
<li><a href="/products/minidock/">MiniDock</a></li>
<li><a href="/products/refresh/">Refresh</a></li>
<li><a href="/products/extraconnectors/">Extra Connectors</a></li>
<li><a href="/products/thesanctuary/">The Sanctuary</a></li>
</ul>

I use class=”category”  and <h3></h3>  for list items that are categories. Since we do not have a category page, the list items do not have a link.

jQuery

The fun part was to modify the original code to only create dropdown options from list items with class="category" and then list the following option with the URL as value until it finds the next category title.
Another code I added was to validate when changed if it has a (URL) value, otherwise it will not change the page.

// Create the dropdown base
$("<select />").appendTo(".productlist ");

// Create default option "Products."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Products"
}).appendTo(".productlist select");

// Populate dropdown with menu items
$(".productlist .category").each(function() { // List category titles
var el = $(this);
$("<option />", {
"text" : el.text(),
"class" : "category" // Add class to the menu item
}).appendTo(".productlist select");
// Look for next items until there it finds another category title
$(this).nextUntil(".productlist .category").each(function() {
var li = $('a', this);
$("<option />", {
"value" : li.attr("href"),
"text" : '- '+li.text()
}).appendTo(".productlist select");
});
});

Done. For real-life example, you can view it on Bluelounge product page.

The post Responsive Multi-level Menu to Dropdown appeared first on Michael Sunarlim.

Unfortunately it is not the end of the challenge. From jQuery Waypoint’s example and other tutorials I found, they only show how to apply it when you have horizontal elements. In my case, I wanted to use it for Bluelounge’s products menu which has vertical orientation and quite long. The way sticky menu works is by changing the CSS position from relative to fixed and our menu’s height is 854px. This means if the viewport is less than that, the bottom area of the menu will not be viewable at all.

View from smaller screen

The idea was to keep the “default behavior” when scrolling past the assigned waypoint but then change the CSS position value when it is near the end of the page, before the footer. With this approach, visitors can scroll through the bottom of the page and see the rest of the menu. Note that our product pages are mostly not too long, so this solution could still be considered. If you have very long pages, then I would not recommend it because your users will have to scroll a lot before they can see the rest of the menu.

When reaching the bottom of the page.

So, how to achieve this? We need to create two waypoints: one at the start of the content (after header) and one at the end of the content (before footer).

The Codes

Here is the simplified version of page HTML structure:

[syntax_prettify linenums=”linenums”]
<div class="wrapper" id="products">
<div class="container_16">
<div class="header">
<!– Header Content –>
</div>
<div class="pagecontent sidebar">
<div class="grid productlist"> <!– wrapper for menu –>
<!– start: Product Menu –>
<ul id="list-products">
<li class="category"><h3>Cable Management</h3></li>
<li class="cable-management"><a href="/products/sumo/" title="Sumo: A Heavyweight for small cables"><span>Sumo</span></a></li>
<li class="cable-management"><a href="/products/cableboxmini/" title="CableBox Mini: Liven up your space"><span>CableBox Mini</span></a></li>
<li class="cable-management"><a href="/products/cableclip/" title="CableClip: Sleek, minimalist design solution for managing cables of all sizes"><span>CableClip</span></a></li>
<li class="category"><h3>Desks</h3></li>
<li class="desks"><a href="/products/studiodesk/" title="StudioDesk: A traditional workspace with a modern twist"><span>StudioDesk</span></a></li>
</ul>
<!– end: Product Menu –>
<div class="clear"></div>
</div>
<div class="grid details">
<!– Page Content –>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="footer">
<!– Footer Content –>
</div>
[/syntax_prettify]

And here is the JS code:

[syntax_prettify linenums=”linenums”]
$(‘.productlist’).waypoint({
handler: function(direction) {
$(‘#list-products’).toggleClass(‘sticky-top’); //change position to fixed by adding ‘sticky-top’ class
}
});
$(‘.footer’).waypoint({
offset: $(‘#list-products’).height()+20, //calculate menu’s height and margin before footer
handler: function(direction) {
$(‘#list-products’).toggleClass(‘sticky-top’); //remove ‘sticky-top’ class
$(‘.productlist’).toggleClass(‘sticky-bottom’); //change position to absolute for the wrapper
}
});
[/syntax_prettify]

Finally the simplified CSS code:

[syntax_prettify linenums=”linenums”]
.sticky-top {
position: fixed;
top: 0;
}

.sticky-bottom {
position: absolute;
bottom: 0;
}
[/syntax_prettify]

The Logics

As I have mentioned, Waypoints is really making things easy by allowing you to set your ‘anchors’ within the page. So in line 1 of the JS, when the scroll hits <div class="productlist"> it will toggle a new class sticky-top for the menu which changes the CSS position to fixed and make it stick to the top of the page.

The harder part is to tell the script that after reaching another waypoint, it has to remove the sticky-top class from the menu and make the menu’s wrapper stick to the end of the page’s content. To do this, we first need to calculate the position of the other waypoint. For this, we have to make use the offset option.

From Waypoints documentation:
Offset
This option determines how far the top of the element must be from the top of the viewport to trigger the callback function.

Since the <div class="footer"> is the element that we want to set as the new waypoint, we have to add the offset with the height of the menu by using jQuery’s height() function. I also added an extra 20px because there is 20px bottom margin from the page content to the footer.

Real-life usage

You can see the result on Bluelounge product page. Inside the product page, there are also other scripts running like the tabs and masonry so I have to add additional steps to make all of them work nicely together. But I am not going to the details and will save it for another time.

The technique is not perfect yet, you can probably still notice the page jumps a little. Not to mention a certain minimum height of the viewport is still required, which is half of the menu, so on very small desktop screens this will not work optimally. For now, I am quite happy with this and welcoming any suggestion to improve it further.

Note: New Bluelounge website launched in the beginning of 2015, therefore the result link above is no longer working.

The post Creating “Sticky” Vertical Menu with jQuery Waypoints appeared first on Michael Sunarlim.