Creating a CSS3 Dropdown Menu – Video Tutorial

Posted in Coding, HTML & CSS, Web Design • Posted on 7 Comments

We have talked a lot about about HTML5 and CSS3 in the past couple of months and today we continue the series of video tutorials with a new addition: creating a CSS3 dropdown menu from scratch. It is extremely easy to do, so don’t be scared.

The video is a bit longer, it runs for about 40 minutes, this is because I have gone into great detail explaining the process so that everyone will understand all of the properties. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.

We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.

The CSS3 Dropdown Menu We’ll be Making

create css3 dropdown menu

As promised, you can check out my previous video tutorial about how to create a responsive website using HTML5 and CSS3. In this tutorial you will learn how to create a website from scratch, and by the end you will have a functional website to boast of. It can also be your way to becoming a freelance web designer and live your dream lifestyle, just like what we do.

Question: How Can You Make this Responsive?

There are different ways on how you can include navigation for mobile devices, but not every one of them work for the users. Some prefer to make their navigation menu responsive by collapsing them under one icon, while others would just line it up evenly (just like 1WD!). How about you? What’s your best bet?

20% exclusive discount on Bluehost – for your hosting needs, because you’re on your way to becoming a successful web designer – and you need this!

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

7 Comments Best Comments First
  • Anthony

    Wednesday, April 17th, 2013 22:54

    5

    Hey,

    After your previous post I have worked the wonders of making my site responsive, big props! It’s ridiculous how much traffic im retaining shown through my bounce rate going down 20%, ridiculous! Anyway as you say there is no css3 for mobiles I’m not going to convert my java dropdowns into this just yet, are you able to let me know when or if there will ever be this function as I am trying hard on reducing my load time on the site :)

    +16
  • Sasha-Shae

    Monday, April 15th, 2013 21:06

    1

    Great tut Christian! I definitely will be attempting this. By chance could you do a tutorial on creating a menu like this one: http://i.imgur.com/DbKMxDm.png but only using CSS/HTML and no jquery or javascipt?

    Specifically the multiple columns with the rounded corners and the imagery and possible videos embedded in the menu like shown in the example. A tutorial or video tutorial would be great and highly appreciated.

    Thanks for providing awesome and quality tutorials and tricks on your site!

    Sincerely,
    Sasha-Shae

    +5
  • Tom Ireland

    Saturday, April 20th, 2013 10:47

    6

    Hi, Christian.

    Once again, great tutorial. I’ll be implementing this on a MODX website that I’m developing. Cheers! Looking forward to the HTML5 contact form tutorial!

    Cheers

    Tom

    +3
  • fati

    Tuesday, April 16th, 2013 21:01

    3

    Love it. Makes me feel like I wish we didn’t still teach JS drop down menus at university… Lol, the comment being too short error came up.. I just wanted to point out I’d much rather use CSS3 than JS! :)

    +2
  • Craig

    Monday, April 15th, 2013 21:21

    2

    I’m confused about what you said in the text of this post…
    “However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.”

    Does this mean that this menu is not going to work in newer IE and mobile browsers? I’m almost at the point where I don’t much care about IE compatibility (only because most of my audience has already ditched it) but I am worried that it works in mobile browsers.

    +2
    • Christian

      Friday, April 26th, 2013 20:25

      7

      Hi Craig, thanks for your comment. Unfortunately it isn’t possible to have dropdown on mobile simply because there is no “mouse hover” feature. Whenever you touch something on a mobile screen, your touch is interpreted as a click. So there is no hover option per se, but in one of my next tutorials I will teach you how to make “dropdown sections” on mobile, so keep following us!

      0
  • Shery-Ann

    Wednesday, April 17th, 2013 15:30

    4

    Hi Chritian
    I incorporate the menu in the html & css3 file document we creaed, added some box shadows and it looks great?
    Great work!!

    -1
  • Tom Ireland

    Saturday, April 20th, 2013 10:47

    6

    Hi, Christian.

    Once again, great tutorial. I’ll be implementing this on a MODX website that I’m developing. Cheers! Looking forward to the HTML5 contact form tutorial!

    Cheers

    Tom

    +3
  • Anthony

    Wednesday, April 17th, 2013 22:54

    5

    Hey,

    After your previous post I have worked the wonders of making my site responsive, big props! It’s ridiculous how much traffic im retaining shown through my bounce rate going down 20%, ridiculous! Anyway as you say there is no css3 for mobiles I’m not going to convert my java dropdowns into this just yet, are you able to let me know when or if there will ever be this function as I am trying hard on reducing my load time on the site :)

    +16
  • Shery-Ann

    Wednesday, April 17th, 2013 15:30

    4

    Hi Chritian
    I incorporate the menu in the html & css3 file document we creaed, added some box shadows and it looks great?
    Great work!!

    -1
  • fati

    Tuesday, April 16th, 2013 21:01

    3

    Love it. Makes me feel like I wish we didn’t still teach JS drop down menus at university… Lol, the comment being too short error came up.. I just wanted to point out I’d much rather use CSS3 than JS! :)

    +2
  • Craig

    Monday, April 15th, 2013 21:21

    2

    I’m confused about what you said in the text of this post…
    “However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.”

    Does this mean that this menu is not going to work in newer IE and mobile browsers? I’m almost at the point where I don’t much care about IE compatibility (only because most of my audience has already ditched it) but I am worried that it works in mobile browsers.

    +2
    • Christian

      Friday, April 26th, 2013 20:25

      7

      Hi Craig, thanks for your comment. Unfortunately it isn’t possible to have dropdown on mobile simply because there is no “mouse hover” feature. Whenever you touch something on a mobile screen, your touch is interpreted as a click. So there is no hover option per se, but in one of my next tutorials I will teach you how to make “dropdown sections” on mobile, so keep following us!

      0
  • Sasha-Shae

    Monday, April 15th, 2013 21:06

    1

    Great tut Christian! I definitely will be attempting this. By chance could you do a tutorial on creating a menu like this one: http://i.imgur.com/DbKMxDm.png but only using CSS/HTML and no jquery or javascipt?

    Specifically the multiple columns with the rounded corners and the imagery and possible videos embedded in the menu like shown in the example. A tutorial or video tutorial would be great and highly appreciated.

    Thanks for providing awesome and quality tutorials and tricks on your site!

    Sincerely,
    Sasha-Shae

    +5

Comments are closed.

54.83.172.112 - unknown - unknown - US