A menu can be as practical and versatile as you want it to be or as flashy and elegant as we propose. A menu can be the highlight of a blog or so sad and insignificant that no repair on it.
No advice worth when choosing a menu, as does the design ever say that's a taste of the author.
If it comes to making a menu for someone else is good to consider the use to be given to that menu, or the amount of links you will need because if many might be better a dropdown menu. If the blog is commercial then we can afford a dynamic menu with great images and interesting effects.
When choosing a menu the range of possibilities is very wide and luckily we have at hand large sites with tutorials
Today i put a simple code to copy and paste and set a Circles Drop Down Menu. With it you can group and sort many inmates as a site map links, but in less space and with a resolution appearance.
It only takes CSS but includes some effects which I think they have nothing to envy to other menus using JavaScript libraries to fold and unfold. However, in older versions of Internet Explorer, as usual, it will lose some of the effects like transitions that will not be visible and the curves are straight, but the menu also work. As we note in the aesthetic issue.
And without further ado, and then the demo code, which as you can always add salt ye selectors adding and / or changing values, for a total dish your taste.
And without further ado, and then the demo code, which as you can always add salt ye selectors adding and / or changing values, for a total dish your taste.
This would be the HTML structure. In it you have to change the # that are just links to the demo, destination addresses you want, just to do with major labels (among h5) and words that will link . All these I have marked in green.
Go to your blogger layout add a gadget HTML/Javascript where you want to show Menu, will stick inside the following:
HTML
<ul class="menured"> <li> <a class="red1"></a> <div> <h5> Home </h5> <a href=" # "> Link 1 </a> <a href=" # "> Link 2 </a> </div> </li> <li> <a class="red2"></a> <div> <h5> Information </h5> <a href=" # "> Link 3 </a> <a href=" # "> Link 4 </a> </div> </li> <li> <a class="red3"></a> <div> <h5> Join us </h5> <a href=" # "> Twitter </a> <a href=" # "> Facebook </a> <a href=" # "> Google+ </a> </div> </li> <li> <a class="red4"></a> <div> <h5> Contact Us </h5> <a href=" # "> eMail </a> <a href=" # "> Cell </a> <a href=" # "> LandLine </a> </div> </li> </ul>
The content and links without red1 Role network2etc.. They are responsible for creating icons that look first and are actually funds that can be set from the CSS with icons or pictures you want. The code is fixed for each 32x32px and is as follows:
and now Go To your Blogger Template Edit HTML and find ]]></b:skin> and just before it paste the Following CSS:
<!-- Start www.mytechblogging.com-->
ul.menured * {margin: 0 auto; padding: 0; text-indent: 0;
-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
ul.menured {list-style: none; width: 1800px; max-width: 100%; margin: 0 auto; text-align: center;}
ul.menured li {position: relative; display:inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width:44px; height: 44px; overflow: hidden; margin: 2px; padding: 5px; border-radius: 44px; border: 1px solid transparent; background: #fff;
-moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 1px 1px 3px #555; box-shadow: 1px 1px 3px #555;}
ul.menured li a[class^=red] {position: absolute; top: 5px; left: 5px; display: block;width: 32px;height: 32px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
a.red1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1xv7WYJ9-fWxMIOg_Qk-3Gzs3fWhlJaeefm2bNZ51Ami8d5Remu5H7SuEnHYdNxN6nis66fKFUmK-Y4vpch-VbfaBtcP35ZWnbbzm653svNQcSq_S1rHEe6w11qGUqsl5TrUbBapJm-g/s1600/home.png) no-repeat;}
a.red2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzDM8KhkRpoPwN_Rwk05I_XNLQog96oYrqXcwDlGZQNXziITopExFKhrupuGhaXf4eoOS5RQEFLs1nRU-VLBdXa7pD0mgzYCA-xX8pSryvZGrSmILvGkkdJi-wZoLzSMUnBLGOmDaYOwi/s1600/info.png) no-repeat;}
a.red3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrehWi86wmvzoPOJRWTQvDoUKR_v1iEDqSr9Gmru9XC-5WHFUzow-a961hZ_xH78X7L1A6vngkxQeVLdoUnAvp9vvUMP6J5OMiCF19cGgjADhVTwRqg091OkSb8Y_Ib9rt7FRhNahOPpgg/s1600/users.png) no-repeat;}
a.red4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQixjgneMDO9RK9aeL546P0V2dV1S1ro_Wq0TS36rzvb_ojCLj2RpAJ_nTW8bbbDbc7I3SE6yQS4WUhXWoQTmiHVBEXJuZiK571oWb1CVmP9aNFjIGY9gAnUOe-uJ75mPFgIeth6eMBytJ/s1600/email.png) no-repeat;}
ul.menured li div {margin: 0px 8px 5px 38px; text-align: center;}
ul.menured li div h5 {text-align: left; text-transform: uppercase;}
ul.menured li div a {display: inline;margin: 0 3px;font-size: 12px; color: #F36900;}
ul.menured div a:hover {color: grey;}
ul.menured li:hover {width:240px;}
ul.menured li:hover a[class^=red] {-moz-transform: rotate(720deg); -webkit-transform: rotate(720deg); transform: rotate(720deg);}
<!-- end www.mytechblogging.com-->
Hope full coding
in case of any Help Comment
i will feel happy to Help You.
Excellent Work Basit !
ReplyDeleteThanks Amar Zaib
DeleteVery Nice Widget
ReplyDeletethanks Furqan Keep Visiting
Delete