index.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8">
   5   <meta http-equiv="x-ua-compatible" content="ie=edge">
   6   <title>Toggle Navigation: No JS</title>
   7   <meta name="description" content="Toggle Navigation: No JS">
   8   <meta name="author" content="Antonio Ospite">
   9   <meta name="viewport" content="width=device-width, initial-scale=1">
  10
  11   <link rel="stylesheet" href="css/style.css">
  12 </head>
  13
  14 <body>
  15
  16   <header role="banner" class="pattern">
  17     <h1>Toggle Navigation: No JS</h1>
  18   </header>
  19
  20   <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>
  21
  22   <nav class="toggle-menu" role="navigation">
  23     <!--
  24       The toggle-menu__target elements will be hidden to avoid scrolling around
  25       when navigating to the fragment ids, see also
  26       https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid
  27     -->
  28     <div id="show-nav-menu" class="toggle-menu__target"></div>
  29     <div id="hide-menu" class="toggle-menu__target"></div>
  30
  31     <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu">Show Menu</a>
  32     <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu</a>
  33     <ul class="toggle-menu__list" tabindex="0">
  34       <li class="toggle-menu__item"><a href="#">Home</a></li>
  35       <li class="toggle-menu__item"><a href="#">About</a></li>
  36       <li class="toggle-menu__item"><a href="#">Products</a></li>
  37       <li class="toggle-menu__item"><a href="#">Services</a></li>
  38       <li class="toggle-menu__item"><a href="#">Contact</a></li>
  39     </ul>
  40   </nav>
  41
  42   <p><strong>Another Menu</strong></p>
  43
  44   <nav class="toggle-menu">
  45     <div id="show-nav-menu-2" class="toggle-menu__target"></div>
  46
  47     <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu-2">Show Menu 2</a>
  48     <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu 2</a>
  49     <ul class="toggle-menu__list" tabindex="0">
  50       <li class="toggle-menu__item"><a href="#">Feeds</a></li>
  51       <li class="toggle-menu__item"><a href="#">Social</a></li>
  52     </ul>
  53   </nav>
  54
  55   <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>
  56
  57   <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>
  58
  59   <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>
  60
  61   <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>
  62
  63   <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>
  64
  65 </body>
  66 </html>