github/pure
1
Fork 0
mirror of https://github.com/pure-css/pure synced 2024-12-25 05:23:43 +01:00
Code Releases Activity
8ec4ca4c8c
pure/site/static/layouts/tucked-menu-vertical/index.html
Jacob Svensson 8ec4ca4c8c
Update index.html (#1368) 
Fix variable case in HTML text. (The case is correct in the JS code included in the page.)
2024-12-09 10:22:22 -08:00

343 lines
11 KiB
HTML
Raw Blame History

<!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="A set of horizontal menus that switch to vertical and which hide at small window widths.">
<title>Responsive Horizontal-to-Vertical Menu &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
</head>
<body>
<style>
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
</style>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading custom-brand">Brand</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<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>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<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>
</div>
<script>
(function (window, document) {
var menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
rollBack = setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
</script>
<style>
.main {
padding: 2em;
color: black;
}
</style>
<div class="main">
<h1>Responsive Horizontal-to-Vertical Menu</h1>
<p>This example shows how you can build upon Pure Menu and Grid classes. At wide
window-widths we display a horizontal menu.
At smaller window-widths,
we switch to a vertical menu with a toggle control. Grids are used to
arrange the menus.
Code reproduced below:</p>
<pre class="code" data-language="html"><code>
&lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;/css/pure/grids-responsive-min.css&quot;&gt;
&lt;style&gt;
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
&lt;/style&gt;
&lt;div class&#x3D;&quot;custom-wrapper pure-g&quot; id&#x3D;&quot;menu&quot;&gt;
&lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
&lt;div class&#x3D;&quot;pure-menu&quot;&gt;
&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-heading custom-brand&quot;&gt;Brand&lt;/a&gt;
&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;custom-toggle&quot; id&#x3D;&quot;toggle&quot;&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
&lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-can-transform&quot;&gt;
&lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
&lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
&lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform&quot;&gt;
&lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
&lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
&lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;W3C&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
(function (window, document) {
var menu &#x3D; document.getElementById(&#x27;menu&#x27;),
rollBack,
WINDOW_CHANGE_EVENT &#x3D; (&#x27;onorientationchange&#x27; in window) ? &#x27;orientationchange&#x27;:&#x27;resize&#x27;;
function toggleHorizontal() {
menu.classList.remove(&#x27;closing&#x27;);
[].forEach.call(
document.getElementById(&#x27;menu&#x27;).querySelectorAll(&#x27;.custom-can-transform&#x27;),
function(el){
el.classList.toggle(&#x27;pure-menu-horizontal&#x27;);
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains(&#x27;open&#x27;)) {
menu.classList.add(&#x27;closing&#x27;);
rollBack &#x3D; setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains(&#x27;closing&#x27;)) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle(&#x27;open&#x27;);
document.getElementById(&#x27;toggle&#x27;).classList.toggle(&#x27;x&#x27;);
};
function closeMenu() {
if (menu.classList.contains(&#x27;open&#x27;)) {
toggleMenu();
}
}
document.getElementById(&#x27;toggle&#x27;).addEventListener(&#x27;click&#x27;, function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
&lt;/script&gt;</code></pre>
</div>
</body>
</html>
View Git Blame Copy Permalink