Change the width of a menu

Question

I'm new to this website and I'm quite new to coding. I'm trying to make an off-canvas menu, but encountered three small problems. First, how can I change the width of the menu when it has been expanded? Second, how do I make the three lined menu buttom to be on the right side of the screen instead of on the left side? Third, how can I add sub-menus to the expandable off-canvas menu which open when you hover on it?

I put the html and css codes into a 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>

Open the JavaScript console and update your post with what it says — NoImaginationGuy, May 15 '16 at 14:32
@BryanM. Please do not include the [canvas] tag in your questions. The [canvas] tag refers to the writable drawing element -- not to fly-out menus. Thanks! :-) — markE, May 15 '16 at 19:15

score 0 · Answer 1 · answered May 15 '16 at 19:28

0

Answering to:

Second, how do I make the three lined menu buttom to be on the right side of the screen instead of on the left side?

...just:

.toggle-btn {
    font-size: 2.25rem;
    position: absolute;
    right: 0;
}

answered May 15 '16 at 19:28

Darek

530
3
10

Change the width of a menu

1 Answers1