GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → lukejacksonn → Greedynav

lukejacksonn / Greedynav

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

Programming Languages

javascript
184084 projects - #8 most used programming language

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].