<!doctype html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <title>Toggle Navigation: No JS</title>
- <meta name="description" content="Toggle Navigation: No JS">
- <meta name="author" content="Antonio Ospite">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Toggle Navigation: No JS</title>
+ <meta name="description" content="Toggle Navigation: No JS">
+ <meta name="author" content="Antonio Ospite">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="css/style.css">
-</head>
+ <link rel="stylesheet" href="css/style.css">
+ </head>
-<body>
-
- <header role="banner" class="pattern">
- <h1>Toggle Navigation: No JS</h1>
- </header>
+ <body>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <header role="banner" class="pattern">
+ <h1>Toggle Navigation: No JS</h1>
+ </header>
- <nav class="toggle-menu" role="navigation">
- <!--
- The toggle-menu__target elements will be hidden to avoid scrolling around
- when navigating to the fragment ids, see also
- https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid
- -->
- <div id="show-nav-menu" class="toggle-menu__target"></div>
- <div id="hide-menu" class="toggle-menu__target"></div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu">Show Menu</a>
- <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu</a>
- <ul class="toggle-menu__list" tabindex="0">
- <li class="toggle-menu__item"><a href="#">Home</a></li>
- <li class="toggle-menu__item"><a href="#">About</a></li>
- <li class="toggle-menu__item"><a href="#">Products</a></li>
- <li class="toggle-menu__item"><a href="#">Services</a></li>
- <li class="toggle-menu__item"><a href="#">Contact</a></li>
- </ul>
- </nav>
+ <nav class="toggle-menu" role="navigation">
+ <!--
+ The toggle-menu__target elements will be hidden to avoid scrolling around
+ when navigating to the fragment ids, see also
+ https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid
+ -->
+ <div id="show-nav-menu" class="toggle-menu__target"></div>
+ <div id="hide-menu" class="toggle-menu__target"></div>
- <p><strong>Another Menu</strong></p>
+ <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu">Show Menu</a>
+ <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu</a>
+ <ul class="toggle-menu__list" tabindex="0">
+ <li class="toggle-menu__item"><a href="#">Home</a></li>
+ <li class="toggle-menu__item"><a href="#">About</a></li>
+ <li class="toggle-menu__item"><a href="#">Products</a></li>
+ <li class="toggle-menu__item"><a href="#">Services</a></li>
+ <li class="toggle-menu__item"><a href="#">Contact</a></li>
+ </ul>
+ </nav>
- <nav class="toggle-menu">
- <div id="show-nav-menu-2" class="toggle-menu__target"></div>
+ <p><strong>Another Menu</strong></p>
- <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu-2">Show Menu 2</a>
- <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu 2</a>
- <ul class="toggle-menu__list" tabindex="0">
- <li class="toggle-menu__item"><a href="#">Feeds</a></li>
- <li class="toggle-menu__item"><a href="#">Social</a></li>
- </ul>
- </nav>
+ <nav class="toggle-menu">
+ <div id="show-nav-menu-2" class="toggle-menu__target"></div>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu-2">Show Menu 2</a>
+ <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu 2</a>
+ <ul class="toggle-menu__list" tabindex="0">
+ <li class="toggle-menu__item"><a href="#">Feeds</a></li>
+ <li class="toggle-menu__item"><a href="#">Social</a></li>
+ </ul>
+ </nav>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ </body>
</html>
projects / experiments / scss-responsive-toggle-menu.git / commitdiff