purecss

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed."> <title>Responsive Horizontal-to-Scrollable Menu – Layout Examples – Pure</title> <link rel="stylesheet" href="/css/pure/pure-min.css"> </head> <body> <style> .custom-menu-wrapper { background-color: #808080; margin-bottom: 2.5em; white-space: nowrap; position: relative; } .custom-menu { display: inline-block; width: auto; vertical-align: middle; -webkit-font-smoothing: antialiased; } .custom-menu .pure-menu-link, .custom-menu .pure-menu-heading { color: white; } .custom-menu .pure-menu-link:hover, .custom-menu .pure-menu-heading:hover { background-color: transparent; } .custom-menu-top { position: relative; padding-top: .5em; padding-bottom: .5em; } .custom-menu-brand { display: block; text-align: center; position: relative; } .custom-menu-toggle { width: 44px; height: 44px; display: block; position: absolute; top: 3px; right: 0; display: none; } .custom-menu-toggle .bar { background-color: white; display: block; width: 20px; height: 2px; border-radius: 100px; position: absolute; top: 22px; right: 12px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .custom-menu-toggle .bar:first-child { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .custom-menu-toggle.x .bar { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .custom-menu-toggle.x .bar:first-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .custom-menu-screen { background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; height: 3em; width: 70em; position: absolute; top: 0; z-index: -1; } .custom-menu-tucked .custom-menu-screen { -webkit-transform: translateY(-44px); -moz-transform: translateY(-44px); -ms-transform: translateY(-44px); transform: translateY(-44px); } @media (max-width: 62em) { .custom-menu { display: block; } .custom-menu-toggle { display: block; display: none\9; } .custom-menu-bottom { position: absolute; width: 100%; border-top: 1px solid #eee; background-color: #808080\9; z-index: 100; } .custom-menu-bottom .pure-menu-link { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .custom-menu-bottom.custom-menu-tucked .pure-menu-link { -webkit-transform: translateX(-140px); -moz-transform: translateX(-140px); -ms-transform: translateX(-140px); transform: translateX(-140px); opacity: 0; opacity: 1\9; } .pure-menu-horizontal.custom-menu-tucked { z-index: -1; top: 45px; position: absolute; overflow: hidden; } } </style> <div class="custom-menu-wrapper"> <div class="pure-menu custom-menu custom-menu-top"> <a href="#" class="pure-menu-heading custom-menu-brand">Brand</a> <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a> </div> <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu"> <div class="custom-menu-screen"></div> <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li> </ul> </div> </div> <script> (function (window, document) { document.getElementById('toggle').addEventListener('click', function (e) { document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked'); document.getElementById('toggle').classList.toggle('x'); }); })(this, this.document); </script> <style> .main { padding: 2em; color: black; } </style> <div class="main"> <h1>Responsive Horizontal-to-Scrollable Menu</h1> <p>This example shows how you can build upon Pure menu classes such as pure-menu-horizontal and pure-menu-scrollable. At wide window-widths we display a horizontal menu. At smaller window-widths, we switch to a scrollable horizontal menu with a toggle control. Older IE clients won't get all the bells and whistles, but it should still be usable. Remember that the JavaScript provided is plain vanilla JS so it won't work in some browsers; you'll need to polyfill or adapt the code to your library of choice.</p> <p>Code reproduced below:</p> <pre class="code" data-language="html"><code><style> .custom-menu-wrapper { background-color: #808080; margin-bottom: 2.5em; white-space: nowrap; position: relative; } .custom-menu { display: inline-block; width: auto; vertical-align: middle; -webkit-font-smoothing: antialiased; } .custom-menu .pure-menu-link, .custom-menu .pure-menu-heading { color: white; } .custom-menu .pure-menu-link:hover, .custom-menu .pure-menu-heading:hover { background-color: transparent; } .custom-menu-top { position: relative; padding-top: .5em; padding-bottom: .5em; } .custom-menu-brand { display: block; text-align: center; position: relative; } .custom-menu-toggle { width: 44px; height: 44px; display: block; position: absolute; top: 3px; right: 0; display: none; } .custom-menu-toggle .bar { background-color: white; display: block; width: 20px; height: 2px; border-radius: 100px; position: absolute; top: 22px; right: 12px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .custom-menu-toggle .bar:first-child { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .custom-menu-toggle.x .bar { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .custom-menu-toggle.x .bar:first-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .custom-menu-screen { background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; height: 3em; width: 70em; position: absolute; top: 0; z-index: -1; } .custom-menu-tucked .custom-menu-screen { -webkit-transform: translateY(-44px); -moz-transform: translateY(-44px); -ms-transform: translateY(-44px); transform: translateY(-44px); } @media (max-width: 62em) { .custom-menu { display: block; } .custom-menu-toggle { display: block; display: none\9; } .custom-menu-bottom { position: absolute; width: 100%; border-top: 1px solid #eee; background-color: #808080\9; z-index: 100; } .custom-menu-bottom .pure-menu-link { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .custom-menu-bottom.custom-menu-tucked .pure-menu-link { -webkit-transform: translateX(-140px); -moz-transform: translateX(-140px); -ms-transform: translateX(-140px); transform: translateX(-140px); opacity: 0; opacity: 1\9; } .pure-menu-horizontal.custom-menu-tucked { z-index: -1; top: 45px; position: absolute; overflow: hidden; } } </style> <div class="custom-menu-wrapper"> <div class="pure-menu custom-menu custom-menu-top"> <a href="#" class="pure-menu-heading custom-menu-brand">Brand</a> <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a> </div> <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu"> <div class="custom-menu-screen"></div> <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li> </ul> </div> </div> <script> (function (window, document) { document.getElementById('toggle').addEventListener('click', function (e) { document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked'); document.getElementById('toggle').classList.toggle('x'); }); })(this, this.document); </script></code></pre> </div> </body> </html>