4 May 2016

How to Make a Drop down Nagivation Menu with HTML and CSS


I decided to make a tutorial for how to make a pages bar including a drop down menu because I have only recently made one for my blog and found it to be easier than I expected it to be. Also, I find that when I teach someone else what I have learnt, it tends to stick in my mind a lot better.

This tutorial uses HTML and CSS and is focused on using Blogger, but I've tried to explain everything in simple terms and highlighted and key bits you need to take notice of or any customisable sections.

Adding the HTML:


Get to your Blogger blog page, find the Layout section and click add a gadget, picking the HTML/Javascript option. Now you can copy and paste the code that you see below:

<center>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Categories</a>
     <ul>
           <li><a href="#">Blogging</a></li>
           <li><a href="#">Lifestyle</a></li>
           <li><a href="#">Art</a></li>
    </ul>
</li>

<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
</nav>
</center>

Now you have the code you can customise it with the sections that will be unique to your blog:
  • Yellow: center is the alignment of your menu, it can be either center, left, justify or right, depending on where you want it to appear.
  • Red: this will be the title of each menu item.
  • Orange: this is where you can add the URL of your pages or where you want to go when you click the button.
  • Blue: this whole section is the drop down menu, so in here you'd add all the items you'd want to appear when you hover over the button which I have labelled "Categories" and you'd add the URL's of each of these as well.

Adding the CSS:


Next is for the CSS section of the code. If you are using Blogger, at this point you need to save your widget. Now go to Layout > Template Designer > Advanced > Add CSS. This is where you can easily add any CSS to change your blog's design and see the preview in the window below.

I am not the best at CSS, so here I'm going to redirect you to two other sites where I learnt the CSS for the drop down menu. I found their tutorials very useful and made my own blogs drop down menu with them:

Accessible HTML5/CSS3 dropdown menu without Javascript - Stack Overflow

And you're done:


Hopefully with the help of these three tutorials you have now managed to make and customise your own drop down menu.

Another coding tutorial on my blog: Not Very Obsessed - How to make HTML buttons

Have you got a drop down menu on your blog or website?

image from death to stock