Customizable free drop-down menu

Dropdown menu with the help of Html,Css,Jquery

We’ve not done any posts of menu since many posts.
Now going to give you full tutorial on how to make a professional and beautiful drop-down menu .

Click to view large

You may also see in image that how it’ill look…
But if you want live preview we’ve made it.

Live preview

^_^ First go to your blog dashboard and click on Layout Tab.
^_^ Click on Add a Gadget , then select HTML/Javascript.
^_^ Copy below code on Content box.

<button class=”abc1″>
  Click to open/close the menu
</button>
<div class=”mn1″>
  <ul class=”main1″>
  <li><a href=”#“>Home</a></li>
  <li>Laptops
    <ul>
      <li><a href=”#“>APPLE</a></li>
      <li><a href=”#“>SONY</a>
        <ul>
          <li><a href=”#“>Sony VAIO</a></li>
        </ul>
      </li>
      <li><a href=”#“>HP</a></li>
      <li><a href=”#“>DELL</a></li>
      <li><a href=”#“>ACER</a></li>
      <li><a href=”#“>TOSHIBA</a></li>
      <li><a href=”#“>COMPAQ</a></li>
      <li><a href=”#“>SAMSUNG</a></li>
    </ul>
  </li>
  <li>Tablets
    <ul>
      <li><a href=”#“>SAMSUNG</a></li>
      <li><a href=”#“>KARBONN</a></li>
      <li><a href=”#“>MICROMAX</a></li>
      <li><a href=”#“>MOTOROLA</a></li>
      <li><a href=”#“>OTHER</a></li>
    </ul>
  </li>
  <li>Smart Phones
    <ul>
      <li><a href=””>iOS</a></li>
      <li>Android
        <ul>
          <li><a href=”#“>Android 1.6</a></li>
          <li><a href=”#“>Android 2.3</a></li>
          <li><a href=”#“>Android 3.2</a></li>
          <li><a href=”#“>Android 4.0</a></li>
          <li><a href=”#“>Android 4.1</a></li>
          <li><a href=”#“>Android 4.2</a></li>
        </ul>
      </li>
      <li><a href=”#“>Windows Phone</a></li>
      <li>Symbian
        <ul>
          <li><a href=”#“>Version 3</a></li>
          <li><a href=”#“>Version 5</a></li>
        </ul>
      </li>
      <li><a href=”#“>Java</a></li>
      <li><a href=”#“>Bada</a></li>
    </ul>
  </li>
  <li><a href=”#“>Support</a></li>
</ul>
</div>

^_^ Change the # with your links and Change all the names which is highlighted with blue color with your names.
^_^ Then, Save. And Go to template tab and On new template editor expand <b:skin>…</b:skin> and search for ]]</b:skin> . Paste below code above it.

.abc1
{
  position: fixed;
  right: 0;
  top: 1%;
  background: #000;  
  color: #fff;
  border: none;
}
.mn1
{
  position: fixed;
  left: 0;
  top: 0.5%;
  margin: 0;
  padding: 0;
}
.main1 li,.main1 a,.mn1,.main1 ul
{
  font-family: ‘Arial’;
  font-size: 17px;
  color: #fff;
  font-weight: bold;
  transition: .3s;
}
.main1 a
{
  color: #fff;
  margin: 0;
  text-decoration: none;
}
.main1 li,
.main1 ul
{
  list-style: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
  background: -webkit-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
  background: -ms-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
  background: -moz-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
  background: -o-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
}
.main1 li
{
  top: 100%;
  left: 0;
  line-height: 25px;
  padding: 10px;
  width: 140px;
  border: 1px solid #fff;
}
.main1 li:hover
{
  position: relative;
  cursor: pointer;
  background: rgb(52,48,255);
}
.main1 ul
{
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 150px;
}
.main1 ul ul
{
  top: 0;
  left: 100%;
}
.main1 li:hover > ul
{
  display: block;
}

^_^ Then search for </head> and Paste below code above it.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
  $(&quot;.mn1&quot;).hide();
});
$(function(){$(&quot;.abc1&quot;).click(function(){$(&#39;.mn1&#39;).toggle(1000);});});
</script>

^_^ Now you’ve done just save template.
^_^ It’s works using jquery toggle function.
^_^ It’s with Hide and Show features and also Fixed feature.
^_^ Don’t forget to bookmark our blog and our blog has now owned domain which is www.seebeetee.com.

Any problem while setting up?

Send us at wish box or contact us or comment.

Share This Now:

11 Comments

Add a Comment

Your email address will not be published. Required fields are marked *