Responsive HTML5 Navigation with Drop Down Bars

In this video tutorial we’ll make a fully responsive HTML5 navigation! Our navigation will flex from a horizontal layout to one with vertical bars to give users an easy way to select pages of the website once it’s sized down to a smart phone or tablet.

This CSS drop down menu is a starter template to a fictitious painting company called “Harry’s Painting”. Below is the video tutorial followed by a download link that will bring you ten minutes and thirty-five seconds into the video so your ready to code the navigation.

4 replies
  1. Mangesh Sawant
    Mangesh Sawant says:

    I want to develop my responsive website. I found your tutorial very helpful. I am using Dreamweaver CS6. Do you have a tutorial wherein you show how to have drop down menu ? For example if my website will have multiple products, then on the products there will be drop down of those multiple products and also those multiple products may have a sub-menu. I am not yet able to get those tutorial and hence decided to write to you. Could you please guide with a detailed tutorial if feasible in dreamweaver of how to develop a responsive website with dropdown menu ?

    • Drew Ryan
      Drew Ryan says:

      Hey Mangesh, sorry for such a late reply! I will be making dream weaver CS6 videos in the future that include a fully responsive website including the navigation. If you like, please subscribe and I’ll update you when it comes out!

    • Drew Ryan
      Drew Ryan says:

      Hey Stafano, sorry about that, I was changing the download and just saw your comment. Now there is a downloadable link that brings you to the CSS menu part of the video.

Comments are closed.