Home » Blogger gadget » 5 new menu bar for blogger

Few days ago I noticed that there is no good tutorial for making menu bar in blogger on internet.There are few tutorials and those don’t give beautiful and attractive menu bar so I have great tutorial for that.Looks of website is always important that’s why new fancy menu bar is better then having old boring looking menu bar.Here we show you 5 difference types of menu bar that not only fancy and good looking but it’s new! so that gives unique identity to visitors.These drop down menu is not only made in jQuery but few menu bar is made by css3 and HTML only so that’s not affect on speed of your blog.

Ribbon Menu Bar

menu bar for blogger

Ribbon Menu bar for blogger

Ribbon is best and cool things because it has slow mouse hover effect and gives 3D looks.The best thing is that you don’t need to install jQuery for that.

DEMO

you need to copy and past below code into Go To Blogger > Layout > HTML/JavaScript

<style>
                    #ribbon_wrap {
                           background: #222;
                           width: 100%;
                           height: 60px;
                          padding-bottom: 5px;
                          padding-left:30px;
                          }
            .ribbon {
                display:inline-block;
            }

            .ribbon:after, .ribbon:before {
                margin-top:0.5em;
                content: "";
                float:left;
                border:1.5em solid #fff;
            }

            .ribbon:after {
                border-right-color:transparent;
            }

            .ribbon:before {
                border-left-color:transparent;
            }

            .ribbon a:link, .ribbon a:visited {
                color:#000;
                text-decoration:none;
                float:left;
                height:3.5em;
                overflow:hidden;
            }

           .ribbon span {
    background: none repeat scroll 0 0 #FFFFFF;
    display: inline-block;
    line-height: 3em;
    margin-top: 0.5em;
    padding: 0 1em;
    position: relative;
    transition: background-color 0.2s ease 0s, margin-top 0.2s ease 0s;
            }

            .ribbon a:hover span {
                background:#FFD204;
                margin-top:0;
            }

            .ribbon span:before {
                content: "";
                position:absolute;
                top:3em;
                left:0;
                border-right:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
            }

            .ribbon span:after {
                content: "";
                position:absolute;
                top:3em;
                right:0;
                border-left:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
            }

        </style>
        <center>
<div id='ribbon_wrap'>
        <div class='ribbon'>
            <a href='#'><span>Home</span></a>
            <a href='#'><span>About</span></a>
            <a href='#'><span>Services</span></a>
            <a href='#'><span>Contact</span></a>
        </div>
</div>
</center>

Rotating box menu bar

Rotating box menu bar for blogger

Rotating box menu bar for blogger

This menu bar is also build with only CSS and HTML;there is not need to add any jQuery, besides it is giving good effect and easy to put any where you want.

DEMO

you need to copy and past below code into Go To Blogger > Layout > HTML/JavaScript

<style>
nav {
  background: #fff;
  margin: 15vh 2rem;
}
nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
}
nav ul li a {
  display: inline-block;
  padding: 1rem;
  color: #000;
  text-decoration: none;
  transition: transform 0.3s ease 0s;
  transform-origin: 50% 0px 0px;
  transform-style: preserve-3d;
}
nav ul li a.current {
  color: #FF005B;
}
nav ul li a:hover {
  background: #fff;
  color: #000;
  transform: rotateX(90deg) translateY(-22px);
}
nav ul li a::before {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  padding: 4px 0px;
  text-align: center;
  line-height: 50px;
  background: none repeat scroll 0% 0% #FF005B;
  color: #FFF;
  content: attr(data-hover);
  transition: #6363CE 0.3s ease 0s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0px 0px;
}
</style>
<nav>
  <ul>
    <li><a class="current" href="#" data-hover="Here">Home</a></li>
    <li><a href="#" data-hover="Blog">Blog</a></li>
    <li><a href="#" data-hover="About">About</a></li>
    <li><a href="#" data-hover="Contact">Contact</a></li>
  </ul>
</nav>

 Sliding menu bar

sliding jQuery menu bar

sliding jQuery menu bar

unfortunately sliding menu bar is not working only with CSS and HTML for that you need a jQuery but still we will gives you easy way to installation.This unique sliding menu bar gives cool looks to your website when visitors click on the left corner button, at that time left window will push to right side with menu mar and that has sub-menu bar also.(this menu bar is by jqueryscript)

You need to fallow 2 step to install sliding menu bar into blogger

DEMO

Step 1 -Install jQuery library and other files.

find the <head> tag and past this code below it.

<link type="text/css" rel="stylesheet" href="https://googledrive.com/host/0B0LsYryPcQcMRnI1ZzVMWk5LMTg" />
        <link type="text/css" rel="stylesheet" href="https://googledrive.com/host/0B0LsYryPcQcMOGJTZ04zQkNqUVE/" />
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://googledrive.com/host/0B0LsYryPcQcMdmp2WG42YmgwRGs/"></script>
        <script type="text/javascript" language="javascript" src="footer.js"></script>
        <script type="text/javascript">
            $(function() {
                $('nav#menu').mmenu();
            });
        </script>

Step 2-Add menu bar widget

you need to copy and past below code into Go To Blogger > Layout > HTML/JavaScript

<div id="page"></h1>
<pre>            <div id="header">
                <a href="#menu"></a>
                Examples
            </div>
            <div id="content">
                <p>This is the <strong>horizontal submenus example</strong> demo page.<br />
                    Click the menu-button in the header to open the menu.</p>

                <p>One of the menu-items has a submenu and a sub-submenu. All submenus will slide in from the right, pushing their parent item out to the left.</p>
                <p>Note how the plugin automatically adds a back-button above each submenu.</p>
            </div>
            <nav id="menu">
                <ul>
                    <li><a href="index.html">Introduction</a></li>
                    <li class="Selected">
                        <a href="horizontal-submenus.html">Horizontal submenus example</a>
                        <ul>
                            <li><a href="#">First sub-item</a></li>
                            <li>
                                <a href="#">Second sub-item</a>
                                <ul>
                                    <li><a href="#">First sub-sub-item</a></li>
                                    <li><a href="#">Second sub-sub-item</a></li>
                                    <li><a href="#">Third sub-sub-item</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Third sub-item</a></li>
                        </ul>
                    </li>
                    <li><a href="vertical-submenus.html">Vertical submenus example</a></li>
                    <li><a href="photos.html">Photos in sliding panels</a></li>
                    <li><a href="positions.html">Positioning the menu</a></li>
                    <li><a href="colors.html">Coloring the menu</a></li>
                    <li><a href="advanced.html">Advanced example</a></li>
                    <li><a href="onepage.html">One page scrolling example</a></li>
                    <li><a href="jqmobile/index.html">jQuery Mobile example</a></li>
                </ul>
            </nav>
        </div>

change other text inside HTML based on your requirement

Vertical menu bar

Vertical menu bar

Vertical menu bar

 

Vertical menu bar is not simple as you think it is build with jQuery and it has beautiful effect on click,if you don’t install jQuery yet they you need to follow two steps otherwise you should follow directly from 2nd step.(this menu bar is by cssmenumaker)

DEMO

Step 1 Install jQuery.

find <head> tag into template code and past this code after <head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

Step 2-Add menu bar widget

you need to copy and past below code into Go To Blogger > Layout > HTML/JavaScript

<div id='cssmenu' class='align-right'>
<ul>
   <li class='active has-sub'><a href='#'><span>Popular post</span></a>
      <ul>
         <li><a href='http://www.gigabyteservice.com/how-to-write-a-business-plan/'><span>Why business need website</span></a></li>
         <li><a href='http://www.gigabyteservice.com/how-someone-can-steal-your-password-in-mozilla-firefox/'><span>How someone can steal your password in Mozilla Firefox</span></a></li>
         <li><a href='http://www.gigabyteservice.com/how-to-write-a-business-plan'><span>How to write business plan</span></a></li>
         <li><a href='#'><span>How hacker can hack any account</span></a></li>
         <li class='last'><a href='#'><span>Why cyber crime is increased</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='https://www.gigabyteservice.com/web-designing'><span>Web designing</span></a></li>
         <li><a href='https://www.gigabyteservice.com/3d-world/'><span>3D video converter</span></a></li>
         <li class='last'><a href='http://www.gigabyteservice.com/blogging-categories/'><span>Blogs</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='#'><span>Other blogs</span></a>
      <ul>
         <li><a href='http://www.gigabyteservice.com/category/business/'><span>Business</span></a></li>
         <li><a href='http://www.gigabyteservice.com/category/internet-security/'><span>Internet security</span></a></li>
         <li><a href='http://www.gigabyteservice.com/category/blogger-gadget/'><span>Blogger gadget</span></a></li>
         <li class='last'><a href='http://smartquestionblog.blogspot.in/'><span>Smart Question</span></a></li>
      </ul>
   </li>
</ul>
</div>

change other text inside HTML based on your requirement

Simple menu bar

Simple menu bar

Simple menu bar

This simple and well design menu bar fro blogger with nice mouse hover effect.it is also made with jquery and other javascript.

Step 1 Install jQuery.

find <head> tag into template code and past this code after <head> tag.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

Step 2-Add menu bar widget

you need to copy and past below code into Go To Blogger > Layout > HTML/JavaScript

<style>
#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:956px;height:49px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-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:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:14.5px;padding-bottom:14.5px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Purple,.Purple .button a{     color: #ffffef;background: #b5add8;border-right:1px solid #7e70b8;background: -moz-linear-gradient(top, #b5add8 0%, #7e70b8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5add8), color-stop(100%,#7e70b8));background: -webkit-linear-gradient(top, #b5add8 0%,#7e70b8 100%);background: -o-linear-gradient(top, #b5add8 0%,#7e70b8 100%);background: -ms-linear-gradient(top, #b5add8 0%,#7e70b8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5add8', endColorstr='#7e70b8',GradientType=0 );background: linear-gradient(top, #b5add8 0%,#7e70b8 100%);}.Purple .button a:hover,.Purple .button a:focus{background: rgb(160,146,218);background: -moz-linear-gradient(top, rgba(160,146,218,1) 0%, rgba(150,136,208,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(160,146,218,1)), color-stop(100%,rgba(150,136,208,1)));background: -webkit-linear-gradient(top, rgba(160,146,218,1) 0%,rgba(150,136,208,1) 100%);background: -o-linear-gradient(top, rgba(160,146,218,1) 0%,rgba(150,136,208,1) 100%);background: -ms-linear-gradient(top, rgba(160,146,218,1) 0%,rgba(150,136,208,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a092da', endColorstr='#9688d0',GradientType=0 );background: linear-gradient(top, rgba(160,146,218,1) 0%,rgba(150,136,208,1) 100%);}.Purple .button a:active{background: #9688d0;background: -moz-linear-gradient(top, #9688d0 0%, #a092da 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9688d0), color-stop(100%,#a092da));background: -webkit-linear-gradient(top, #9688d0 0%,#a092da 100%);background: -o-linear-gradient(top, #9688d0 0%,#a092da 100%);background: -ms-linear-gradient(top, #9688d0 0%,#a092da 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9688d0', endColorstr='#a092da',GradientType=0 );background: linear-gradient(top, #9688d0 0%,#a092da 100%);  }.Violet,.Violet .button a{color: #ffe8ff;border-right:1px solid #ae1c71;background: #ce75a8;background: -moz-linear-gradient(top, #ce75a8 0%, #ae1c71 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ce75a8), color-stop(100%,#ae1c71));background: -webkit-linear-gradient(top, #ce75a8 0%,#ae1c71 100%);background: -o-linear-gradient(top, #ce75a8 0%,#ae1c71 100%);background: -ms-linear-gradient(top, #ce75a8 0%,#ae1c71 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce75a8', endColorstr='#ae1c71',GradientType=0 );background: linear-gradient(top, #ce75a8 0%,#ae1c71 100%);}.search{position:relative;float:right;margin-top:14.5px;}.search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-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;}
</style>

<script type="text/javascript">var search_input= $('.search input[type=text]');var search_input_size = 120; var search_large_size = 180; var padding = 7; var shrinked = "";$(document).ready(function(){search_input.click(function(){shrink();}).focus(function(){shrink();});search_input.blur(function(){ if(shrinked=="YES")normal();});$('.button a').hover(function(){if(shrinked=="YES")normal();}); });function shrink(){if(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 false;}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 false;}</script>

<ul id="menu_wrap" class="Purple"><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><input type="text" placeHolder="Search"  /></li>
</ul>

 

change other text inside HTML based on your requirement

 

3 thoughts on “5 new menu bar for blogger

Leave a Reply