Home Web Design CSS CSS Expandable Menu On Click | Expanding Menu Button

CSS Expandable Menu On Click | Expanding Menu Button

June 17, 2019

21477

How we can create an expandable menu using HTML & CSS? Solution: CSS Expandable Menu On Click, Pure CSS Expanding Menu Button.

Maybe you have seen menus with an expandable feature. In my opinion, they are very attractive and unique. I have seen these types of the menu bar on some websites. Most people who focus on create a beautiful UI, they use these types of unique things.

Now question is that how we can create a menu with an expandable feature on click. Well, we can create this using only HTML & CSS. The concept is very easy, but you must have coding logic. If you don’t have good logic in coding, then you can’t create new things also after knowledge of coding.

So, Today I am sharing CSS Expandable Menu On Click. In other words, Menu Expands On Button Click. This menu is built-in Pure CSS & HTML, I did not use JavaScript or other libraries. You don’t believe, this menu is based on HTML checkbox and lists. Process and codes to creating it is very easy and understandable.

If you are thinking now how this menu actually is, Then see the preview given below.

Preview Of Expanding Menubar On Button Click

See this video preview to getting an idea of how this menu looks like.

https://webdevtrick.com/wp-content/uploads/expanding-menu-bar.mp4?_=1

Now you can see this visually. If you like this, then get the source code of its.

CSS Expandable Menu On Click Source Code

Before sharing source code, let’s talk about it. First, I created a checkbox using <input type="checkbox"> for creating the button. I converted the checkbox to circle using border-radius: 50%; (get info). I created 3 spans to creating the menu icon, I did not use any external icon pack because this is a pure CSS concept.

After that, I created a div and put a list of menus inside it using <li>. After clicking on button, the button expands to 500px & the menu list appears because I put absolute position list div. I created the close icon using CSS rotate property, I hide a span using display: none and rotated other two spans in 45 degrees and -45 degrees.

Left other things you will understand after getting the codes. For creating this menu you have to create only 3 files, one for HTML & one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS Expandable Menu | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="main">
  <input type="checkbox">
    <span></span>
    <span></span>
	  <span></span>
    <div class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Design</a></li>
      <li><a href="#">Development</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Contact</a></li>
    </div>
</div>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Expandable Menu | Webdevtrick.com</title>

</head>

<body>

<li><a href="#">Design</a></li>

<li><a href="#">Development</a></li>

<li><a href="#">Contact</a></li>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #FF4D50;
    font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
}
body, .main, .menu {
    display: flex;
    justify-content: center;
    align-items: center;
}
.main {
    position: relative;
    background-color: #fff;
    padding: 20px;
    transition: 0.5s;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0,0,0,.2);
}
.menu {
    margin: 0;
    padding: 0;
    width: 0;
    overflow: hidden;
    transition: 0.5s;
}
.main input:checked ~ .menu {
    width: 500px;
}
.menu li {
    list-style: none;
    margin: 0 10px;
}
.menu li a {
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    transition: 0.5s;
}
.menu li a:hover {
    color: #161919;
}
.main input {
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0;
}
.main span {
    position: absolute;
    left: 30px;
    width: 30px;
    height: 4px;
    border-radius: 50px;
    background-color: #666;
    pointer-events: none;
    transition: 0.5s;
}
.main input:checked ~ span {
    background-color: #FF4D50;
}
.main span:nth-child(2) {
    transform: translateY(-8px);
}
.main input:checked ~ span:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
}
.main span:nth-child(3) {
    transform: translateY(8px);
}
.main input:checked ~ span:nth-child(3) {
    transform: translateY(0) rotate(45deg);
}
.main input:checked ~ span:nth-child(4) {
    display: none;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

body {

margin: 0;

padding: 0;

min-height: 100vh;

background-color: #FF4D50;

font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;

}

body, .main, .menu {

display: flex;

justify-content: center;

align-items: center;

}

.main {

position: relative;

background-color: #fff;

padding: 20px;

transition: 0.5s;

border-radius: 50px;

overflow: hidden;

box-shadow: 0 8px 15px rgba(0,0,0,.2);

}

.menu {

margin: 0;

padding: 0;

width: 0;

overflow: hidden;

transition: 0.5s;

}

.main input:checked ~ .menu {

width: 500px;

}

.menu li {

list-style: none;

margin: 0 10px;

}

.menu li a {

text-decoration: none;

color: #666;

text-transform: uppercase;

font-weight: 600;

transition: 0.5s;

}

.menu li a:hover {

color: #161919;

}

.main input {

width: 40px;

height: 40px;

cursor: pointer;

opacity: 0;

}

.main span {

position: absolute;

left: 30px;

width: 30px;

height: 4px;

border-radius: 50px;

background-color: #666;

pointer-events: none;

transition: 0.5s;

}

.main input:checked ~ span {

background-color: #FF4D50;

}

.main span:nth-child(2) {

transform: translateY(-8px);

}

.main input:checked ~ span:nth-child(2) {

transform: translateY(0) rotate(-45deg);

}

.main span:nth-child(3) {

transform: translateY(8px);

}

.main input:checked ~ span:nth-child(3) {

transform: translateY(0) rotate(45deg);

}

.main input:checked ~ span:nth-child(4) {

display: none;

}

That’s It. Now you have successfully created CSS Expandable Menu On Click. In other words, Menu expands from a button on click. If you have any doubt or question comment down below.

Thanks For Sharing, Keep Sharing.

10 COMMENTS

DARPAN ANEJA June 18, 2019 At 9:03 am

Brother where are you learning this from? Can you please tell? Or are you afraid that somebody will steal your show?

Reply
- shaan June 18, 2019 At 10:56 am
  
  Bro I have joined many developer & designers group on facebook, Most peoples ask for how to create this & this? Then I got a new idea about daily posts. Also, I am doing a part-time job, every day I face a new problem, from there I also get ideas.
  
  Reply
Fauxy June 18, 2019 At 2:45 pm

This is really great but I’ve seen one of your codes in a YouTube channel. Thought you might know. Or maybe it’s just a coincidence.

Reply
- shaan June 18, 2019 At 3:56 pm
  
  Maybe.
  
  Reply
Hviid July 2, 2019 At 2:11 pm

First of, very fine work. Fast and easy to use.

I’ve got a tiny problem thoe… it seems the code does not support Safari? Cant seem to find any flaws in it, perhaps you’ve got a suggestion?

Reply
- shaan July 2, 2019 At 2:15 pm
  
  bro use –webkit– before CSS properties.
  
  Reply
Daniil October 14, 2019 At 5:46 pm

Great job! Can it be built in Bootstrap grid tho, so all the margins and other stuff are responsible?

Reply
Abram Juarbe December 1, 2019 At 4:55 am

This work on Blogger?

Reply
- shaan December 1, 2019 At 5:09 am
  
  yes
  
  Reply
menu1129dslextremecom other - portalrose April 20, 2022 At 10:49 pm

[…] CSS Expandable Menu On Click | Expanding Menu Button […]

Reply