How to make vertical menu icon lines

vertical menu css
menu icon html
how to create menu in html
menu with icons
responsive navigation menu css
sidebar menu
css menu animation
sidebar html

I need help with making a menu icon that instead of three horizontal lines has three vertical lines that change into X when clicked... like on this website example...

So far my best attempt got me this far... JSFiddle

I need some help making the animation work and making the lines vertical...

My HTML:

<div class="hamburger" id="menu-button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="menu-button_lable">Menu</span>
</div>

My SCSS:

#menu-button {
  position: fixed;
  top: 50%;
  left: 0;
  width              : 60px;
  height             : 45px;
  -webkit-transform  : rotate(0deg);
  -moz-transform     : rotate(0deg);
  -o-transform       : rotate(0deg);
  transform          : rotate(0deg);
  -webkit-transition : .5s ease-in-out;
  -moz-transition    : .5s ease-in-out;
  -o-transition      : .5s ease-in-out;
  transition         : .5s ease-in-out;
  cursor             : pointer;
  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 25px;
    background: #d3531a;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    &:nth-child(1) {
      top                      : 12px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(2) {
      top                      : 18px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(3) {
      top                      : 24px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
  }
  .menu-button_lable {
    font-size: .7857142857rem;
    letter-spacing: .06em;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
    margin-top: 0.75rem;
    font-weight: 500;
    position: relative;
  }
  &.open span {
    &:nth-child(1) {
      -webkit-transform : rotate(45deg);
      -moz-transform    : rotate(45deg);
      -o-transform      : rotate(45deg);
      transform         : rotate(45deg);
      top               : 6px;
      left              : 8px;
    }
    &:nth-child(2) {
      width   : 0;
      opacity : 0;
    }
    &:nth-child(3) {
      -webkit-transform : rotate(-45deg);
      -moz-transform    : rotate(-45deg);
      -o-transform      : rotate(-45deg);
      transform         : rotate(-45deg);
      top               : 24px;
      left              : 8px;
    }
  }
}

and my JS:

$(document).ready(function(){
    $('#nmenu-button').click(function(){
        $(this).toggleClass('is-active');
    });
});

Please see below. Additional CSS added for each line to position it correctly when active.

$(document).on("click", "#menu-button", function() {
  $(this).toggleClass('is-active');
});
#menu-button {
  cursor: pointer;
  position: relative;
  margin-top: 1rem;
}

.line {
  display: block;
  position: absolute;
  height: 2px;
  width: 25px;
  background: #d3531a;
  opacity: 1;
  transform: rotate(90deg);
  transition: .25s ease-in-out;
}

.hamburger .line:nth-child(1) {
  top: 0;
  left: 0;
}
/* Added */
.hamburger.is-active .line:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: left top;
  top: -9px;
  left: 9px;
}

.hamburger .line:nth-child(2) {
  top: 0;
  left: 10px;
}
/* Added */
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}

.hamburger .line:nth-child(3) {
  top: 0;
  left: 20px;
}
/* Added */
.hamburger.is-active .line:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: right top;
  top: -9px;
  left: 1px;
}

.menu-button_lable {
  font-size: .7857142857rem;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  font-weight: 500;
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translate(0, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburger" id="menu-button">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
  <span class="menu-button_lable">Menu</span>
</div>

How to make a vertical line using HTML ?, . Set the list items to display as blocks, and add borders to the left, right and bottom edges of all of the list items. Add a top border to the first list item with the :first-child pseudo-class. Change the a elements to block elements. Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide


Try this code

$(document).ready(function(){
  $('.hamburger').click(function(e){
   	$(".hamburger").toggleClass("is-active");
  });
});
	 #menu-button {
  position: fixed;
  top: 50%;
  left: 0;
  width              : 60px;
  height             : 45px;
  -webkit-transform  : rotate(0deg);
  -moz-transform     : rotate(0deg);
  -o-transform       : rotate(0deg);
  transform          : rotate(0deg);
  -webkit-transition : .5s ease-in-out;
  -moz-transition    : .5s ease-in-out;
  -o-transition      : .5s ease-in-out;
  transition         : .5s ease-in-out;
  cursor             : pointer;
	 }
#menu-button .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 25px;
    background: #d3531a;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
#menu-button .line:nth-child(1) {
      top                      : 12px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
#menu-button .line:nth-child(2) {
      top                      : 18px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
#menu-button .line:nth-child(3) {
      top                      : 24px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }

.menu-button_lable {
    font-size: .7857142857rem;
    letter-spacing: .06em;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
    margin-top: 0.75rem;
    font-weight: 500;
    position: relative;
  }
#menu-button.open span { }
#menu-button.is-active span:nth-child(1) {
      -webkit-transform : rotate(45deg);
      -moz-transform    : rotate(45deg);
      -o-transform      : rotate(45deg);
      transform         : rotate(45deg);
      top               : 6px;
      left              : 8px;
    }
#menu-button.is-active span:nth-child(2) {
      width   : 0;
      opacity : 0;
    }
#menu-button.is-active span:nth-child(3) {
      -webkit-transform : rotate(-45deg);
      -moz-transform    : rotate(-45deg);
      -o-transform      : rotate(-45deg);
      transform         : rotate(-45deg);
      top               : 24px;
      left              : 8px;
    }
 

.line {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 20px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: red;
}
.hamburger{
  cursor:pointer;
}
.menu-button_lable{
 color:red;
 padding-left:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburger" id="menu-button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="menu-button_lable">Menu</span>
</div>

Adding Icons to Menu Items, How do I add an icon to the navigation bar? Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide


This is the style for vertical hamburger.

.hamburger {
  width: 14px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.line {
  display: inline-block;
  width: 2px;
  height: 100%;
  background-color: #000;
  vertical-align: middle;
  text-align: center;
}

.line::before,
.line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #000;
  width: 2px;
}

.line::after {
  right: 0;
}

.line::before {
  left: 0;
}
	<div class="hamburger" id="menu-button">
		<span class="line"></span>
	</div>

A fixed vertical icon menu that adjusts its size for smaller screens. From our sponsor: Divi gives you the power to create spectacular designs with ease. width: 5em; line-height: 5em; text-align: center; color: #999; position:  Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide


It is just a pure css hamburger menu icon which does not require a click event triggering, simple hover will work. To form the "X", I reduced opacity of the .strip.two. rotated, and translated .strip.one & .strip.three to get the "X". If you want you can add click event in which all you have to do is add and remove classes as per your requirement.

    .menuIcon{
      display:inline-block;
      width:2em;
      height:2.2em;
      
    }
    
    .strip{
      width:3px;
      height:2em;
      display:inline-block;
      background:black;
    }
    .menuIcon:hover{
      cursor:pointer;
    }
    
    .menuIcon:hover .strip.two{
      opacity:0;
    }
    .strip.one,.strip.two,.strip.three{transform-origin:50% 50%;transition:all 100ms ease-in-out;}
    .menuIcon:hover .strip.one{
      transform:rotate(45deg) translateY(-0.5em);
    }
    .menuIcon:hover .strip.three{
      transform:rotate(45deg) translateY(-0.5em);
    }
<div class="menuIcon">
  <span class="strip one"></span>
  <span class="strip two"></span>
  <span class="strip three"></span>
</div>

Section Counter Quotes Slideshow Closable List Items Typical Device Breakpoints Draggable HTML Element How TO - Vertical Menu. ❮ Previous Next ❯. Learn how to create a vertical menu with CSS. Vertical Menu How To Create a Vertical Button Group display: block; /* Make the links appear below each other */ Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation


Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  sry misread, yes you can do it on the <a> tag too, same thing accross, line-height = element height, this will make everything align perfectly – Marian Udrea Mar 20 '14 at 21:51 add a comment | 3


The only thing I do notice about the unicode version is that it looks much different on FF (more vertical space between lines) compared to Chrome,  The Downsides of Hamburger Menu. This three line icon is getting a lot of hate lately and it is clear why. The main reason is that it is not transparent enough. When you put items in a hamburger menu, they are less visible and therefore less prominent. This further leads to less user engagement, i.e. fewer clicks on this particular icon.


</button> <ul class="dropdown-menu" additional .row within a .row.row-​cards-pf, do *not* use .row-cards-pf on the nested <span class="card-pf-​utilization-card-details-line-1">Available</span>  A minus sign on first line and 2 ‘large minus’ signs (em dash) on line 2 and 3 looks like a menu, it can be made very easily with characters on all OS. May be 4th line can be added, must see the ‘requirements’