Got My Book

On months that there is a 5th Monday, I will be publishing a Tutorial in place of one of "My Musings." Topics will include things I learned how to do while redesigning my blog. I will also include other topics of interest to bloggers and readers.

How To: Create or Improve a Menu Bar

I would like to thank Marylou @ As the page turns for helpful comments on my post Introducing GMB 1.0. She also asked for some tutorials on my design upgrades. As I told her, it will take a bit of time to prepare something about the sidebar (since my code is still very messy) but here is the one for the Menu bar above. (Note: the Indexes & Cybils buttons are the ones with the drop-downs.)

I must start with: I am NOT a programmer. I took an HTML class during the time of the dinosaurs, but haven't done much with it since that time. And although I had heard of CSS & had a vague idea of its purpose, I knew nothing concrete about it before starting this blog.

This means that I get by through Googling and LOTS of trial and error. It also means that my code is by no means clean or optimized. So, if you actually know what you are doing, feel free to comment with additions or corrections.

My Navigation bar was initially based on the following two tutorials - Building an Interactive Navigation Bar and Create A Hoverable Dropdown which I mashed together and then just kept doing the trial and error thing until it worked.

Obviously, the code here would give you a navigation bar that matches my colors and styles. The rest of this tutorial will cover how to redesign it, so you can stop if you already know how to do that.

Customizing the HTML

Again, this part is very easy. You start with a =ul> and =/ul> and inside it:

• put 1 instance of the following for each button you want to go straight to a specific page

=li>
=a href="URL">Button Name=/a>

=/li>

• and use this section for any drop down menus

=li class="dropdown">
=a href="#" class="dropbtn">Button name=/a>
=div class="dropdown-content">
=a href="URL">Option Name=/a>
=/div>

=/li>

Customizing the CSS

Since I can't (or to be truthful, don't want to) go over every element, these are the just highlights (in order they appear above). You will also want to look at the font-size and all the color options for sure.

nav ul li: width = the percentage of the bar's full width that each button should take up (so divide 100 by the number of buttons you plan to have). If you add or subtract a button, this needs to be updated / border-radius: This is how I rounded the corners. You can delete it entirely if you don't want that effect.

.dropdown-content: min-width: this is how wide your drop down menu will be. You can increase or decrease it as much as you want to fit the options, but if you have more than one dropdown, it needs to work for all of them.

 Please feel free to ask me any questions. I will try to answer them.

Talk to Me (pretty please)

• Is there anything you have seen on my blog that you want to know how to do?
• Where do you think is the best place to position a nav bar - above the header or below?
• What do you think of the nav bars that float as you scroll down?

--

• If you are a first time visitor, how did you discover my blog?

RELATED POST:

This week's tutorial will be linked up with the following (hover for descriptions):