lukejacksonn / greedynav Goto Github PK

A responsive navigation menu that stacks items into a dropdown menu when they overflow

Home Page: http://codepen.io/lukejacksonn/pen/BowbWE

License: MIT License

HTML 33.49% JavaScript 38.92% CSS 27.59%

greedynav's Introduction

Greedy Navigation

Include greedynav.css and greedynav.js on the page and put the <nav> code in the body of the document. When the user resizes the window the nav will shrink, any overflowing items will be removed from the visible list and get prepended to a list of vertically stacked items that are hidden. The user is notified of this action by a count badge next to a hamburger icon at the end of the menu, which acts as a dropdown trigger button for the hidden list.

Demo

http://codepen.io/lukejacksonn/pen/BowbWE

Usage

<head>
<link href="greedynav.css" rel="stylesheet" type="text/css" >
<script src="greedynav.js"></script>
</head>
<body>
<nav class='greedy'>
  <h1>GreedyNav</h1>
  <ul class='links'>
    <li><a href='#'>navbar</a></li>
    <li><a href='#'>that</a></li>
    <li><a href='#'>handles</a></li>
    <li><a href='#'>overflowing</a></li>
    <li><a href='#'>menu</a></li>
    <li><a href='#'>elements</a></li>
    <li><a href='#'>effortlessly</a></li>
  </ul>
  <button>MENU</button>
  <ul class='hidden-links hidden'></ul>
</nav>
</body>

TODO

Extend demo to show varients
Make into a web component

greedynav's People

Contributors

Stargazers

Watchers

greedynav's Issues

Floating the menu on the left

I couldn't find a way to have this menu left aligned and the dropdown also left aligned always close to the last menu item, anyone found a solution for this?

IE9

Does not work?

.links li don't visible.

I don't see the need for 'var $nav'

This var is unused. I don't think this is needed in the js file.

horizontal

How would you make this nav bar horizontal instead of vertical?

Problem with minimize / maximize browser window

When you open demo (https://codepen.io/lukejacksonn/pen/BowbWE) for example in 700px wide browser window and then you maximize window it doesn't render correctly.

700px browser window

Fullscreen mode (1920x1080)

Incorrect resizing when the window is maximized

Hello,

Great project!

I noticed one issue though, and maybe it would be easier to explain it by just mentioning how to reproduce it:

Open a site which uses GreedyNav (even the examples will do, http://codepen.io/lukejacksonn/pen/BowbWE )
Resize down the browser window. Greedy nav starts to correctly hide items
Once several items are hidden, maximize the browser window.

Expected behavior:
All items in the navigation bar are now correctly displayed, as the window is maximized.

Actual behavior:
The navbar seems to update at some intermediary state, as only part of the navigation items are visible after the window was maximized, while others are still hidden.

Screenshot (1080x1920 monitor, full screen):

I assume it happens because the resize listener fires off in a weird way when a maximize is being performed, however I'm not a web dev so I don't know how to fix it myself in order to submit a pull request.

Kind regards,
CataJ

UX - clicking off the dropdown menu to close, instead of having to click button to close.

Would be great for UX. Attempting this feature, but having difficulty getting it working.
Using stopPropagation and preventDefault

Upload to CDN

Would be great to be able to fetch this from some CDN...

react version

Has anybody tried to port this to React? I'm having issues doing it so. My main concern is: measuring the DOM elements has to be done on componentDidMount but what if a stylesheet (remote with link tag) is affecting the sizes of the menu elements? How do we know when a CSS has been applied to the DOM in componentDidMount?

How to not count submenus items

Hi, i posted this to codepen also. I hope is ok to post here too.
I want to use this nav with submenus, but not to count them in counter. Is it possible?
Tnx