404 lines
15 KiB
HTML
404 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<link rel="canonical" href="/patterns/widgets/example2/">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/css/prism.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||
|
|
<title>
|
||
|
|
|
||
|
|
Menu button and menu | Inclusive Pattern Docs
|
||
|
|
|
||
|
|
</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<svg style="display: none">
|
||
|
|
<symbol id="bookmark">
|
||
|
|
<g transform="translate(2266 3206.2)">
|
||
|
|
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||
|
|
</g>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<symbol id="w3c">
|
||
|
|
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||
|
|
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<symbol id="tag">
|
||
|
|
<g transform="translate(0 -875.2)">
|
||
|
|
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||
|
|
</g>
|
||
|
|
</symbol>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
<header class="intro-and-nav" role="banner">
|
||
|
|
<div>
|
||
|
|
<div class="intro">
|
||
|
|
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||
|
|
<img src="/images/logo.png" alt="">
|
||
|
|
</a>
|
||
|
|
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||
|
|
</div>
|
||
|
|
<nav class="patterns" role="navigation">
|
||
|
|
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/example1/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Collapsible region</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Tab interface</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h3>Landmarks</h3>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/landmarks/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Footer</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/landmarks/example-one/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Page region navigation landmark</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h3>Widgets</h3>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/widgets/example1/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Card</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/widgets/example2/" aria-current="page">
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Menu button and menu</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="main-and-footer">
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<main id="main">
|
||
|
|
<h1>Menu button and menu</h1>
|
||
|
|
|
||
|
|
<div class="tags">
|
||
|
|
<strong aria-hidden="true">Tags: </strong>
|
||
|
|
<ul aria-label="tags">
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||
|
|
<use xlink:href="#tag"></use>
|
||
|
|
</svg>
|
||
|
|
<a href="/tags/animated">animated</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||
|
|
<use xlink:href="#tag"></use>
|
||
|
|
</svg>
|
||
|
|
<a href="/tags/interactive">interactive</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<a class="pattern-link" href="/patterns/widgets/example2/">
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||
|
|
<use xlink:href="#bookmark"></use>
|
||
|
|
</svg>
|
||
|
|
Menu button and menu
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.</p>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
|
||
|
|
<div class="demo" id="demo-CiZsdDtidXR0b24"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<template id="template-CiZsdDtidXR0b24">
|
||
|
|
|
||
|
|
<button aria-pressed="false">Press</button>
|
||
|
|
<style>
|
||
|
|
button {
|
||
|
|
background: blue;
|
||
|
|
color: white;
|
||
|
|
border: 0;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
[aria-pressed="true"] {
|
||
|
|
box-shadow: inset 0 0 0.5rem #000;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
var toggle = demo.querySelector('[aria-pressed]');
|
||
|
|
console.log(toggle);
|
||
|
|
|
||
|
|
toggle.addEventListener('click', (e) => {
|
||
|
|
let pressed = e.target.getAttribute('aria-pressed') === 'true';
|
||
|
|
e.target.setAttribute('aria-pressed', !pressed);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var root = document.getElementById('demo-CiZsdDtidXR0b24');
|
||
|
|
if (document.head.attachShadow) {
|
||
|
|
root.attachShadow({mode: 'open'});
|
||
|
|
var template = document.getElementById('template-CiZsdDtidXR0b24');
|
||
|
|
var script = template.content.querySelector('script');
|
||
|
|
if (script) {
|
||
|
|
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24\').shadowRoot; ${script.textContent} })()`
|
||
|
|
}
|
||
|
|
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||
|
|
} else {
|
||
|
|
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<pre class="language-css line-numbers"><code class="language-css" data-codeblock-shortcode>
|
||
|
|
.expandable + .expandable {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
border-top: 2px solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.expandable + .expandable {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
border-top: 2px solid;
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
|
||
|
|
<pre><code class="language-html">{{ .Inner }}
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
|
||
|
|
<figure role="group" aria-labelledby="caption-CiZsdDtwJmd0O1l">
|
||
|
|
|
||
|
|
<div class="demo" id="demo-CiZsdDtwJmd0O1l"></div>
|
||
|
|
|
||
|
|
<figcaption id="caption-CiZsdDtwJmd0O1l">Example caption</figcaption>
|
||
|
|
|
||
|
|
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<template id="template-CiZsdDtwJmd0O1l">
|
||
|
|
|
||
|
|
<p>You must be having a laugh.</p>
|
||
|
|
<style>
|
||
|
|
p {
|
||
|
|
color: red !important;
|
||
|
|
font-family: cursive;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
demo.querySelector('p').addEventListener('click', function() {
|
||
|
|
alert('hello');
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var root = document.getElementById('demo-CiZsdDtwJmd0O1l');
|
||
|
|
if (document.head.attachShadow) {
|
||
|
|
root.attachShadow({mode: 'open'});
|
||
|
|
var template = document.getElementById('template-CiZsdDtwJmd0O1l');
|
||
|
|
var script = template.content.querySelector('script');
|
||
|
|
if (script) {
|
||
|
|
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtwJmd0O1l\').shadowRoot; ${script.textContent} })()`
|
||
|
|
}
|
||
|
|
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||
|
|
} else {
|
||
|
|
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<p>Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. Nulla lobortis tempus commodo. </p>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
|
||
|
|
<div class="demo" id="demo-CiZsdDtwJmd0O0V"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<template id="template-CiZsdDtwJmd0O0V">
|
||
|
|
|
||
|
|
<p>Everyone must not be having a laugh.</p>
|
||
|
|
<style>
|
||
|
|
p {
|
||
|
|
color: blue !important;
|
||
|
|
font-family: cursive;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
demo.querySelector('p').addEventListener('click', function() {
|
||
|
|
alert('fuck');
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var root = document.getElementById('demo-CiZsdDtwJmd0O0V');
|
||
|
|
if (document.head.attachShadow) {
|
||
|
|
root.attachShadow({mode: 'open'});
|
||
|
|
var template = document.getElementById('template-CiZsdDtwJmd0O0V');
|
||
|
|
var script = template.content.querySelector('script');
|
||
|
|
if (script) {
|
||
|
|
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtwJmd0O0V\').shadowRoot; ${script.textContent} })()`
|
||
|
|
}
|
||
|
|
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||
|
|
} else {
|
||
|
|
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="ticks">
|
||
|
|
<ul>
|
||
|
|
<li>Something good</li>
|
||
|
|
<li>Something else good</li>
|
||
|
|
<li>Another great thing</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna … </p>
|
||
|
|
|
||
|
|
<aside aria-label="note" class="note">
|
||
|
|
<div>
|
||
|
|
<img src="/images/icon-info.svg" alt="">
|
||
|
|
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique.</p>
|
||
|
|
|
||
|
|
<p>Purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna …</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
|
||
|
|
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna … </p>
|
||
|
|
|
||
|
|
<aside aria-label="warning" class="note warning">
|
||
|
|
<div>
|
||
|
|
<img src="/images/icon-warning.svg" alt="">
|
||
|
|
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique.</p>
|
||
|
|
|
||
|
|
<p>Purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna …</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer role="contentinfo">
|
||
|
|
By Heydon Pickering
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/js/prism.js"></script>
|
||
|
|
|
||
|
|
<script src="/js/dom-scripts.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|