{"id":207389,"date":"2015-08-31T09:18:07","date_gmt":"2015-08-31T16:18:07","guid":{"rendered":"http:\/\/css-tricks.com\/?p=207389"},"modified":"2015-09-02T11:28:14","modified_gmt":"2015-09-02T18:28:14","slug":"diy-priority-plus-nav","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/diy-priority-plus-nav\/","title":{"rendered":"DIY Priority+ Navigation"},"content":{"rendered":"

We’ve written a bit about the Priority+ pattern here before. Here’s a bunch of real world examples.<\/a> I needed to use it recently. I found Gijs Rog\u00e9’s priority-navigation<\/a>. It’s pretty nice: no dependencies, clean code, fairly configurable and designable. It’s not particularly small though, and there is a good amount of it defining helper functions. I was in an environment that had all that stuff available and so I figured I’d take a crack at a version. <\/p>\n

<\/p>\n

Technique: Test if Elements Have Wrapped<\/h3>\n

See the Pen Priority Nav via Wrapping\/jQuery<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n

This version has jQuery (for DOM easiness) and Lodash (for debouncing) as dependencies. Those are far from insignificant, and you wouldn’t probably add them just<\/em> for navigation, but my project had them available. <\/p>\n

I also took a slightly different approach than I’ve seen in other takes. Rather than measure the available width and the width of each menu item to see if they will fit or not, I just let the menu items wrap. When the window is resized, I check the position of the elements and if I can tell by their position that they have wrapped, they go into the overflow. So you never really see any wrapping. (If your menu items can wrap, you probably don’t need Priority+.)<\/p>\n

Of course there is work to be done. With the information about which items should be in the overflow, I needed to clone them over there. And be ready to do it all over again when the window resizes, but not too quickly (hence the debouncing<\/a>). <\/p>\n

Technique: Measure Widths<\/h3>\n

The technique I see more commonly is to measure widths and make choices based on those widths. Johan van Tongeren has a version of that:<\/p>\n

See the Pen Responsive horizontal menu<\/a> by Johan van Tongeren (@Dreamdealer<\/a>) on CodePen<\/a>.<\/p>\n

The code is quite short. Measure the available space and space needed by the elements. If there isn’t enough space, pluck one off into the overflow and try again. It seems like a lot of calculation, especially the recursion and that it’s not debounced, but hey it seems to run pretty ok.<\/p>\n

Luke Jacksonn has written a version in a simliar fashion:<\/p>\n

See the Pen Greedy Navigation<\/a> by lukejacksonn (@lukejacksonn<\/a>) on CodePen<\/a>.<\/p>\n

Technique: Choose Overflow Items Ahead of Time<\/h3>\n

Michael Scharnagl has a demo<\/a> that needs no JavaScript at all. <\/p>\n

<\/figure>\n

It uses the :target<\/code> selector<\/a> to hide\/show a set of links. He uses alpha\/beta\/gamma classes on the links in conjunction with media queries to show more\/less of them at different screen widths. <\/p>\n

The Point<\/h3>\n

Uhm. I guess it’s that you can always snag someone else’s code to get something done. Very often that’s a good idea. But sometimes it’s fun to dig in a little and try to write it yourself and explore other possibilities. I’m not sure my version is any better (it’s not), but I learned about the problem and different possible approaches.<\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve written a bit about the Priority+ pattern here before. Here’s a bunch of real world examples. I needed to use it recently. I found Gijs Rog\u00e9’s priority-navigation. It’s pretty nice: no dependencies, clean code, fairly configurable and designable. It’s not particularly small though, and there is a good amount of it defining helper functions. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":246599,"url":"https:\/\/css-tricks.com\/priority-navigation-scrolling-dropdowns\/","url_meta":{"origin":207389,"position":0},"title":"A Priority+ Navigation With Scrolling and Dropdowns","date":"October 18, 2016","format":false,"excerpt":"The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the \"Priority+ Navigation\" concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it's working out\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":201311,"url":"https:\/\/css-tricks.com\/the-priority-navigation-pattern\/","url_meta":{"origin":207389,"position":1},"title":"The Priority+ Navigation Pattern","date":"April 29, 2015","format":false,"excerpt":"The idea is: show as many navigation items as will fit horizontally with a UI toggle to show the rest. I like the idea. Why hide everything behind a toggle if there is room to expose the most important links? How it looks and how it is implemented could vary.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5582,"url":"https:\/\/css-tricks.com\/jquery-magicline-navigation\/","url_meta":{"origin":207389,"position":2},"title":"jQuery MagicLine Navigation","date":"February 9, 2010","format":false,"excerpt":"These \"sliding\" style navigation bars have been around a while, I just thought I'd take a crack at doing it myself as the opportunity came up recently. Turns out it's really pretty darn easy. I put two examples together for it. The Idea The idea is to have a highlight\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306810,"url":"https:\/\/css-tricks.com\/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss\/","url_meta":{"origin":207389,"position":3},"title":"Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS","date":"April 29, 2020","format":false,"excerpt":"We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let\u2019s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren't looking to build a single page application\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/alpinejs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333285,"url":"https:\/\/css-tricks.com\/i-saw-two-mega-menus-today\/","url_meta":{"origin":207389,"position":4},"title":"I Saw Two Mega Menus Today…","date":"February 2, 2021","format":false,"excerpt":"One was the footer of an (older) U.S. Government website. The other was the navigation for AWS services from the AWS Console.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-20-at-10.50.52-AM.png?fit=1200%2C1097&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":246478,"url":"https:\/\/css-tricks.com\/jquery-still-relevant\/","url_meta":{"origin":207389,"position":5},"title":"Is jQuery Still Relevant?","date":"October 13, 2016","format":false,"excerpt":"It took a minute, but I believe we have arrived at Baby Bear on the jQuery conversation. Some choice quotes from the ensemble cast blog post: Nathanael Anderson: The biggest negative for jQuery in this day and age is that browsers are a lot more standard in coverage and directly\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/207389"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=207389"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/207389\/revisions"}],"predecessor-version":[{"id":207476,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/207389\/revisions\/207476"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=207389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=207389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=207389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}