• 7/1/2013
• 126614
• RudraSofttech LLP, Best jQuery plugin developer, Best Web development company

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>

Nashik, a Confluence of Culture and Modernity; and a Perfect weekend Getaway!

The Magical Brush: Evolution of Make-up in Hollywood