Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it's expanded? Secondly, is there a way to move the three-lined menu button to the right side of the screen instead of the left? Lastly, what's the best approach to adding sub-menus to the expandable off-canvas menu that appear on hover?
If you'd like to take a look at the HTML and CSS code, I have shared it on Jsfiddle: https://jsfiddle.net/ghbx6fmn
/*===== SLIDE MENU ======*/
/*---------- HIDE SELECT CHECKBOX ----------*/
.toggle,
.full-screen-close
{
display: none;
}
.full-screen-close
{
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top:0;
left:0;
}
/*---------- TOGGLE OFF-CANVAS MENU ----------*/
.toggle:checked + .container > .menu-container
{
margin-left: 70%;
}
.toggle:checked + .container > .content .full-screen-close
{
display: block;
background: rgba(0,0,0,.5);
}
.menu
{
padding-top: 24px;
}
.toggle-btn,
.close-btn
{
cursor: pointer;
}
.toggle-btn
{
font-size: 2.25rem;
}
.close-btn
{
float: right;
font-size: 1.5rem;
padding: 1.5rem;
color: #ededed;
}
.menu-container,
.content
{
transition: margin 0.5s ease-in-out;
}
.menu-container
{
background: #2c3e50;
width: 40%;
margin-left: 100%;
float: right;
height: 100%;
position: absolute;
z-index:99;
}
.slide-menu i
{
margin-right: 1rem;
font-size: 1.5rem;
vertical-align: middle;
}
.slide-menu li a
{
color: #fff;
padding: 1.5rem;
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 600;
display: block;
transition: background-color .5s ease-in-out;
}
.slide-menu li a:hover
{
background-color: #34495e;
}
/*===== MEDIA QUERIES ======*/
@media (max-width: 460px) {
.slide-menu li a
{
font-size: 0.875rem;
padding-left: 12px;
}
.slide-menu li i
{
font-size: 16px;
}
}
@media (max-width: 320px){
.slide-menu li i
{
display: none;
}
}<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Off-canvas navigation menu Tutorial" />
<meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
<meta name="author" content="AcasA Programming" />
<link rel="icon" href="../../favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/right-slide.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<body>
<input type="checkbox" id="offcanvas-menu" class="toggle" />
<div class="container">
<aside class="menu-container">
<div class="menu-heading clearfix">
<label for="offcanvas-menu" class="close-btn">
<i class="fa fa-times"></i>
</label>
</div><!--end menu-heading-->
<nav class="slide-menu">
<ul>
<li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
<li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
<li><a href="#"><i class="fa fa-cogs"></i>Testing 4</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 5</a></li>
<li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
<li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
</ul>
</nav><!--end slide-menu -->
</aside><!--end menu-container-->
<section class="content">
<label for="offcanvas-menu" class="full-screen-close"></label>
<div class="menu right">
<label for="offcanvas-menu" class="toggle-btn">
<i class="fa fa-bars"></i>
</label>
</div><!--end menu-->
<div class="menu-options clearfix">
<div class="right">
</div>
</div>
<div class="content-body">
</div><!--end content body-->
</section><!--end content-->
</div> <!--end container -->
</body>
</html>