March 27, 2013

How to Create a Drop Down Menu With Bubble Effect


JHE software : How to Create a Drop Down Menu With Bubble Effect. How to create a drop down menu with bubble effect. The menu has a different look with a drop down menu before. This drop down menu uses bubble effect which hover effects arising shaped like a bubble or bubbles. And the bubble that appears at the same time as the area of ​​the sub menu that appears along with the bubble.
A clear menu will make your website or blog look more elegant.

If you want to install this bubble drop down menu, please follow the steps below. But remember, this gadget also uses jQuery.

1. Login to blogger with your ID.
2. Click the design.
3. And click Edit HTML.
4. Would that every edit Html, Download Full Template first (back-up template) template that is safe, when an error occurs.
5. Do not forget to click the "Expand Widget Templates".
6. Find the code below: </ head>
7. Copy the code below and put it before the </ head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/BubbleNavigation/jquery.easing.1.3.js">

</script>
<script type="text/javascript">
 $(function() {
  $('#nav > div').hover(
  function () {
   var $this = $(this);
   $this.find('img').stop().animate({
    'width'     :'199px',
    'height'    :'199px',
    'top'       :'-25px',
    'left'      :'-25px',
    'opacity'   :'1.0'
   },500,'easeOutBack',function(){
    $(this).parent().find('ul').fadeIn(700);
   });

   $this.find('a:first,h2').addClass('active');
  },
  function () {
   var $this = $(this);
   $this.find('ul').fadeOut(500);
   $this.find('img').stop().animate({
    'width'     :'52px',
    'height'    :'52px',
    'top'       :'0px',
    'left'      :'0px',
    'opacity'   :'0.1'
   },5000,'easeOutBack');

   $this.find('a:first,h2').removeClass('active');
  }
 );
 });
</script>


<style>
.BubbleNavigation
{
width:950px;
height:70px;
border:2px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:1px 1px 4px #666;
-webkit-box-shadow:1px 1px 4px #666;
box-shadow:1px 1px 4px #666;

margin:0px auto;
padding:5px;
            }

.content{
width:100%;
height:50px;
background-color:#ccc;
opacity:0.7;
margin:0px auto;
            }

.navigation{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}
.navigation .item{
    position:absolute;
}
.menu-1{
    top:30px;
    left:50px;
}
.menu-2{
   top:30px;
   left:225px;
}
.menu-3{
   top:30px;
   left:425px;
}
.menu-4{
   top:30px;
   left:620px;
}
.menu-5{
   top:30px;
   left:815px;
}
a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}

.menu-1 a.icon{
    background:transparent url(https://lh3.googleusercontent.com/-yxMOEKhbHiM/Tjk0kwyiifI/AAAAAAAAA7U/uA6jGZ29YyU/s104/Bubble%2Bhome.png) no-repeat 0px 0px;
}
.menu-2 a.icon{
    background:transparent url(https://lh3.googleusercontent.com/-bTMfKbxf_JQ/Tjk0lGhZwmI/AAAAAAAAA7c/MJ-1FwLYPBw/s104/bubble%2Buser.png) no-repeat 0px 0px;
}
.menu-3 a.icon{
    background:transparent url(https://lh4.googleusercontent.com/-NQC72i3TkFo/Tjk0lMJiCaI/AAAAAAAAA7Y/sOWiYmgCcpQ/s104/bubble%2Bshop.png) no-repeat 0px 0px;
}
.menu-4 a.icon{
    background:transparent url(https://lh6.googleusercontent.com/-sTaW0uPlv_I/Tjk0kMtUYRI/AAAAAAAAA7M/cJpu3Om4Qxc/s104/bubble%2Bcamera.png) no-repeat 0px 0px;
}
.menu-5 a.icon{
    background:transparent url(https://lh6.googleusercontent.com/-a1DHufauo-Y/Tjk0kq--K1I/AAAAAAAAA7Q/AF5f-G4nOcU/s104/bubble%2Bfav.png) no-repeat 0px 0px;
}
.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;

}
.item h2{
    position:absolute;
    width:px;
    height:25px;
    background-color:#ccc;
border:1px solid #ccc;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    -moz-box-shadow:1px 1px 4px #000;
    -webkit-box-shadow:1px 1px 4px #000;
    box-shadow:1px 1px 4px #000;
    color:#222;
    font-size:18px;
    top:0px;
    left:60px;
padding:5px 10px 5px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:45px;
    left:0px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}

</style>

Note:
If the menu does not work well, please try to remove the jQuery javascript code like the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Usually there is a code in the template is the same jQuery javascript.

8. Save Template.

The next step you just add this code to the existing gadget under the header, follow these steps:

1. Select add gaget under the header. Click HTML/Javascript.
Copy and paste the code below on the gadget itself:

<div class="BubbleNavigation">
<div class="content">
<div class="navigation" id="nav">

<div class="item menu-1">
<img src="https://lh5.googleusercontent.com/-1nYVgKq7UK4/Tjk0i9BQjVI/AAAAAAAAA64/MQS8zAN5wqw/s104/Bubble%2B1.png" alt="" width="199" height="199" class="circle"/>
<a href="url of article" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="
url of article">Portfolio</a></li>
<li><a href="
url of article">Services</a></li>
<li><a href="
url of article">Contact</a></li>
</ul>
</div>

<div class="item menu-2">
<img src="https://lh5.googleusercontent.com/-lbt4a4KQMZU/Tjk0jD27LsI/AAAAAAAAA68/eCyEY0sfrMA/s104/Bubble%2B2.png" alt="" width="199" height="199" class="circle"/>
<a href="
url of article" class="icon"></a>
<h2>About</h2>
<ul>
<li><a href="
url of article">Profile</a></li>
<li><a href="
url of article">Properties</a></li>
 <li><a href="
url of article">Privacy</a></li>
</ul>
</div>


</div>
</div>
</div>

You may change the text RED color with your url.
2. Save.

Good luck and I hope useful. Do not forget to take the time to comment. Thank you. You can also subscribe to the latest articles from me, please use the subscribe button on the right of this page.

If there are articles that are not relevant or there are broken links, please notice through a comment. By including source link. Thank you.
By: Muhammad Zainudin

2 comments

April 11, 2013 at 1:44 PM

Nice blog design you've got here.
I like it.

April 12, 2013 at 3:21 PM

@technogeekthanks for your visit,

Post a Comment