Every 1 Posts | Best All Techonolgy : css menu

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<img alt="css-drop-down-menu" class=" wp-image-573 aligncenter" height="177" src="http://www.bestbloggercafe.com/wp-content/uploads/2014/06/css-drop-down-menu.jpg" style="display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" width="751" />Drop Down menu is the beauty in a blog's design. It looks pretty much cool when someone hovers the mouse and the list opens. These menus hold all the links inside the parent menu. There are two kind of links used in drop down menus, the one is parent link and the others are children. So the parent link actually doesn't have any link to follow, but it holds all the children links, so when the visitor hovers the mouse to parent the list of children open.<span id="more-570"></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
These menus used to create in HTML, CSS and with extra codes of jQuery. And you know jQuery is a library of JavaScript and JavaScript is more heavier web language thanHTML and CSS. Because the browser takes time to load JavaScript codes.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<b>You may like to read:</b> Customize Blogger Popular Posts</div>
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
But the Good news is, now we can create a drop down menu only by using CSS3 and HTML. So our today's menu will also be only in HTML and CSS. The big advantage of using CSS menu is; it loads faster and without irritating the browser it get displayed in seconds. In this tutorial, we'll learn how to add a CSS3 Drop down menu to our blogger blog. Let's start without delaying you further.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Before straight going to the tutorial we should first check the demo for this: <a href="http://wallpaperphotos101.blogspot.com/" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Click to See DEMO</a></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
How to Add CSS menu to Blogger?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
We'll add a beautiful CSS drop down menu to our blogger, but our codes will be containing two parts. The first part will be CSS codes for that menu and the second will be HTML codes. So we need to add both of them carefully and then show the menu on your blog. Below Steps are easy to follow:</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">Adding CSS Codes into Blogger</span></b></div>
<ul style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Go to Blogger Dashboard</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Template >> HTML >> Proceed</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Now Find this code <b></b:skin></b></li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Now copy below code paste right before <b></b:skin></b></li>
</ul>
<blockquote style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
#navMenu {<br />margin:0;<br />width:auto;<br />margin-bottom:5px;<br />}<br />#navMenu ul {<br />margin:0;<br />padding:0;<br />line-height:<span style="color: blue;"><b>30px;</b></span><br />}<br />#navMenu li {<br />margin:0;<br />padding:0;<br />list-style:none;<br />float:left;<br />position:relative;<br />background:<b><span style="color: red;">#369</span></b>;<br />}<br />#navMenu ul li a {<br />text-align:center;<br />height:<b><span style="color: magenta;">30px;</span></b><br />width:<b><span style="color: #990000;">140px</span></b>;<br />display:block;<br />font-family:"Georgia", cursive;<br />text-decoration:none;<br />color:#FFF;<br />border:1px solid #FFF;<br />text-shadow:1px 1px 1px #000;<br />}<br />#navMenu ul ul {<br />position:absolute;<br />visibility:hidden;<br />top:30px;<br />}<br />#navMenu ul li:hover ul {<br />visibility:visible;<br />z-index:9999;<br />}<br />/*sets top level hover color*/<br />#navMenu li:hover {<br />background:#09F;<br />}<br />/*sets link items hover color and background*/<br />#navMenu ul li:hover ul li a:hover {<br />color:#000;<br />background:#CCC;<br />}<br />/* Changes text color on hover for main menu hover*/<br />#navMenu a:hover {<br />color:#000;<br />}<br />/* Contains the Float */<br />.clearFloat {<br />clear:both;<br />margin:0;<br />padding:0;<br />}<br />/* IE7 Display Fix */<br />#navMenu ul li {<br />display: inline;<br />}</div>
</blockquote>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
Save your template and you've successfully added the CSS part of this drop down menu.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">Adding HTML codes to your blog</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Now after having added the css part, you'll have to add the HTML part of this menu, because CSS is just for styling the menu, while by using HTML you will display the menu on your blog. Mostly the menu is kept in the header or in navigation bar, so you should keep at below the header. Now follow steps to add HTML codes:</div>
<ul style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px; text-align: justify;">Go to Blogger >> Layout</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Add a Gadget >> Select the HTML/JavaScript Gadget from the list</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Copy below code and paste it inside that HTML/JavaScript Widget</li>
</ul>
<blockquote style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<div align="center"><br /><div id="navMenu"><br /><ul><br /><li> <a href="#">Ms Office</a><br /><ul><br /><li><a href="#">Office in Urdu</a></li><br /></ul> <br /></li> <br /></ul> <br /><ul><br /><li> <a href="#">Graphics Designing</a><br /><ul><br /><li><a href="#">Graphics in Urdu</a></li><br /></ul> <br /></li> <br /></ul> <br /><ul><br /><li> <a href="#">Web Designing</a><br /><ul><br /><li><a href="#">Web Designing</a></li><br /></ul> <br /></li> <br /></ul> <br /><ul><br /><li> <a href="#">Web Development</a><br /><ul><br /><li><a href="#">Web Development</a></li><br /></ul> <br /></li> <br /></ul> <br /><ul><br /><li> <a href="#">SEO & Others</a><br /><ul><br /><li><a href="#">SEO</a></li><br /><li><a href="#">Blogger SEO </a></li><br /></ul> <br /></li> <br /></ul> <br /><ul><br /><li> <a href="#">Accounting</a><br /><ul><br /><li><a href="#">Accounting</a></li><br /></ul> <br /></li> <br /></ul> <br /><ul><br /><li> <a href="#">Making Money</a><br /><ul><br /><li><a href="#> Earn Money Online</a></li><br /><li><a href="#">Google Adsense</a></li><br /><li><a href="#">Affiliate Marketing</a></li><br /><li><a href="#">Earn with PPC</a></li><br /><li><a href="#">Freelancing</a></li><br /></ul> <br /></li> <br /></ul> <br /></ul> <br /><br class="clearFloat" /><br /></div> </div></div>
</blockquote>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
Save the widget, drag it below the header, see the example image below:</div>
<div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgalbEcHhR35uAGzGH9fwicWderG_KS6byPbdMHmqy5-sbq-vtWT8j3_KcWgR-9xbATEA-QHybQ8-N8mF3Hhq7WQaXFXtcYTINDAX9UGJQsDuJHiBzQuxfUsWHXyfY37wYP2hzzOp_JLvc/s1600/drop-down-menu.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgalbEcHhR35uAGzGH9fwicWderG_KS6byPbdMHmqy5-sbq-vtWT8j3_KcWgR-9xbATEA-QHybQ8-N8mF3Hhq7WQaXFXtcYTINDAX9UGJQsDuJHiBzQuxfUsWHXyfY37wYP2hzzOp_JLvc/s1600/drop-down-menu.jpg" style="border: none; height: auto; max-width: 100%;" width="500" /></a></div>
<h4 style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #3c3c3c; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 30px; font-weight: normal; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
Customization:</h4>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
You can easily customize this menu by yourself. I'll give you the important parts which you can customize according to your requirements.</div>
<ul style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">The <b><span style="color: blue;">30px</span></b> blue color value is set for the height of the UL tag, so if you need larger or lesser than that you can edit increase or decrease it.</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">The <b style="color: red;">#369 </b>red color value is set for the background of an LI tag, so you can change it with any color you like<span style="color: red;"><b>.</b></span></li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;"><b><span style="color: magenta;">30px</span></b> pink color is value is the hieght of the link, so it should be as same as the line height of an UL<b style="color: black;">. </b></li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;"><b>The </b><b style="color: #990000;">140px</b> brown colored value is for the with of the link, so if you have large text and that is not fixing in the current width, you can increase it, also you can decrease the width of the link.</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">More customization is also possible, you can custimize each part of this menu by changing the values of CSS properties.</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Also change the anchor texts to your own which are these web designing, graphics, SEO & Others, Ms Office, Accounting etc, these are the texts you can change with your own. And to change the link for each of the text just replace the (#) sign with your link.</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">If you want to remove or add more links or tabs then simply copy the one block code and paste below or in between. If you want to add an entire tab then simply copy a code like below one and add it or in between the menu:</li>
</ul>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<ul><br /><li> <a href="#">Graphics Designing</a><br /><ul><br /><li><a href="#">Graphics in Urdu</a></li><br /></ul> <br /></li> <br /></ul> </div>
</blockquote>
<ul style="margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">And if you want to increase a link inside the drop down list then simply copy below line and paste it repeatedly as many as you want below the same line.</li>
</ul>
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<li><a href="#">Graphics in Urdu</a></li></div>
</blockquote>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
Every time you edit the widget, just save the widget and see the result by viewing your blog and Enjoy the beautiful CSS drop down menu.</div>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<b>Extras:</b><br />I have tried my best to give you all the details about about this menu, however, you can ask questions by using comment box below the post.</div>
</div>

How to add CSS3 Drop Down Menu in Blogger blog?

Drop Down menu is the beauty in a blog's design. It looks pretty much cool when someone hovers the mouse and the list opens. These menu...