Showing posts with label Drop Down Menu. Show all posts
Showing posts with label Drop Down Menu. Show all posts

5/12/2016

Add a Floating Drop Down Menu In Blogger With Search Box

Floating Drop Down Menu
A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for.
A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position.
Today I am sharing a drop down menu for blogger with search box.

Adding Floating DropDown menu to blogger

  1. Login to your blogger dashboard.
  2. Select your blog.
  3. Select Template .
  4. Click Edit HTML. 
  5. Add this code just above the </body> tag
<style>
  #naviopdropcont {
    width: 100%;
    height: 45px;
    display: block;
    padding: 0;
    margin: 0 0 20px 0;
    z-index: 100;
    top: 0px;
    left: 0px;
    position: fixed;
    box-shadow: 2px 2px 5px #444444;
    -moz-box-box-shadow: 2px 2px 5px #444444;
    -web-kit-box-shadow: 2px 2px 5px #444444;
    -goog-ms-box-shadow: 2px 2px 5px #444444;
    background: #000;
  }
  #naviopdropnav {
    float: left;
    width: 800px;
    height: 40px;
    display: block;
    padding: 0;
    margin-left: 40px;
  }
  #naviopdropnav ul {
    float: left;
    margin: 0;
    padding: 0;
  }
  #naviopdropnav li {
    float: left;
    list-style: none;
    line-height: 40px;
    margin: 0;
    padding: 0 background:#180000;
  }
  #naviopdropnav li a,
  #naviopdropnav li a:link {
    color: #fff;
    display: block;
    margin: 0;
    font: 16px georgia, verdana;
    padding: 10px;
    text-decoration: none;
  }
  #naviopdropnav li a:hover,
  #naviopdropnav li a:active,
  #naviopdropnav .current_page_item a {
    color: #fff;
    padding: 10px;
    background: #007acc;
  }
  #naviopdropnav li li a,
  #naviopdropnav li li a:link,
  #naviopdropnav li li a:visited {
    font-size: 12px;
    background: #180000;
    color: #fff;
    width: 150px;
    margin: 0;
    padding: 0px 10px;
    line-height: 30px;
    position: relative;
  }
  #naviopdropnav li li a:hover,
  #naviopdropnav li li a:active {
    color: #fff;
    background: #007acc;
  }
  #naviopdropnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px
  }
  #naviopdropnav li:hover ul,
  #naviopdropnav li li:hover ul,
  #naviopdropnav li li li:hover ul,
  #naviopdropnav li.sfhover ul,
  #topnaviopdropnav li li.sfhover ul,
  #topnaviopdropnav li li li.sfhover ul {
    left: auto
  }
  #naviopdropnav li:hover,
  #naviopdropnav li.sfhover {
    position: static;
  }
</style>
<style>
  . -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
  box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
  background: #f1f1f1;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top, #fff, #ededed);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
  /* ie7 */
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
  /* ie8 */
  }
  .searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
  }
  .searchform .searchfield {
    background: #fff;
    padding: 6px 6px 6px 8px;
    width: 202px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
  }
  .searchform .searchbutton {
    color: #fff;
    border: solid 1px #000;
    font-size: 11px;
    height: 30px;
    width: 30px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
    background: #007acc;
  }
</style>
<div id='naviopdropcont'>
  <div id='naviopdropnav'>
    <ul>
      <li><a href=''>Home</a></li>
      <li><a href='#'>About us</a></li>
      <li><a href='#'>Goofs</a>
        <ul>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
          <li><a href='#'>Item 4</a></li>
        </ul>
      </li>
      <li><a href='#'>Categories</a>
        <ul>
          <li><a href='#'>Category 1</a></li>
          <li><a href='#'>2</a></li>
          <li><a href='#'>3</a></li>
          <li><a href='#'>4</a></li>
          <li><a href='#'>5</a></li>
          <li><a href='#'>drop down</a></li>
        </ul>
      </li>
      <li><a href='#'>Contact us</a>
      </li>
      <li style='float:right;padding:0px 0px ;margin:5px 18px 11px 40px;
  '>
        <form class="searchform" action="/search" method="get">
          <input name="q" class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
          <input class="searchbutton" type="submit" value="Go" />
        </form>
      </li>
    </ul>
  </div>
Now click save and you are done.
You have just added a sticky drop down menu for blogger.
Leave your comments and suggestions.

11/03/2015

3D Flying Book Navigation Menu Bar

3D Flying Book Navigation Menu Bar widget for blogger. Fast in loading developed in html and css without any javascript. Best and one of the top widget for blogger blog.

3D Flying Book Navigation Menu Bar
  1.     Login to Blogger → Dashborad
  2.     Click on Drop Down Menu and select Layout
  3.     Add a HTML/JavaScript Gadget
  4.     Paste below code in it.



      5. Save template and you'rre done.
      6. Replace your codes and URLs


This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this 3D navigation menu widget for blogger then please share it and write comments as your feedback.

8/09/2015

How To Add Animated CSS3 Drop Down Menu In Blogger

Animated CSS3 Drop Down Menu

Adding beautiful drop down menu helps to increase the beauty of your blog. By adding the drop down menu your readers or visitors can easily navigate through your blog.
This amazing Drop down menu is created by Catalin Rosu with spectacular JQuery effects! I'll give you customized version which works flawlessly with blogger. It is compatible with all major browsers like FireFox, Chrome and Safari

Step 1. Log in to your blogger dashboard.
Step 2. Select your blog.
Step 3. Go to Blogger Dashboard > Design > Edit/Page Layout.
Step 4. Click Add a Gadget below header.
Step 5. Choose HTML/JavaScript widget.
Step 6. Paste below code and save it.
<style>
/*-----Drop Down Menu By (blogger-templatees.blogspot.com)-------*/
#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#hb-menu:before,
#hb-menu:after {
content: "";
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#hb-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#hb-menu li:hover > a {
color: #fafafa;
}
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-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);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#hb-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;
}
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>
<ul id="hb-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="http://blogger-templatees.blogspot.com">Create This »</a></li>
</ul>

Step 7. replace # with your links and other with your Page Title.