Horizontal menus are very important for navigation in a web page or a blog. It creates a professional look making it easy for the readers to browse the topic they want in a simple and effective way. Below are three ways in creating your first horizontal menu bar for blogger blogs.
The most common menu used in bloggers is "Page Menu" which is done by dragging your Page widget on top of your blog post widget.
1- Create an horizontal navigation bar using Page widget
The most common menu used in bloggers is "Page Menu" which is done by dragging your Page widget on top of your blog post widget.
My poetry blog uses "Page Widget" as its menu layout and looks like,
 |
| Horizontal Menu Blogger |
But the main draw back of using the Page menu is that it cannot have a drop down lists. To make an horizontal menu with drop down lists, you need to construct some HTML or CSS codes and then embed them either in your Edit HTML of your blog template or embed it in a HTML blogger gadget.
2- Create an horizontal navigation bar using Edit HTML of Blog
The below steps is your guide in helping you build your own custom widget for blogger menu. You have 10 different examples exploring the options to play with your menu widget and its layout.
The common link scheme looks like below where link 1, link 2 are normal links (parent links) and link4, link5 are drop down menus(child links) for link3. The red colored ones are the child links which gives our drop down lists.
<li><a href='link1'>Link1 </a></li>
<li><a href='link2'> Link2</a></li>
<li><a href='link3'>Link3 </a>
<ul>
<li><a href='link4'> Link4</a></li>
<li><a href='link5'> Link5</a> </li>
</ul>
</li>
</ul
</div>
The above link scheme is generally placed in the <body> section of your Edit HTML codes under <div id='header-wrapper'> in between <div class='menu'> ...</div> , where we call the style class named "menu".
 |
| Horizontal Menu Blogger |
.menu{font-size:12px;border-bottom:3px solid #6bd;border-top:1px solid #DDD;margin:0 0 7px 7px;padding:0;} .menu ul{height:30px;list-style:none;margin:0;} .menu li a{border-right:1px solid #DDD;display:block;line-height:30px;text-align:center;text-decoration:none;padding-left:15px;padding-right:15px;margin:0;} .menu li a:hover,.menu ul li:hover a{background:#6bd;color:#222;text-decoration:none;} .menu li ul{display:none;height:auto;border:0;position:absolute;width:225px;z-index:200;margin:0;padding:0;} .menu li:hover ul{display:block;} .menu li li{border-bottom:1px solid #dedbd1;display:block;float:none;width:225px;margin:0;padding:0;} .menu li ul a{display:block;height:30px;font-size:12px;font-style:normal;text-align:left;margin:0;padding:0 10px 0 15px;} .menu li ul a:hover,.menu li ul li:hover a{background:#2580a2;border:0;color:#fff;text-decoration:none;} .menu p{clear:left;} .left,.menu li{float:left;}
where we set attributes for our <ul>, <li> like its font size, height, border, appearance of drop down lists, link color, background, etc.
You can play with the properties and personalize your own horizontal menu. I had come with few interesting looks with minimal lines and understandable codes which you need to add to the above main codes (see inside the grey box above).
Few examples are,
1. Setting the display by adding inline property to the horizontal menu bar, .menu li li{display:inline;} and .menu li ul a{display:inline-table;}
3. Adding a background color to the menu as .menu{border-radius:25px;background:#CEF6F5;}, we can make our horizontal bar more appealing,
4. Adding the box shadow property to our horizontal menu bar, .menu{box-shadow: 10px 10px 5px #888888;}, we get
5. Adding color and border-style attribute to the horizontal menu bar property, .menu{border-radius:25px; background:#FFFF99;border-style:dotted solid;} we get
6. Now we can try making it more appealing by changing the gradient by adding the following property to menu , .menu {background: -webkit-radial-gradient(#99FFCC,#FFFF99,#99FFCC);}
7. Lets try by changing the background image of the menu by adding the image URL to the menu property
.menu{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDQZ_LzfRdPjHHsnWbOrBJdMfdhdUynhS7CM4XZsFgqq0THUgC7C-hYGN4gTKrawfycWhdhC48xPoONCgNU63ZyGwTI3KeJwRdOktkdnx67IZvWqp8oOZ_GhuHmiixdE_8thyphenhyphen36z2plzAe/w1013-h185-no/win123.png');}
8. And finally we can try changing the look of the horizontal border with changing the border radius property and by making menu borders to zero we get,
.menu{border-bottom:0px; border-top:0px;}
.menu li a{border-bottom-right-radius:1em;border-bottom-left-radius:1em; }
9. Adding the following border,text and color attribute to these menu property,
.menu li a:hover,.menu ul li:hover a{background:#C8C8C8;}
.menu li ul a:hover,.menu li ul li:hover a{background:#808080;}
10. Adding more properties and attributes to menu,
.menu{border-bottom:0px;border-top:0px}
.menu li a{border:1px ridge #DB7C08;
text-shadow:0px -2px 1px #E4C31F,0px -1px 1px #E4C31d; font-size:16px;
-moz-border-radius:20px 0px 20px 0px;
-webkit-border-radius:20px 0px 20px 0px;
border-radius:20px 0px 20px 0px; color:#5F5F60;
-moz-box-shadow:6px 0px 0px 0px #DBB408;
-webkit-box-shadow:6px 0px 0px 0px #DBB408;
box-shadow:6px 0px 0px 0px #DBB408; background:#EED51C;
background:-webkit-gradient(linear,left top,left bottom,from(#EED51C),to(#E8C84B));
background:-webkit-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-moz-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-o-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:-ms-linear-gradient(top,#EED51C 0%,#E8C84B 100%);
background:linear-gradient(top,#EED51C 0%,#E8C84B 100%);
-moz-transition:all 0.6s ease-out;
-webkit-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out; transition:all 0.6s ease-out;}
.menu li a:hover,.menu ul li:hover a{background:#DDD;font-size:12px;}
3-Create Horizontal Drop Down Menu Bar using HTML/JavaScript Gadget in Blogger
Blog Layout -> Add a Gadget -> HTML/JavaScript
In the gadget, just add your link scheme by adding your parent links and child links (see above) and save your arrangement.
Note: Both the ways above (2) and (3) gives the same result for the menu.
Hope you learnt the basics of horizontal menu creation.Just experiment with the colors, font size, display properties, etc using W3schools website as your reference sheet and create your own unique horizontal menu for your blogger blog. If you have enjoyed this post, do subscribe to my blog for more useful blogger tips :)
PS: Thank you Bhawya of Bhawish's Kitchen for requesting me to write this post about Horizontal Drop Down Menu
very useful:-)
ReplyDeleteThank you for sharing this post :)
ReplyDeleteI was searching for this sooo long..
And i never knew that we could change the color and border.. Gonna try this in my blog :)
Useful post, you are going to be thanked by so many, lets begin with me?
ReplyDeletethank you
that's very informative. Will try this :) thanks
ReplyDeletea very useful post .. :) .. i just wished if you would have added the Jquery responsive menu bar .. many more would have been benefited .. :)
ReplyDeleteThanks for sharing this very useful post Uma, this is definitely come in handy for me.
ReplyDeleteI am a dummy when it comes to anything remotely IT....and this is something I have been wanting to do for a very long time.....this is very very helpful...let me try it out and see if i can do it...i'll get back to you if i can't!!
ReplyDeleteInformative and useful... in fact I wanted to add the horizontal bar on my blog page. Let me try out. Thanks for sharing.
ReplyDeletenice post with colorful menu bars
ReplyDeletethank you
ReplyDeleteyou safe my day
(h) (h) (h) (h)
The good thing about this navigation menu is, It is fast loading and designed in such a way that it will surely increase conversion optimization of my blog. I will be glad to use it for my blog. Thanks for sharing this ultimate piece.
ReplyDeleteThanks for sharing, it is very helpful :D
ReplyDelete