Responsive navigation menu
Written by masteryeti on .Only using HTML and CSS
In order to make use of the browser's portable native capabilities as much as possible, the hash component of an URI can be used. That is the #-segment in the address bar. Typically, the hash targets a specific element in the page (DOM-tree), based on the ID-attribute (if not unique, the first element). The hash has multiple consequences:
- Scrolls so that the target element starts at the top of the viewport.
- Enables
:targetpseudo-class on the target element. - Possibly interferes with other ID-attributes of the same name, ensure a unique identifier attribute on the element.
- Pushes new entry in the browser history, since the URL changed.
- Navigating to another hash with the same URL does not reload the page.
Adjust CSS to your own theme. If using a simple menu, all lines with dl/dt/dd may be removed. Use the following code (view demo):
<!DOCTYPE html>
<html>
<body>
<style>
body
{margin: 0;}
body > header a[href="#menu"]
{display: none;left: 0px;top: 0px;z-index: 100;}
#menu
{margin: 0 auto;display: table;}
#menu > a
{display: none;}
#menu nav
{display: flex;text-align: center;}
#menu nav > *
{flex-grow: 1;}
#menu dl
{position: relative;margin: 0;}
#menu dl dt
{padding: 10px;}
#menu nav > a,
#menu nav dd > a
{margin: 10px;display: inline-block;}
#menu nav a
{display: block;min-width: 200px;height: 40px;background-color: #eee;border: 1px solid #999;line-height: 20px;padding: 10px;box-sizing: border-box;}
#menu nav > a:hover,
#menu nav dd > a:hover,
#menu dl:hover dt a,
#menu dl:hover dt:hover a
{background-color: #def;border-color: #39f;color: revert;}
#menu dl:hover dt a
{background-color: #06c;color: #fff;}
#menu dd
{display: none;margin: 0;min-width: 100%;}
#menu dl:hover dd
{display: block;position: absolute;}
@media screen and (max-width: 900px)
{
#menu > a
{z-index: 2;}
#menu nav
{z-index: 1;background-color: #f6f6f6;border: 1px solid #999;border-radius: 0px 10px 10px 0px;box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.5);}
body > header a[href="#menu"],
#menu > a
{display: inline-block;width: 120px;height: 60px;line-height: 60px;background-color: #eee;border: 1px solid #999;text-align: center;font-size: 24px;}
#menu > a
{background-color: #06c;color: #fff;}
body > header a[href="#menu"]:hover
{background-color: #def;border-color: #39f;color: revert;}
#menu
{visibility: hidden;position: absolute;left: 0px;top: 0px;z-index: 100;}
#menu:target
{visibility: visible;}
#menu nav
{flex-direction: column;}
#menu dd
{display: flex;flex-direction: column;}
#menu nav
{text-align: left;}
#menu nav a
{padding-right: 40px;height: 60px;line-height: 40px;font-size: 20px;}
#menu nav dd a
{padding-left: 20px;}
#menu dl:hover dd
{display: flex;position: relative;}
}
</style>
<header>
<a href="#menu">Menu</a>
<section id="menu">
<a href="#">Menu</a>
<nav>
<a href="/">Home</a>
<dl>
<dt>
<a href="/pages/">Pages</a>
</dt>
<dd>
<a href="/pages/some-page.html">Some Page</a>
<a href="/pages/some-other-page.html">Some Other Page</a>
</dd>
</dl>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</section>
</header>
<main>
<p>Rest of page content here...</p>
</main>
</body>
</html>