HTML5 and CSS3 have totally revolutionized the designing and development. Now designers and web developers are capable of creating more functional and visually appealing websites because HTML5 and CSS3 offer many features and several techniques with which you can create interesting and creative websites. Both of these languages are easy to use and manage and allow users to create loads of amazing effects and appealing looks for their websites. Web interface is its navigation, Remember that the menu of your website needs to be visually appealing and at the same time simple enough for your users to easily navigate through your website or blog!. We always try to be very creative when it comes to designing a website navigation menu. It’s a important thing: a super cool navigation menu can really enhance your website. That being said, The navigation are supported in most major web browsers and will be functional on updated browsers. In this menu you can see little 3d effect when mouse over on Categories.
Preview In Different Browser’s
Chrome Preview
Firefox Preview
Internet Explorer Preview
Now Let's Start Adding Menu To Your Blog
1. Go to your Blogger Dashboard>> Template>> Edit HTML
2. and Look for the following code in your HTML.
]]></b:skin>
3. Paste the following code immediately above(before) it:
#css3_menu {
width: 960px;
margin: 0px auto;
border: 1px solid #333;
border-top:none!important;
background-color: #333;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#css3_menu, #css3_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#css3_menu:before,
#css3_menu:after {
content: "";
display: table;
}
#css3_menu:after {
clear: both;
}
#css3_menu li {
float: left;
border-right: 1px solid #111;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#css3_menu a {
float: left;
padding: 15px 30px;
color: #979797;
letter-spacing: 4;
text-transform:inherit;
font-family: Verdana, Helvetica;
font-size: 14px;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#css3_menu li a:hover {
background: #333;
}
#css3_menu li:hover > a {
color: #fafafa;
}
*html #css3_menu li a:hover { /* IE6 only */
color: #fafafa;
}
#css3_menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 47px;
left: 0;
z-index: 1;
background: #333;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#css3_menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#css3_menu ul ul {
top: 0;
left: 174px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(210,210,210,.2);
-webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2);
box-shadow: -1px 0 0 rgba(210,210,210,.2);
}
#css3_menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#css3_menu ul a {
padding: 12px;
width: 150px;
color: #979797;
_height: 12px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#css3_menu ul a:hover {
background-color:#3d3d3d;
color: #fff;
}
4. Click save button and you are done first step.
Note:- If this style sheet doesn't work fine with your template. before adding this menu in your template completely remove your previous menu.
The code worked flawlessly!. If you have any problem or you want to change the background color font color or anything else just leave your comment with your requirement. We are ready for help 24/7.
Adding The Widget To A Blog
1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
2. Copy the HTML link and paste it inside the content box.
<ul id="css3_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blogger</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Plugin</a>
<ul>
<li> <a href="#">Facebook</a></li>
<li> <a href="#">Twitter</a></li>
<li> <a href="#">Pinterest</a></li>
<li> <a href="#">Google Plus</a></li>
<li> <a href="#">Adsense</a></li>
<li> <a href="#">Custom</a>
<ul>
<li> <a href="#">Hello Bar</a></li>
<li> <a href="#">Earning Boster</a></li>
<li> <a href="#">Clock</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tips Tricks</a></li>
<li><a href="#">Blogger News</a></li>
<li><a href="#">Blogger Help</a></li>
</ul>
</li>
<li><a href="#">Template</a>
<ul>
<li><a href="#">Blogger</a>
<ul>
<li><a href="#">By Column</a>
<ul>
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
</ul>
</li>
<li><a href="#">By Color</a>
<ul>
<li><a href="#">Red</a></li>
<li><a href="#">Blue</a></li>
<li><a href="#">Orange</a></li>
</ul>
</li>
<li><a href="#">By Width</a></li>
</ul>
</li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="#">Faqs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
3. Click Save.
4. Drag to reposition the gadget below the header.
Click Save and view your blog. You should see a functional menu installed.
Try hovering the tabs, make sure the dropdowns appear.
You may delete or add menu or sub menu(up to multi levels). Make sure you add/remove the relevant code completely i.e. starting from the opening tag until the closing tag. Do the changes very carefully.
Renaming And Adding The Links
As you can see, the dropdown menu HTML is mainly consisted of unordered lists (ul) and list items (li).
Below is a code snippet for one of the category.
<li><a href="#">Home</a></li>
To rename the category, simply replace Home with your own text. As for the link, just replace # with the Page intended URL.
Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment
Enjoy..!!
0 Comments