How to Create a CSS3 Pop-Out Menu Without Learning Programming

Posted in Coding, Coding, Tutorials, Tutorials, Web Interface5 months ago • Written by 8 Comments

Modern websites offer a more complex hierarchy of navigation. This navigation sometimes makes user-experience on the website’s menu a bit confusing. Using a CSS3 pop-out menu makes it easier to find your way to what you want on the site quickly. Thanks to CSS3, animation is now possible.

Using CSS3, you can simply hide and unhide an element under other elements. This will not only simplify your code but also makes it  easily updated. This means you can now perform some sliding animation even without the knowledge of programming.

In this tutorial I will show you how to create a metro type menu that hides and unhides the text menu under the icons each time you mouse over it. OK, let’s rock!

Resource You Will Need to Complete This Tutorial:

Our Final Product

final-product

File Structure

file-structure-pop-out-menu

Our file structure will consist of four folders and one HTML file:

  • index.htmlThis will serve as our main file. All of our markup will be utilized using this file
  • img folder – For our images and icons
  • fonts folder –All our additional fonts will be place here and loaded by the CSS file (Note: if you choose another font on Google fonts, there’s no need for this folder)
  • css folder – For our styling (CSS)

Preparing Our Menu Icons

Download the 80 Shades of White Icons. For this tutorial, we’ll be using the following icons.

  • Home icon
  • User icon
  • Portfolio icon
  • Chat icon
  • Envelope icon

Using these icons, we’ll be creating a sprite image for the icons of our menu.

First, drag the Home icon on a new Photoshop file. Then go to Image -> Canvas Size and then add another 16px width on the left side. Make sure that the anchors are pointing to the right.

pointing

After that, place the User icon to the right side. Make sure you align them to the right properly. You can do this by pressing Ctrl – A on your keyboard and clicking the align right edges button on the Align panel.

align-right

icons-side

Next, repeat the same process for the rest of the icons and then finally save it as a png file.

next

The HTML Markup

For our HTML file, we will first add the HTML5 doctype and series of links in our head section. This will include our CSS link files.


<meta charset="utf-8" />
CSS3 Pop Out Menu
      			<link href="css/normalize.css" rel="stylesheet" />
      			<link href="css/style.css" rel="stylesheet" media="screen" />

The menu elements are wrapped inside an unordered list. Each element has a class of box, followed by an anchor tag, span icons and an H2 tag (for the title of the element). All of our menu is wrapped in a container class.

</pre>
<div class="container">
<ul class="icon-menu">
	<li class="icon-box home"><a href="#">
</a>
<h2>Home</h2>
<a href="#">
 </a></li>
	<li class="icon-box aboutme"><a href="#">
</a>
<h2>About Me</h2>
<a href="#">
 </a></li>
	<li class="icon-box portfolio"><a href="#">
</a>
<h2>Portfolio</h2>
<a href="#">
 </a></li>
	<li class="icon-box blog"><a href="#">
</a>
<h2>Blog</h2>
<a href="#">
 </a></li>
	<li class="icon-box contact"><a href="#">
</a>
<h2>Contact</h2>
<a href="#">
 </a></li>
</ul>

After we set up our HTML markup, we should have something like this.

htmls

The CSS

Now it’s time for our pop-out menu to shine. First, let’s import the font that we’ll be using on our menu elements and titles.

@font-face
{
	font-family: Museo500-Regular;
	src: url('../fonts/Museo500-Regular.otf');
}

Let’s now add the styles for our general settings. First we will add a background with hexadecimal color of #263544 and a font face of Museo 500. And then, we will also set some styles for our anchor and H2 tags.

body {background: #263544; font-family: Museo500-Regular;}
a{text-decoration: none;}
h2 {color: #fff; font-size: 22px; margin: 0 24px;}

Next, let’s add some styles to our icon boxes where we will be hiding our text menu. Using the unordered list, let’s style the class icon-menu to hold all of our icon menu.

Then, let’s style the class icon-box and give it a dimension of 120px x 120px. Now let’s use the menu name as its class to manipulate the background color of each box according to its title.


ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}

After that, let’s also set the positions of our menu icons using our sprite images. We will use the span tag and attach the icon class name to it and manipulate its position.

span.icon {display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 45px;}
span.icon.home {background-position: 0px 0px;}
span.icon.aboutme {background-position: -36px 0px;}
span.icon.portfolio {background-position: -72px 0px;}
span.icon.blog {background-position: -109px 0px;}
span.icon.contact {background-position: -145px 0px;}

For our menu name, we will use the H2 tags as our anchor tag and and we’ll set the position to absolute and then push it to the left. Using the style method z-index, we will hide the menu under its menu icon and box.

Using the transition attribute, we can add an effect when changing from one style to another without using Flash animations or JavaScript. This means each time the user mouses-over the icons, it will change its position to the right by adding a margin value to its left with smooth animation.


.icon-box.home h2 {
	 z-index: -999;
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 background: #E74C3C;
	 line-height: 120px;
	 width: 120px;
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
		border-left: 3px solid #a7382d;

}

.icon-box.home a:hover h2 {
	opacity: 1; left: 120px; margin: 0;
	text-align: center;

}

.icon-box.aboutme h2 {
	 z-index: -999;
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 background: #1dd0ad;
	 line-height: 120px;
	 width: 120px;
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
    border-left: 3px solid #0d866e;
}

.icon-box.aboutme a:hover h2 {
	opacity: 1; left: 120px; margin: 0;
	text-align: center;

}

.icon-box.portfolio h2 {
	 z-index: -999;
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 background: #3498db;
	 line-height: 120px;
	 width: 120px;
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #2177b1;
}

.icon-box.portfolio a:hover h2 {
	opacity: 1; left: 120px; margin: 0;
	text-align: center;

}

.icon-box.blog h2 {
	 z-index: -999;
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 background: #f1c40f;
	 line-height: 120px;
	 width: 120px;
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #b8960e;
}

.icon-box.blog a:hover h2 {
	opacity: 1; left: 120px; margin: 0;
	text-align: center;

}

.icon-box.contact h2 {
	 z-index: -999;
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 background: #f39c12;
	 line-height: 120px;
	 width: 120px;
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #bc780d;
}

.icon-box.contact a:hover h2 {
	opacity: 1; left: 120px; margin: 0;
	text-align: center;

}

And I think that’s it! By this you’ll have the same output like the one you see on our finish product above.

Final Words

Using CSS3 has a lot of advantages. What you can’t do before, like animations, can now be possible without the use of JavaScript. This tutorial is an example how you can perform simple mouse over animations while hiding an element from another element without the skills of programming. Hope you’ve enjoyed and learned something for this tutorial. See you again next time! Cheers!

34 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

8 Comments Best Comments First
  • Jack

    Saturday, March 15th, 2014 11:51

    5

    May i use that source?

    +1
    • Sam Norton

      Sunday, March 16th, 2014 23:45

      6

      Hi jack, yes feel free to use it. :)

      +1
  • Lisa-Marie Karvonen

    Friday, March 7th, 2014 05:42

    1

    Great tutorial. The sprite sizes you mentioned don’t fit in with the final CSS though so you may want to look that over. Also the icons come as 16×16 and for the final result to look like yours they should be 32×32 so I changed the images and CSS a bit and now it’s working and looks the same as your demo. Thanks for posting this though and with a few tweaks hopefully the sprite image will be clearer to other people. Cheers!

    +1
  • Mufaddal

    Sunday, March 9th, 2014 01:16

    2

    Nice tutorial Sam, It would be great if you can provide a demo link and source file to download. It would be helpful to use and play around with code.

    Thanks

    0
  • Bucur

    Tuesday, March 18th, 2014 03:42

    7

    Very good tutorial. CSS 3 is fantastic …

    0
  • djot

    Tuesday, March 18th, 2014 06:55

    8

    The website title of the demo page (http://1stwebdesigner.com/demos/pop-out/) is “JQuery Slide Out Menu”, which is incorrect, because it’s NOT jQuery based.

    0
  • Sohil Memon

    Thursday, March 13th, 2014 00:22

    3

    Hello Sam,
    No doubt, the tutorial is nice but you should have given the demo link because as the title say “You can make it without learning programming”, so how would non-programmer will understand what is it. By the thanks for the tutorial.

    -2
    • Sam Norton

      Thursday, March 13th, 2014 21:45

      4

      Hi Sohil. The project files and the demo link can be found below the final product image. Hope you like it. Thanks! :)

      0
  • djot

    Tuesday, March 18th, 2014 06:55

    8

    The website title of the demo page (http://1stwebdesigner.com/demos/pop-out/) is “JQuery Slide Out Menu”, which is incorrect, because it’s NOT jQuery based.

    0
  • Bucur

    Tuesday, March 18th, 2014 03:42

    7

    Very good tutorial. CSS 3 is fantastic …

    0
  • Jack

    Saturday, March 15th, 2014 11:51

    5

    May i use that source?

    +1
    • Sam Norton

      Sunday, March 16th, 2014 23:45

      6

      Hi jack, yes feel free to use it. :)

      +1
  • Sohil Memon

    Thursday, March 13th, 2014 00:22

    3

    Hello Sam,
    No doubt, the tutorial is nice but you should have given the demo link because as the title say “You can make it without learning programming”, so how would non-programmer will understand what is it. By the thanks for the tutorial.

    -2
    • Sam Norton

      Thursday, March 13th, 2014 21:45

      4

      Hi Sohil. The project files and the demo link can be found below the final product image. Hope you like it. Thanks! :)

      0
  • Mufaddal

    Sunday, March 9th, 2014 01:16

    2

    Nice tutorial Sam, It would be great if you can provide a demo link and source file to download. It would be helpful to use and play around with code.

    Thanks

    0
  • Lisa-Marie Karvonen

    Friday, March 7th, 2014 05:42

    1

    Great tutorial. The sprite sizes you mentioned don’t fit in with the final CSS though so you may want to look that over. Also the icons come as 16×16 and for the final result to look like yours they should be 32×32 so I changed the images and CSS a bit and now it’s working and looks the same as your demo. Thanks for posting this though and with a few tweaks hopefully the sprite image will be clearer to other people. Cheers!

    +1

Comments are closed.

54.83.224.203 - unknown - unknown - US