Question

I try to create a floating menu like Aloha editor but it not working properly. Any one can help me with basic example for floating menu in jquery.

I am not looking for menu floating I need similar toolbar floating in Aloha editor

$(document).ready(function() {
            var fBox = $('#box');
              fBox.draggable();
              $(".columns").click(function(e){
                var mouseXPos = e.pageX;
                var mouseYPos = e.pageY;
                console.log("mouseXPos:"  + mouseXPos + "cleft:" +mouseYPos);
              fBox.animate({top:mouseYPos},1000);
              fBox.animate({left:mouseXPos},1000);
              });
            });

CSS

<style>
        #page{width:600px;margin:0 auto;}
        #page .columns{float:left;width:250px;}
        #box{   background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    left: 749px;
    opacity: 0.9;
    padding: 0 10px;
    position: absolute;
    top: 35px;
    width: 216px;}
        </style>

HTML

<div id="page">
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div id="box">
                <h2>hello world</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>

example floating toolbar http://elankeeran.com/manish/prototype/alohaEditor/

Answer 1

There is a tutorial here:

Creating a Floating HTML Menu Using jQuery and CSS