Multiple Off-Canvas Asides

Developer
Chris Evans
Size
6,886 Kb
Views
10,120
  1. Multiple Off-Canvas Asides Previews
  2. Multiple Off-Canvas Asides HTML Codes
  3. Multiple Off-Canvas Asides CSS Codes
  4. Multiple Off-Canvas Asides JS Codes

How do I make an multiple off-canvas asides?

What is a multiple off-canvas asides? How do you make a multiple off-canvas asides? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.

Multiple Off-Canvas Asides Previews
IQ Test

Multiple Off-Canvas Asides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multiple Off-Canvas Asides</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Open-Sans" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<nav class="top-bar"> <div class="collapse hidden"><a class="material-icons" id="notification" href="javascript:;">notifications</a><a class="material-icons" id="menu" href="javascript:;">menu</a></div>
</nav>
<nav class="side-bar primary hidden"> <ul class="slide"> <li style="background-color:#78b7c5;color: white"> <p style="text-align:center;color: white"><i class="material-icons" style="font-size:42px">person_pin</i><br/>Chris Evans<br/><small>Administrator</small></p> </li> <li><a href="#"><i class="material-icons">dashboard</i> Dashboard</a></li> <li><a href="#"><i class="material-icons">history</i> History </a></li> <li><a href="#"><i class="material-icons">settings</i> Settings</a></li> </ul>
</nav>
<nav class="side-bar subordinate hidden"> <ul> <li><a href="#"> Account Settings</a></li> <li><a href="#"> Permissions</a></li> </ul>
</nav>
<nav class="side-bar secondary hidden"></nav>
<div class="container"> <h1>Navigation</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper auctor mauris nec consequat. Quisque maximus mauris erat, non fermentum quam iaculis tristique. Aenean consequat, arcu id tempor luctus, mauris eros elementum orci, et maximus orci eros eu neque. Phasellus vestibulum, arcu vitae vestibulum maximus, urna quam faucibus enim, ac sollicitudin nunc massa vel tellus. Nulla nec interdum arcu, at dapibus metus. Maecenas varius nulla nulla, quis gravida velit pretium nec. Nam vitae erat dolor. Nunc congue ipsum a lacinia congue. In sapien dui, ullamcorper eu vestibulum quis, luctus vel mi.</p> <p>Suspendisse vitae erat volutpat tortor luctus tincidunt. Ut neque odio, faucibus in lacus vitae, faucibus mattis erat. Aenean luctus felis eu hendrerit rutrum. Fusce ac tellus scelerisque, laoreet sem eget, laoreet eros. Quisque nulla augue, venenatis eget tempor vitae, bibendum sed nunc. Cras risus diam, mollis quis dui non, malesuada condimentum ante. In hac habitasse platea dictumst. Pellentesque eget arcu justo. Phasellus augue orci, feugiat nec risus in, rhoncus feugiat lectus. Nunc sed nunc magna. Duis id vestibulum enim. Etiam ut eros dapibus, semper velit non, viverra nibh. Duis ornare ornare mauris non commodo. Fusce aliquam rhoncus elit a porta. Vestibulum vulputate odio leo, dictum sollicitudin ex hendrerit eu. In vitae sodales nulla.</p> <p>Suspendisse lobortis ex et nulla efficitur varius. Suspendisse condimentum risus eleifend tempor auctor. Integer congue faucibus nunc a congue. Nunc condimentum, lacus a vehicula iaculis, lectus enim ultricies lacus, at pretium eros dolor vitae mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fringilla leo vitae ligula vehicula, et convallis dui sagittis. Suspendisse sagittis, lectus pulvinar ullamcorper porttitor, tortor mauris imperdiet lorem, eget pharetra erat lectus id eros. Maecenas nec ante orci. Cras bibendum posuere mi. Cras odio ligula, scelerisque vel urna dapibus, pharetra scelerisque tellus. Sed ac eros posuere, tincidunt ante eu, bibendum nisi. Maecenas at ultrices sapien. Ut mattis lorem quis tellus faucibus, quis pellentesque nisi imperdiet. Donec vehicula tincidunt turpis, non sagittis nisl gravida sit amet.</p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multiple Off-Canvas Asides - Script Codes CSS Codes

html,
body { min-height: 100%;
}
body { font-family: 'Open Sans', sans-serif; background-color: #BBB;
}
h1,
p { color: #3c3c3c;
}
h1 { font-weight: 700;
}
h1::first-letter { font-size: 2em;
}
a { text-decoration: none; color: #007F9A; transition: color .5s;
}
nav.top-bar { position: fixed; top: 0; left: 0; width: 100%; background: #EFEFEF; border-bottom: 1px solid #afafaf; height: 60px;
}
nav.top-bar > .collapse { padding: 1em 1.5em; text-align: right; width: 17.5%; float: right; background-size: 200% 100%; background-position: -100% 0; border-bottom: 1px solid #afafaf; height: calc(60px - 2em); transition: background-position .5s;
}
nav.top-bar > .collapse > a { color: #FFF;
}
nav.top-bar > .collapse.primary { background-image: linear-gradient(90deg, #EFEFEF 0%, #EFEFEF 50%, #78b7c5 50%);
}
nav.top-bar > .collapse.secondary { background-image: linear-gradient(90deg, #EFEFEF 0%, #EFEFEF 50%, #a89bb0 50%);
}
nav.top-bar > .collapse a { margin: 0 0.5em;
}
nav.top-bar > .collapse.hidden { transition: background-position .5s; background-position: -200% 0;
}
nav.top-bar > .collapse.hidden > a { color: #007F9A;
}
nav.side-bar { position: fixed; top: 60px; right: 0; display: block; height: 100%; width: 17.5%; transition-property: right; transition-duration: .5s; padding: 1.5em;
}
nav.side-bar.hidden { right: calc(-17.5% - 3em);
}
nav.side-bar.primary { background: #007F9A;
}
nav.side-bar.subordinate { background: #3c9baf; right: -70px;
}
nav.side-bar.subordinate.hidden { right: calc(-17.5% - 3em);
}
nav.side-bar.subordinate:after, nav.side-bar.subordinate::after { content: ''; position: absolute; top: 250px; left: 0; height: 0; border: 20px solid transparent; border-left: 20px solid #007F9A;
}
nav.side-bar.subordinate ul li { box-sizing: border-box;
}
nav.side-bar.subordinate ul li a { padding-left: 70px;
}
nav.side-bar.subordinate ul li a:hover { color: #007F9A; background-color: #EFEFEF;
}
nav.side-bar.secondary { background: #604671;
}
nav.side-bar ul { list-style: none; margin: -1.5em; padding: 0;
}
nav.side-bar ul li { box-sizing: border-box; padding: 1.5em; width: 100%; transition: transform .5s ease; transform: translate3d(100%, 0, 0);
}
nav.side-bar ul li a { display: block; color: #FFF; width: 100%; height: 100%; margin: -1.5em; padding: 1.5em; font-weight: 700; transition: background-color 250ms;
}
nav.side-bar ul li a:hover { color: #007F9A; background-color: #EFEFEF;
}
nav.side-bar ul li a .material-icons { transform: translateY(25%); margin-right: 1em;
}
nav.side-bar ul li.a { transform: translate3d(0, 0, 0);
}
.container { display: block; padding: 1em; padding-top: 120px; width: 60%; margin: 0 auto;
}

Multiple Off-Canvas Asides - Script Codes JS Codes

(function(undefined) { 'use strict'; var $navigation = $('nav.top-bar .collapse'); $('a.material-icons#menu').on('click', function() { var $element = $('nav.side-bar.primary'), $class = 'primary'; if ($element.hasClass('hidden')) { toggleSideNavigation($element, $class); } else { hideSideNavigation($element, $class); } $element.find('ul li').each(function() { var t = $(this); t.on('click', function() { toggleSideNavigation($('nav.side-bar.subordinate'), $class, true); }); }); }); $('a.material-icons#notification').on('click', function() { var $element = $('nav.side-bar.secondary'), $class = 'secondary'; if ($element.hasClass('hidden')) toggleSideNavigation($element, $class); else hideSideNavigation($element, $class); }); function toggleSideNavigation($element, $class, $preserve) { var $collapsables = $('nav.side-bar').not('.hidden'), $interval = 0; if ($collapsables.length > 0 && !$preserve) { $interval = 500; $collapsables.toggleClass('hidden'); $collapsables.find('ul li').each(function(i) { var t = $(this); t.removeClass('a'); }); } if (!$navigation.hasClass('hidden')) $navigation.toggleClass('hidden'); window.setTimeout(function() { hideSideNavigation($element, $class); $navigation.toggleClass('hidden'); $element.find('ul li').each(function(i) { var t = $(this); setTimeout(function() { t.toggleClass('a'); }, (i + 1) * 100); }); }, $interval); }; function hideSideNavigation($element, $class) { if (!$element.hasClass('subordinate')) $('nav.side-bar.subordinate').not('.hidden').toggleClass('hidden'); $navigation .attr('class', 'collapse hidden ' + $class); $element.toggleClass('hidden'); $element.find('ul li').each(function(i) { var t = $(this); t.removeClass('a'); }); };
})()
Multiple Off-Canvas Asides - Script Codes
Multiple Off-Canvas Asides - Script Codes
Home Page Home
Developer Chris Evans
Username anitorious
Uploaded December 27, 2022
Rating 3
Size 6,886 Kb
Views 10,120
Do you need developer help for Multiple Off-Canvas Asides?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Evans (anitorious) Script Codes
Name
Searching for Answers
Solar System
Natural Form Editing
Guidance Tooltip
3D Interface
Dashboard Widgets
CSS Coupon
CSS Grid Sandbox
Loading Indicator - CSS3 Animation
Strengths Profile Dashboard Menu
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!