0afb5277ad
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
369 lines
31 KiB
HTML
369 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Navigation</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, navigation ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
|
@media (min-width:768px) and (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-bottom: 1px solid #c9c9c9;}}
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored { color: #f5f5f5;} .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
|
@media (min-width: 1280px) {.col-sm-12.col-sm-last.col-md-12.col-md-normal.col-lg-4.col-lg-normal {border:0; border-right: 1px solid #c9c9c9; }}
|
|
@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
@media screen and (min-width: 768px) { .drawer#real-drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2" id="real-drawer">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
|
|
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
|
|
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
|
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
|
|
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
|
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
|
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
|
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
|
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
|
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
|
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
|
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="navigation-title">
|
|
<div class="col-sm-12">
|
|
<h1>Navigation</h1>
|
|
<p style="text-align: justify;">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus.</p>
|
|
<p style="text-align: justify;"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p style="text-align: justify;">Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p style="text-align: justify;">To use the <strong>navigation</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="header">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Header</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div><br>
|
|
<header>
|
|
<a href="#" class="logo">Logo</a> <button>Home</button>
|
|
<a href="#" class="button">News</a> <span>|</span>
|
|
<button>About</button> <button>Contact</button>
|
|
</header> <br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<p style="text-align: justify;">The <code><header></code> HTML element is used for a page's top horizontal navigation menu. It can contain a unique <code>.logo</code> element as its first child (this structure is not mandatory, but still recommended as a best practice), which can be either text (with or without a link) or an image. The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> or <code>.button</code>) in order to be styled properly. Textual separators between those can be added using <code><span></code> elements.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><header>
|
|
<a href="#" class="logo">Logo</a>
|
|
<button>Home</button>
|
|
<a href="#" class="button">News</a>
|
|
<span>|</span>
|
|
<button>About</button>
|
|
<a href="#" role="button">Contact</a>
|
|
</header></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<li>The <code><header></code> element is partially responsive on smaller screen devices. More specifically, when the content inside it exceeds the width of the viewport (ie. overflows to the right), users will be able to scroll horizontally in order to see the rest of the menu.</li>
|
|
<li>The <code><header></code> element does not display as <code class="fore-tertiary">fixed</code> by default. You can, however, alter this CSS property manually, if you so desire.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><header>
|
|
<a href="#" class="logo">Logo</a>
|
|
<button>Action 1</button>
|
|
<a href="#" class="button">Action 2</a>
|
|
<label class="button">Action 3</label>
|
|
</header></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can mix different elements styled like buttons inside a <code><header></code> element. In fact, we strongly recommend doing so, if you need to.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><header>
|
|
<a href="#" class="button logo">Logo</a>
|
|
</header>
|
|
<span class="fore-secondary"><!-- or --></span>
|
|
<header>
|
|
<a href="#" class="logo">Logo</a>
|
|
<a href="#">Link</a>
|
|
</header></pre>
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> The <code>.logo</code> element should not be a <code><button></code> element, have the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> attribute. On the other hand, links and labels in the <code><header></code> should not be without a <code>.button</code> class or a <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> attribute. Ignoring this rule might cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="navigation-bar">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Navigation bar</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal col-lg-4 col-lg-normal">
|
|
<div><br>
|
|
<nav>
|
|
<a href="#">Home</a> <span>News</span>
|
|
<a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">Certifications</a>
|
|
<span class="sublink-1">Events</span> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
|
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1">Policy Update</a>
|
|
<a href="#">About</a> <a href="#">Contact</a>
|
|
</nav><br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal col-lg-8 col-lg-normal">
|
|
<p style="text-align: justify;">To add vertical navigation to your websites, use the <code><nav></code> HTML element. Adding links is pretty simple, just use <code><a></code> elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the <code>.sublink-1</code> class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the <code>.sublink-2</code> class.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><nav>
|
|
<a href="#">Home</a>
|
|
<span>News</span>
|
|
<a href="#" class="sublink-1">New Courses</a>
|
|
<a href="#" class="sublink-1">Certifications</a>
|
|
<span class="sublink-1">Events</span>
|
|
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
|
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
|
<a href="#" class="sublink-1">Policy Update</a>
|
|
<a href="#">About</a>
|
|
<a href="#">Contact</a>
|
|
</nav></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization.html">customization page</a> for instructions on how to add more depth to the vertical navigation.</li>
|
|
<li>We strongly suggest you do not add irrelevant things inside your <code><nav></code> element, like images or text that are not part of the navigation menu.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<pre><div class="col-sm-12 col-sm-last col-md-3 col-md-first">
|
|
<nav>
|
|
<span class="fore-tertiary"><!-- navigation content --></span>
|
|
</nav>
|
|
</div></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> We strongly recommend using the <code><nav></code> element in combination with the <a href="grid.html"><strong>grid</strong></a> module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="drawer">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Drawer</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div style="height: 15rem;"><br>
|
|
<style>.drawer.demo { position: absolute; height: 15rem; z-index: 0; top: 6.625rem; height: 12.5rem;} [type="checkbox"]:checked + .drawer.demo { z-index: 1001; margin-left: 0.75rem;}</style>
|
|
<header><label for="demo-toggle" class="button drawer-toggle persistent"></label></header> <br>
|
|
<input type="checkbox" id="demo-toggle"> <nav class="drawer demo persistent">
|
|
<label for="demo-toggle" class="close"></label><a href="#">Home</a> <span>News</span>
|
|
<a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">Certifications</a>
|
|
<span class="sublink-1">Events</span> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
|
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1">Policy Update</a>
|
|
<a href="#">About</a> <a href="#">Contact</a><br/></nav>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<p style="text-align: justify;">The drawer component is used to create responsive and collapsible navigation menus. To create the drawer system, follow the steps presented below:</p>
|
|
<ul style="text-align: justify;">
|
|
<li>Inside your <code><header></code> element, add a <code><label></code> element with the <code>.drawer-toggle</code> class (remember to add the <code>.button</code> class to apply the necessary styles).</li>
|
|
<li>Create an <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> element. Give it an <code class="fore-secondary">id</code> to be able to link it to the necessary interactive elements.</li>
|
|
<li>Immediately after the previous <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code>, create a <code><div></code> element with the <code>.drawer</code> class. This is where you will put your menu's contents.</li>
|
|
<li>Add an empty <code><label></code> element inside your <code>.drawer</code>, adding the <code>.close</code> class to it.</li>
|
|
<li>Finally, link the <code>.drawer-toggle</code> and <code>.close</code> elements to the <code class="fore-secondary">id</code> of your <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code>.</li>
|
|
</ul>
|
|
<p style="text-align: justify;">Drawers are responsive and will expand into normal containers on larger screens. If you want to avoid this, add the <code>.persistent</code> class to both your <code>.drawer-toggle</code> and <code>.drawer</code> elements. You can also change the position of the drawer from the left side of the screen to the right by applying the <code>.right</code> class to your <code>.drawer</code> element.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><header>
|
|
<label for="drawer-checkbox" class="button drawer-toggle"></label>
|
|
</header>
|
|
|
|
<input type="checkbox" id="drawer-checkbox">
|
|
<div class="drawer">
|
|
<label for="drawer-checkbox" class="close"></label>
|
|
<a href="#">Home</a>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid.html"><strong>grid</strong></a> module's system and classes, as well as the <a href="utility.html"><strong>utility</strong></a> module's responsive visibility helper classes to create fully responsive navigation menus.</li>
|
|
<li>It's best to use the <code>.drawer</code> component in combination with a <code><header></code> element that has the <code>.sticky</code> class (check the last section of this page).</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-sm-first">
|
|
<pre><nav class="drawer">
|
|
<label for="drawer-checkbox" class="close"></label>
|
|
<a href="#">Home</a>
|
|
</nav></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can apply the <code>.drawer</code> class to a <code><nav></code> element, effectively making your page's navigation menu collapse on smaller screen sizes.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><input type="checkbox" id="drawer-checkbox">
|
|
<span class="fore-secondary"><!-- Other stuff here --></span>
|
|
<div class="drawer">
|
|
<h3>Bad drawer</h3>
|
|
</div></pre>
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> The syntax and structure of the drawer container is very strict. Try to follow it exactly as described in this section.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-first col-md-normal">
|
|
<pre><div class="row">
|
|
<input type="checkbox" id="drawer-checkbox">
|
|
<div class="drawer col-md-4">
|
|
<label for="drawer-checkbox" class="close"></label>
|
|
<a href="#">Home</a>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-8">
|
|
<p>Page content</p>
|
|
</div>
|
|
</div></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can combine the <code>.drawer</code> component with the grid system, similarly to any other element or component. The <code>.drawer</code> will be displayed as a slide-in menu on smaller screens, but it's part of the layout on medium-sized and larger screens.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last">
|
|
<pre><header>
|
|
<label for="drawer-checkbox" class="button drawer-toggle persistent"></label>
|
|
</header>
|
|
<input type="checkbox" id="drawer-checkbox">
|
|
<div class="drawer">...</div>
|
|
<!-- or -->
|
|
<header>
|
|
<label for="drawer-checkbox" class="button drawer-toggle"></label>
|
|
</header>
|
|
<input type="checkbox" id="drawer-checkbox">
|
|
<div class="drawer peristent">...</div></pre>
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Remember to apply the <code>.persistent</code> class to the <code>.drawer-toggle</code> and <code>.drawer</code> elements to avoid unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="footer">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Footer</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-lg-4 col-md-normal">
|
|
<div><br>
|
|
<footer> <p>© 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p> </footer> <br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
|
|
<p style="text-align: justify;">The <code><footer></code> element is used to create your page's footer. As normal, add the <code><footer></code> at or near the end of your <code><body></code> element and add content to it like you would otherwise.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><footer>
|
|
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
|
</footer></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="sticky">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Sticky headers and footers</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">You can create sticky headers and footers, using the <code>.sticky</code> class on either of these elements.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><header class="sticky">
|
|
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
|
</header>
|
|
|
|
<footer class="sticky">
|
|
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
|
</footer></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<li>Sticky headers and footers are compatible with modern browsers, but might not display properly in older browsers. Support is being added over time, so be sure to check out if your target platforms support <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</main></div></div></div>
|
|
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html>
|