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.
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,
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.
How to Create Drop Down Menu in Blogger
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.
<div class='menu'>
<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 |
The menu class is a set of CSS style sheets which we place in under our </b:skin>. It looks like,
.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;}
2. By adding border radius property to our horizontal menu bar .menu{border-radius:25px;}, we get
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/AVvXsEjA91YnkgrEwUP5YiX78xjIdFF-GaUxVWQXf86g3FYrJVfhY7aTORAA07ba24khIzCO-kP_CarNTKYGFidiexY5kcbpBYs2QhS2UNMsGFvasvd63e-pde-4BuWtbPCcyfNa2LfrnbS6XnEv/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
المشاركات
