GreedyNav

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

Generate Convert Improve

Install / Use

/learn @lukejacksonn/GreedyNav

About this skill

Quality Score

0/100

README

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

Related Skills

node-connect

345.9k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

106.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

345.9k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

345.9k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。