Responsive And Pure CSS3 Drop Down Menu For Blogger

By -

By Parth Makadiya

Drop Down Navigation Menu,CSS3,web desigining,widgets
 Today we have got another widget for you guysthat will really help you to design your site most awesome and cool.Site owners always wantsomething unique and eye catching for their site in order to attract the users toward their site and we have got an cool drop down menu bar for your site that we hope you gonna love it and will applyit on your site.Drop down menus are first thing which attract your readers as the categories of your site lied there.Therefore drop down menusshould be stylish and friendly.
                                        The drop down menu which we are going to share with you guys is completely friendly without any scripts and simple.It contain simple and light CSS3 coding that will not effect the speed of your site.If you want to see the live demo of that awesome button then click the below button.


Live Demo

About The Drop Down Menu Bar

This bar is simple,light and most important thing responsive that adjust according to the different screens.It is pure CSS3 coding drop down menu bar.It is for the blogger users.It will not effect the speed of your site at all as i have said before the coding is very light and i suggest you to use it once.

Adding The Drop Down Menu In Blogger

It is not a difficult task to get this menu bar.You just have to follow some easy steps that will help and the bar is yours.
  • Go To Blogger >> Your Blog  >> Layout
  • Add A Gadget >> HTML/Javascript
  • And Paste the below code in HTML/JavaScript Box

<style>
/*------ CSS3 Drop Down Menu By BE (www.alltricks007.blogspot.in)---------*/
#be-css-menu ul,
#be-css-menu li,
#be-css-menu span,
#be-css-menu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#be-css-menu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
  background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  border-bottom: 2px solid #0074d9;
  width: auto;
}
#be-css-menu:after,
#be-css-menu ul:after {
  content: '';
  display: block;
  clear: both;
}
#be-css-menu a {
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
  background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: linear-gradient(top, #fefefe 0%, #ececec 100%);
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#be-css-menu ul {
  list-style: none;
}
#be-css-menu > ul {
  float: left;
}
#be-css-menu > ul > li {
  float: left;
}
#be-css-menu > ul > li > a {
  color: #000;
  font-size: 12px;
}
#be-css-menu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #3EA4FD;
  margin-left: -10px;
}
#be-css-menu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#be-css-menu > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #3EA4FD;
  margin-left: -10px;
}
#be-css-menu > ul > li.active > a {
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#be-css-menu > ul > li:hover > a {
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#be-css-menu .be-sub {
  z-index: 1;
}
#be-css-menu .be-sub:hover > ul {
  display: block;
}
#be-css-menu .be-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#be-css-menu .be-sub ul li {
  *margin-bottom: -1px;
}
#be-css-menu .be-sub ul li a {
  background: #3EA4FD;
  border-bottom: 1px dotted #625F61;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#be-css-menu .be-sub ul li:hover a {
  background: #3EA4FD;
}
#be-css-menu .be-sub .be-sub:hover > ul {
  display: block;
}
#be-css-menu .be-sub .be-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#be-css-menu .be-sub .be-sub ul li a {
  background: #555657;
  border-bottom: 1px dotted #625F61;
}
#be-css-menu .be-sub .be-sub ul li a:hover {
  background: #B3AFB0;
}
</style>
<div id='be-css-menu'>
<ul>
   <li class='active'><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
   <li class='be-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='be-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About Me</span></a></li>
   <li class='last'><a href='#'><span>Contact Me</span></a></li>
</ul>
</div>

  • Replace the  # with the links of the pages which you want to add.Replace the Yellow Highlighted Text with the names of your categories
  • After replacing all the above things.Click Save
  • Congratulations!! The Awesome and responsive Menu Bar is Yours.

Need Help?

If you have any query then ask me, i will respond you as soon as possible.If your liking my work then please like and share with your friends.Your likes and shares are precious for us.Till than keep doing friendly and professional blogging.
Cheers!

Comments

Post a Comment

Popular posts from this blog

Android 229 Keycode issue : Solved

By -
Hello World,           I was having one weird issue with an Android device and that is key code value is 229 and I wanted to prevent it. What I wanted to Achieve? The numeric keyboard on android device The keyboard can only press 0-9 digits no dot or no + - or anything limit character to 4 digit What is the problem? I was using onKeyUp or onKeyDown and more, but I was getting 229 or couldn't get the value at all. We will use the regex to validate the value and on the basis of value, we will set value.   So let's look at a running example of this: See the Pen Android-226-input by Parth Makadiya ( @parthmakadiya12-the-flexboxer ) on CodePen . Link: 1. Full Page view -  https://codepen.io/parthmakadiya12-the-flexboxer/full/zVEoEG 2.  https://stackblitz.com/edit/android-226-input Open it in Mobile and see codes.
Read more

HACK WEBSITE USING SQLMAP | KALI LINUX - BACKTRACK

By -
Image
BY Parth Makadiya In this tutorial I am going to show you how to hack a website with slqmap on Kali Linux. Introduction [ * ]Sqlmap is an open source penetration testing tool that automates the process of detecting and exploiting SQL injection flaws and taking over of database servers. It comes with a powerful detection engine, many niche features for the ultimate penetration tester and a broad range of switches lasting from database fingerprinting, over data fetching from the database, to accessing the underlying file system and executing commands on the operating system via out-of-band connections. This is all about sqlmap.  Now follow my steps to hack a website using sqlmap. Step 1 [ * ]Find Sql vulnerable site.  I will give you some dorks which may help you finding websites vulnerable to Sql Injection. Code: ]inurl:index.php?id= inurl:trainers.php?id= inurl:buy.php?category= inurl:article.php?ID= inurllay_old.php?id= inurl:declaration_more.php...
Read more

How to Brute Force hacking Facebook in Kali Linux

By -
Image
By Parth Makadiya hello all, how to learn facebook hacking?  facebook hacking  Brute force python scripting  We need a tool: 1. Python Script - facebook.py 2. Wordlist - e.g. pass.txt or wordlist.txt I have already installed python or  Install python  after installing step 1. [*]  root@lhackg:~# apt-get install python-mechanize step 2. now  downloading facebook.py [*] root@lhackg~# chmod +x facebook.py [*] root@lhackg:~# python facebook.py Note: - This tool can crack facebook account even if you don't have the email of your victim # Hit CTRL+C to quit the program # Use www.graph.facebook.com for more infos about your victim ^_^ # Enter |Email| |Phone number| |Profile ID number| |Username| :  lhackg.lhackg    << my facebook username [*] Enter the name of the password list file : /root/Desktop/pass.txt  <<   my wordlist localate         +=======================================...
Read more