Create beautiful hybrid menus using bubble jquery plugin
A beautiful menu created using bubble. This menu has mixed items like list, video, images etc. Bubble plugin can be used in variety of situations.
Example
Script & HTML
Menu HTML
<ul class="nav"> <li><a href="#" id="bubble1" data-bubbleid="bubble1content"><i class="icon-home"></i>Rockying</a> </li> <li><a href="#" id="bubble2" data-bubbleid="bubble2content"><i class="icon-book"></i>Photos</a></li> <li><a href="#" id="bubble3" data-bubbleid="bubble3content"><i class="icon-leaf"></i>Health</a> </li> <li><a href="#" id="bubble4" data-bubbleid="bubble4content"><i class="icon-envelope-alt"></i>Search</a> </li> </ul>
Bubble HTML
<div class="rst-bubble" id="bubble1content"> <div class="rst-bubble-body" style="width: 250px;"> <div class="row-fluid"> <div class="span6"> <a href="http://www.rockying.com/a/263?ref=rst" target="_blank"> <img src="Sula-vineyard-resort.jpg" class="img-rounded" alt="" /></a></div> <div class="span6"> <small>Nashik, a Confluence of Culture and Modernity; and a Perfect weekend Getaway!</small> </div> </div> <div class="row-fluid"> <div class="span6"> <a href="http://www.rockying.com/a/230?ref=rst" target="_blank"><img src="Brad-Pitt-Button.jpg" alt="" /></a></div> <div class="span6"> <small>The Magical Brush: Evolution of Make-up in Hollywood</small> </div> </div> </div> </div> <div class="rst-bubble" id="bubble2content"> <div class="rst-bubble-body" style="width: 300px;"> <div class="row-fluid"> <div class="span6"> <a href='http://www.rockying.com/p/983?ref=rst'> <img alt='' src='smallest%20turtle.jpg' /></a> </div> <div class="span6"> <a href='http://www.rockying.com/p/1028?ref=rst'> <img alt='' src='551306_515266958516185_342641743_n.jpg' /></a> </div> </div> </div> </div> <div class="rst-bubble" id="bubble3content"> <div class="rst-bubble-body" style="width: 500px;"> <div class="row-fluid"> <div class="span10"> <ul class="unstyled"> <li><a href="http://www.rockying.com/a/261?title=how-many-calories-do-you-need-busting-the-calorie-myth-and-calculating-the-exact-weight-you-should-be&ref=rst"> <h4> How Many Calories Do You Need?</h4> </a></li> <li><a href="http://www.rockying.com/a/257?title=9-fun-ways-to-burn-calories&ref=rst"> <h4> 9 Fun Ways to Burn Calories!</h4> </a></li> <li><a href="http://www.rockying.com/a/242?title=13-ways-to-move-more&ref=category"> <h4> 13 Ways to Move More!</h4> </a></li> <li><a href="http://www.rockying.com/a/240?title=13-super-fruits-for-2013&ref=category"> <h4> 13 Super Fruits for 2013!</h4> </a></li> </ul> </div> </div> </div> </div> <div class="rst-bubble" id="bubble4content"> <div class="rst-bubble-body" style="padding: 10px; width: 250px;"> <div class="row-fluid"> <div class="span9"> <form class="form"> <div class="control-group"> <label class="control-label" for="inputEmail"> Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword"> Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn"> Sign in</button> </div> </div> </form> </div> </div> </div> </div>
Script
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <!-- Include bubble CSS --> <link href="http://www.rudrasofttech.com/js-tools/bubble/bubble.css" rel="Stylesheet" type="text/css" /> <!-- Include bubble Library --> <script src="http://www.rudrasofttech.com/js-tools/bubble/bubble.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready( function () { $("#bubble1").bubble({ Position: 'bottom', Action: 'hover', CloseOther: true, Effect: false, Duration: 100, Distance: 12 }); $("#bubble2").bubble({ Position: 'bottom', Action: 'hover', CloseOther: true, Effect: false, Duration: 100, Distance: 12 }); $("#bubble3").bubble({ Position: 'bottom', Action: 'hover', CloseOther: true, Effect: false, Duration: 100, Distance: 12 }); $("#bubble4").bubble({ Position: 'bottom', Action: 'hover', CloseOther: true, Effect: false, Duration: 100, Distance: 12 }); } ); </script>License & Download Bubble Plugin