HackingUniversity - Hacks . Tricks . How-To's

04 September 2014

Blue Color CSS3 Powered Menu Bar for Blogger Blogs

CSS3 is the most up to date code launched after wear and tear and incapability of typical CSS to carry out innovative performance throughout the internet. CSS3 is utilized to rotate image, produce edge shadow, make popup, develop opacity, and other optimal devices related navigation menu. Today we'll satisfy you all a brand-new and innovative CSS3 requirement together with some JavaScript which lastly offered forth to an outstanding navigation menu. We provided this widget free of charge to all blog writer users as a complimentary premium present however prior to we desire you all to subscribe our e-mail updates as a little wage to our effort behind gifting you such a rocking navigation menu which is hardly ever seen on internet.

  1. Open Blogger > Layout > Add Gadget.
  2. Choose HTML/JavaScript Gadget and then add below code into it.

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script><style>
    #Head{position:fixed;overflow: auto;z-index:5;width:100%;height:100px;top:0;background-image: url(required/top.png);border-bottom: 1px solid #999;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 3px 7px rgba(0,0,0,.2);}

    #menu_wrap{position:relative;margin-top: -10px;margin-left: -10px;margin-right:auto;padding:0; padding-right:10px;width:949px; height:40px;list-style-type:none;-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2);}
    .button a{cursor:pointer;text-align:center;font:14px/100% Arial,Helvetica,sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px 10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3);}
    .button:first-child a{-webkit-border-top-left-radius:.3em;-webkit-border-bottom-left-radius:.3em;-moz-border-topleft-radius:.3em;-moz-border-bottomleft-radius:.3em;border-top-left-radius:.3em;border-bottom-left-radius:.3em;}

    .Blue,.Blue .button a{color:#d9eef7;background: #00adee;border-right:solid 1px #0078a5;background: -moz-linear-gradient(top, #00adee 0%, #0078a5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00adee), color-stop(100%,#0078a5));background: -webkit-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -o-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -ms-linear-gradient(top, #00adee 0%,#0078a5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adee', endColorstr='#0078a5',GradientType=0 );background: linear-gradient(top, #00adee 0%,#0078a5 100%);}
    .Blue .button a:hover,.Blue .button a:focus{background: #0095cc;background: -moz-linear-gradient(top, #0095cc 0%, #00678e 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0095cc), color-stop(100%,#00678e));background: -webkit-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -o-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -ms-linear-gradient(top, #0095cc 0%,#00678e 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0095cc', endColorstr='#00678e',GradientType=0 );background: linear-gradient(top, #0095cc 0%,#00678e 100%);}
    .Blue .button a:active{background: #0078a5;background: -moz-linear-gradient(top, #0078a5 0%, #00adee 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0078a5), color-stop(100%,#00adee));background: -webkit-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -o-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -ms-linear-gradient(top, #0078a5 0%,#00adee 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0078a5', endColorstr='#00adee',GradientType=0 );background: linear-gradient(top, #0078a5 0%,#00adee 100%);}

    .search{position:relative;float:right;margin-top:7px;}
    .search input[type=text]{width:120px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: .9em; -moz-border-radius: .9em;border-radius: .9em;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}
    .search a:before { width:6px; height:6px; border:2px solid #000; background:transparent; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
    .search a:after { left:24px; width:2px; height:7px; margin-top:0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}li a:before, li a:after { content:""; position:absolute; top:50%; left:15px;}li a:before, li a:after { margin:-7px 0 0; background: #000;}#gn_box{padding:20px 20px;position:relative;width:550px;min-height:680px;background-color:#FFF;margin-left:auto;margin-right:auto;margin-top:110px;list-style-type:none;color: #4A4744;border: 1px solid #C3C8BD;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background: #F7F7F7;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:14px;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
    </style>

    <ul id="menu_wrap" class="Blue">
    <li class="button"><a href="#">Home</a></li>
    <li class="button"><a href="#">portfolios</a></li>
    <li class="button"><a href="#">Latest Projects</a></li>
    <li class="button"><a href="#">Top Sales</a></li>
    <li class="button"><a href="#">new post</a></li>
    <li class="button"><a href="#">advertise</a></li>
    <li class="button"><a href="#">about us</a></li>
    <li class="search"><a href="#"></a><form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Search here...&apos;;}' onfocus='if (this.value == &apos;Search here...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search here...'/>
    </form></li></ul>

    <script type="text/javascript">var left_size=0,menu_width=$("#menu_wrap").width(),menu_height=$("#menu_wrap").height(),search_input=$(".search input[type=text]"),search_input_size=120,search_large_size=180,search_height_size=20,padding=3,reminder=0,shrinked="",corner=5,search_corner=5,picked_color="Blue",Full_width="",font_size=14,font_name="Arial, Helvetica, sans-serif",width_with_search="";$(document).ready(function(){search_input.click(function(){shrink()}).focus(function(){shrink()});search_input.blur(function(){shrinked=="YES"&&normal()});$(".button a").hover(function(){shrinked=="YES"&&normal()});$("#Slider1").slider({from:200,to:1400,step:1,dimension:"&nbsp;px",skin:"plastic",scale:[200,"|","700","|",1200],onstatechange:function(a){menu_width=a;$("#menu_wrap").width(menu_width)}});$("#Slider2").slider({from:20,to:200,step:1,dimension:"&nbsp;px",skin:"plastic",scale:[20,"110",200],onstatechange:function(a){menu_height=a;$("#menu_wrap").height(menu_height);a=Number(menu_height)/2-10;$(".button a").css({"padding-top":a+"px","padding-bottom":a+"px"});$(".search ").css({"margin-top":Number(a)-2+"px"})}});$("#Slider3").slider({from:20,to:300,step:1,round:0,dimension:"&nbsp;px",skin:"plastic",scale:[20,"|","160","|",300],onstatechange:function(a){a=a.split(";");search_input_size=a[0];search_input.width(search_input_size);search_large_size=a[1];a[0]==a[1]?$(".shrink_tag").fadeOut("slow"):$(".shrink_tag").fadeIn("slow");Fix_menu()}});$("#search_height").slider({from:20,to:200,step:1,round:0,dimension:"&nbsp;px",skin:"plastic",scale:[20,"110",200],onstatechange:function(a){search_height_size=Number(a);search_input.height(search_height_size);Number(menu_height)-Number(search_height_size)<20&&(menu_height=Number(menu_height)+10,$("#Slider2").slider("value",menu_height));var a=(Number(menu_height)-Number(a))/2,b=Number(menu_height)/2-10;$(".button a").css({"padding-top":b+"px","padding-bottom":b+"px"});$(".search ").css({"margin-top":Number(a)+"px"})}});$("#Slider4").slider({from:0,to:100,step:10,round:0,dimension:"&nbsp;%",skin:"plastic",scale:[0,"|","50","|",100],onstatechange:function(a){shPad(a);$(".sh").val(a)}});$("#slider_font").slider({from:0,to:100,step:1,round:0,dimension:"&nbsp;px",skin:"plastic",scale:[0,"50",100],onstatechange:function(a){$("#menu_wrap a").css({"font-size":a+"px"});font_size=a}});$("#round").slider({from:0,to:20,step:1,round:0,dimension:"&nbsp;em",skin:"round_plastic",onstatechange:function(a){$("#menu_wrap").css({"-webkit-border-radius":a+"px","-moz-border-radius":a+"px","border-radius":a+"px"});$("#menu_wrap .button:first-child a").css({"-webkit-border-top-left-radius":a+"px","-webkit-border-bottom-left-radius":a+"px","-moz-border-topleft-radius":a+"px","-moz-border-bottomleft-radius":a+"px","border-top-left-radius":a+"px","border-bottom-left-radius":a+"px"});$(".round").val(a);corner=a}});$("#round_search").slider({from:0,to:20,step:1,round:0,dimension:"&nbsp;em",skin:"round_plastic",onstatechange:function(a){$(".search input[type=text]").css({"-webkit-border-radius":a+"px","-moz-border-radius":a+"px","border-radius":a+"px"});$(".round_search").val(a);search_corner=a}})});function shrink(){search_input_size!=search_large_size&&($(".button a").each(function(){$(this).animate({"padding-left":padding+"px","padding-right":padding+"px"},"fast")}),search_input.animate({width:search_large_size+"px"},"fast"),shrinked="YES");return!1}function normal(){search_input.animate({width:search_input_size+"px"},"fast");$(".button a").animate({"padding-left":"10px","padding-right":"10px"},"fast");shrinked="";search_input.blur();return!1}function changeColor(a){picked_color=a;$("#menu_wrap").removeClass().addClass(a)}function Fix_menu(){left_size=0;$(".button a").each(function(){left_size=$(this).outerWidth(!0)+Number(left_size)});reminder=Number(menu_width)-(Number(search_input_size)+Number(left_size))-35;reminder<=0&&(menu_width=Math.abs(reminder)+Number(menu_width)+2,$("#Slider1").slider("value",menu_width));return!1}function font_name_change(a){$("#menu_wrap a").css({"font-family":a});font_name=a;return!1}function shPad(a){padding=a==100?0:a==90?1:a==80?2:a==70?3:a==60?4:a==50?5:a==40?6:a==30?7:a==20?8:a==10?9:10;return!1};</script><script>var _wau = _wau || []; _wau.push(["tab", "9c36n29qrx80", "lry", "left-upper"]);(function() { var s=document.createElement("script"); s.async=true; s.src="";document.getElementsByTagName("head")[0].appendChild(s);})();</script>

  3. That's it now your code is added press Save Gadget and refresh your website.

Well you can definitely make some changes to the menu bar, you can change the menu width by changing the width value above which is right now 949px and you can also shuffle up the margin value. So overall the menu is fully in working condition, hope you like it do share this post and have fun.