آموزش ساخت sidebar toggle فقط با css

حسین حیاتی

دوشنبه,20 شهریور 1396

<div class="wrapper"> <input type="checkbox" id="menuToggler" class="input-toggler"/> <label for="menuToggler" class="menu-toggler"> <span class="menu-toggler__line"></span> <span class="menu-toggler__line"></span> <span class="menu-toggler__line"></span> </label> </div> <a class="sb-link" href="//silvestarbistrovic.from.hr/en/articles/css-sidebar-toggle/">silvestarbistrovic.from.hr</a>

// variables :root { --toggler-size: 30px; --toggler-line-number: 3; --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1)); --toggler-offset-left: 10px; --toggler-offset-top: 10px; --toggler-color: Tomato; --toggler-color-hover: Tomato; }

// same as var(--toggler-line-number) $total: 3;

// reset * { padding: 0; margin: 0; box-sizing: border-box; }

// styling .menu-toggler { display: block; width: var(--toggler-size); height: var(--toggler-size); position: relative; position: fixed; top: var(--toggler-offset-top); left: var(--toggler-offset-left); cursor: pointer; z-index: 1; }

.menu-toggler__line { height: var(--toggler-line-size); background: var(--toggler-color); position: absolute; border-radius: calc(var(--toggler-line-size) / 2); left: 0; right: 0; transition: all .25s ease-out; $num: 1; @while $num <= $total { &:nth-child(#{$num}) { top: calc(var(--toggler-line-size) * #{$num} + (var(--toggler-line-size) * (#{$num} - 2))); } $num: $num + 1; } }

.input-toggler { position: absolute; left: -100%; &:checked ~ .menu-toggler { .menu-toggler__line:not(:first-child):not(:last-child) { opacity: 0; } .menu-toggler__line:first-child, .menu-toggler__line:last-child { background-color: var(--toggler-color-hover); } .menu-toggler__line:first-child { transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg); } .menu-toggler__line:last-child { transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg); } } }

// sig .wrapper { height: calc(100vh - 50px); }

.sb-link { display: flex; height: 50px; align-content: center; align-items: center; justify-content: center; text-decoration: none; color: #bb5555; transition: background .3s; }

<div class="wrapper"> <input type="checkbox" id="menuToggler" class="input-toggler" value="1" autofocus="true"/> <label for="menuToggler" id="menuTogglerLabel" class="menu-toggler" role="button" aria-pressed="false" aria-expanded="false" aria-label="Navigation button"> <span class="menu-toggler__line"></span> <span class="menu-toggler__line"></span> <span class="menu-toggler__line"></span> </label> <nav id="sidebar" class="sidebar" role="navigation" aria-labelledby="menuTogglerLabel" aria-hidden="true"> <ul id="menubar" class="menu" role="menubar" aria-orientation="vertical"> <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Home</a></li> <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Blog</a></li> <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Portfolio</a></li> <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">About</a></li> <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Contact</a></li> </ul> </nav> <main class="content"> <h1>CSS sidebar toggle</h1> <p>Pure CSS solution for hiding and showing sidebar.</p> </main></div><a class="sb-link" href="//silvestarbistrovic.from.hr/en/articles/css-sidebar-toggle/">silvestarbistrovic.from.hr</a>

:root { --sidebar-width: 100%; --toggler-size: 30px; --toggler-line-number: 3; --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1)); --toggler-offset-left: 10px; --toggler-offset-top: 10px; --toggler-color: Tomato; --toggler-color-hover: Wheat;}* { padding: 0; margin: 0; box-sizing: border-box;}html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 0.8rem;}@media screen and (min-width: 20em) { html { font-size: calc(0.8rem + 0.4 * (100vw - 20em) / 55); }}@media screen and (min-width: 75em) { html { font-size: 1.2rem; }}.wrapper { min-width: 100vw; background: AliceBlue; display: -webkit-box; display: -ms-flexbox; display: flex;}.sidebar,.content { -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}.sidebar { width: var(--sidebar-width); -webkit-transform: translateX(calc(var(--sidebar-width) * -1)); transform: translateX(calc(var(--sidebar-width) * -1)); background: -webkit-linear-gradient(top left, Tomato, Wheat); background: linear-gradient(to bottom right, Tomato, Wheat); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; height: 100vh; opacity: .5;}.content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}.menu { list-style-type: none;}.menu__link { color: white; font-weight: 100; text-decoration: none; font-size: 10vmin; line-height: 15vmin; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}.menu__link:hover, .menu__link:focus, .menu__link:active { color: Gold;}.menu-toggler { border-radius: calc(var(--toggler-line-size) / 2); display: block; width: var(--toggler-size); height: var(--toggler-size); position: fixed; top: var(--toggler-offset-top); left: var(--toggler-offset-left); cursor: pointer; z-index: 1;}.menu-toggler__line { height: var(--toggler-line-size); background: var(--toggler-color); position: absolute; border-radius: calc(var(--toggler-line-size) / 2); left: 0; right: 0; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}.menu-toggler__line:nth-child(1) { top: calc(var(--toggler-line-size) * 1 + (var(--toggler-line-size) * (1 - 2)));}.menu-toggler__line:nth-child(2) { top: calc(var(--toggler-line-size) * 2 + (var(--toggler-line-size) * (2 - 2)));}.menu-toggler__line:nth-child(3) { top: calc(var(--toggler-line-size) * 3 + (var(--toggler-line-size) * (3 - 2)));}.input-toggler { position: absolute; left: -100%;}.input-toggler:focus ~ .menu-toggler { outline: 1px dotted;}.input-toggler:checked ~ .menu-toggler .menu-toggler__line:not(:first-child):not(:last-child) { opacity: 0;}.input-toggler:checked ~ .menu-toggler .menu-toggler__line:first-child,.input-toggler:checked ~ .menu-toggler .menu-toggler__line:last-child { background-color: var(--toggler-color-hover);}.input-toggler:checked ~ .menu-toggler .menu-toggler__line:first-child { -webkit-transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg); transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg);}.input-toggler:checked ~ .menu-toggler .menu-toggler__line:last-child { -webkit-transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg); transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg);}.input-toggler:checked ~ .sidebar { -webkit-transform: translateX(0); transform: translateX(0); opacity: .98;}.wrapper { height: calc(100vh - 50px);}.sb-link { display: -webkit-box; display: -ms-flexbox; display: flex; height: 50px; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; color: #bb5555; -webkit-transition: background .3s; transition: background .3s;}.sb-link:hover,.sb-link:focus,.sb-link:active { background: #f7f7f7;}

'use strict';

var menuToggler = document.getElementById('menuToggler'); var menuTogglerLabel = document.getElementById('menuTogglerLabel'); var sidebar = document.getElementById('sidebar'); var menuItems = document.getElementsByClassName('menu__link');

menuToggler.addEventListener('change', function () { if (menuToggler.checked) { menuTogglerLabel.setAttribute('aria-pressed', 'true'); sidebar.setAttribute('aria-hidden', 'false'); } else { menuTogglerLabel.setAttribute('aria-pressed', 'false'); sidebar.setAttribute('aria-hidden', 'true'); }

for (var _iterator = menuItems, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {if (window.CP.shouldStopExecution(1)){break;} var _ref;

if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; }

var menuItem = _ref;

if (menuToggler.checked) { menuItem.setAttribute('tabindex', '0'); } else { menuItem.setAttribute('tabindex', '-1'); } } window.CP.exitedLoop(1);

});

آموزش ساخت sidebar toggle فقط با css

حسین حیاتی

تو پیشگامیت، میتونی سوالات رو بپرسی و هم میتونی مطلب منتشر کنی.

ثبت یک نظر

ورود / ثبت نام با حساب گوگل

بهترین های ماه

شبکه های اجتماعی ما

مطالب اخیر

Ads

ما را دنبال کنید

برچسب ها