web design

Cursor following menu

Cursor following menu

A website navigation menu that follows the cursor, created with the jQuery library and CSS that’s easy to implement and configure. The script features simple markup, two levels navigation and styling via css. An extra feature in the script is the function that animates the page to anchor points which you can test on the single-page demo.

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability.

How to use it

Inside the head tag of your document attach the malihu.cfm.css which holds the styling for the menu and load both jquery.min.js (straight from Google) and the jquery.easing.1.3.js plugin that adds custom easing to our animations.

<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Inside the body tag, insert the menu markup

<div id="cf_menu">
  <div class="container">
      <div class="title">MENU</div>
    <ul>
      <li><a href="#" onclick="Animate2id('#home');return false">&uarr; Home</a></li>
      <li><a href="#" onclick="Animate2id('#about');return false">About me</a></li>
      <li><a href="work">+ Work</a>
              <ul>
                  <li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li>
                  <li><a href="#" onclick="Animate2id('#web');return false">Web</a></li>
                    <li><a href="#" onclick="Animate2id('#print');return false">Print</a></li>
        </ul>
      </li>
      <li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li>
      <li><a href="links">+ Interesting links</a>
                <ul>
                  <li><a href="#" onclick="Animate2id('#freebies');return false">Freebies &amp; Resources</a></li>
                    <li><a href="#" onclick="Animate2id('#people');return false">People</a></li>
        </ul>
      </li>
      <li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li>
            <li><a href="info">+ Script info</a>
                <ul>
                  <li><a href="http://manos.malihu.gr/cursor-following-menu/">See the post</a></li>
                    <li><a href="http://manos.malihu.gr/tuts/cursor_following_menu.zip">&darr; Download</a></li>
        </ul>
      </li>
            <li><a href="http://manos.malihu.gr">malihu</a></li>
    </ul>
  </div>
</div>

You can have a single sub-level on menu options by adding an additional unordered list inside list items.

Add the menu script and plugin at the end of the document, just before the closing body tag.

<script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
 
<script src="malihu.jquery.cfm.js"></script>

You can easily configure the menu by changing each variable to your liking.

Enjoy :)

License

You are free to use, study, improve and modify this script wherever and however you like.
Creative Commons License All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.


54 Comments

Post a comment
  1. Raji
    Posted on May 30, 2013 at 13:02 Permalink

    this site very useful and perfect

    thanks………………..

    Reply
  2. Udeh
    Posted on March 7, 2013 at 13:03 Permalink

    Thanks….

    Reply
  3. Balint
    Posted on September 7, 2012 at 14:22 Permalink

    Wow thanks for sharing! We think it’s innovative and can be very usefull! A little bit weird for the first time but… It gives you a lot of new possibilities in webdesign, user interface.. And also for touch screen devices! (for example in ipad works cool). Also i would make some changes for this pourpose.

    Reply
  4. toner dolum
    Posted on July 2, 2012 at 23:02 Permalink

    Thanks for this very good work

    Reply
  5. test
    Posted on May 12, 2012 at 17:28 Permalink

    testing!!!

    Reply
  6. adit
    Posted on April 17, 2012 at 18:32 Permalink

    ITS VERY COOL!!!
    but..
    why it wont work on my blog?
    only appear MENU in left corner of my blog,
    not following my cursor
    and when I click it, the sub menu wasnt there

    please help me :(

    Reply
    • malihu
      Posted on June 2, 2012 at 14:47 Permalink

      Without a link it is impossible to know what’s happening. Probably wrong path to some .js file. Check for errors with firebug (firefox), opera dragonfly or any other browser developer tools.

      Reply
  7. wreciak
    Posted on February 27, 2012 at 12:21 Permalink

    Hi
    Thank you for all that great tutorials in our page.
    I’m trying to use this script on one webpage, and i’m focusing one problem.
    If in the page is iframe (in my case embaded vimeo video), the mouse cursor will not get the real actual position over iframe. Tried to google some solution, but it’s really looks like overkill problem.
    Do you have any idea how to force js to read the global position and ignoring the iframe?
    The over the entire page is not solution, as we need to push buttons on the vimeo player …

    Thanks a lot for your time and ideas, i’ll link your page .

    Reply
  8. ChGvP
    Posted on February 22, 2012 at 10:03 Permalink

    Hi malihu,

    first of all – great tutorials and thanks for sharing. I like your menu very much.
    I’m relaunching my site – test at http://www.foto-ll.de/slide – in the next days and want to use it for navigating my site.
    But I want some extra behaviors and need some help. And I’m not the javascript pro – I can change only few and obvious things

    First, I want the menu only on the right side of the screen, because I want to display some texts on the left side and they shouldn’t be covered by the menu. At the moment I keep it at the top of the page by fixing the posY variable, which is nice , too. But I want to define an area for limiting the menu movement.

    Secondly, is it possible to open them menu by “onmousemove”?

    Do you have any suggestions?

    Thanks in advance for your help
    Chris

    Reply
  9. Arjun
    Posted on February 8, 2012 at 14:21 Permalink

    Hi malihu very nice work ….. if you don’t mind i have use this script
    and i have download this script …

    thank u very much
    Arjun

    Reply
    • malihu
      Posted on February 8, 2012 at 17:11 Permalink

      I don’t mind at all. The goal is to download and use the script :) Thanks!

      Reply
  10. jaybee
    Posted on November 29, 2011 at 21:24 Permalink

    Hi,
    Thanks for this very good work !!!
    I want to know if it’s possible to let the menu always open ?
    Thanks a lot ;-)

    Reply
  11. James Gladius
    Posted on November 9, 2011 at 10:34 Permalink

    Hi Manos!! I think you have an AWESOME last name :-)

    In fact I speak a little about your GREEK ancestors at:
    MeaningofLife.us

    Which uses your UNRIVALED FLOATING MENU, just splendid for long sites where fixed content is undesirable :-) Your menu is inventive and I’m using it in creative ways on other sites too :-)

    Your work is elegant, unique and functional! If the ungrateful want a plain menu, there are a MILLION of those, but only one MALIHU cursor following phenom :-)

    Thank you Manos – very much. God Bless you.
    Jezua.com

    Reply
    • malihu
      Posted on November 9, 2011 at 14:00 Permalink

      Thanks for your comments James! You’re very kind :)

      Reply
  12. Moran Ofir
    Posted on September 2, 2011 at 12:10 Permalink

    It`s a very nice tool , but irritating, I doubt the common user would love it.

    Thanks for it though.

    Moran Ofir, עיצוב אתרים.

    Reply
  13. Andreas Hopf
    Posted on August 22, 2011 at 11:18 Permalink

    Hej,

    I’d say that this is a very nice and unobtrusive idea; works rather well for full screen and single-long-page websites that are simply structured and rather filmic or image-centric. Of course online shops or corporate websites need different functionality. User research shows that regular people also have much difficulty with regular bar-type menus… I just think your solution is very suitable for certain situations and I’ll implement it for a design office and a porcelain label website.

    The only things I can’t get to work is: 1. on a full-screen website with a superbgimage or similar, when the menu floats at the right, the browser’s bottom scrollbar appears and 2. how to properly implement the anchors so as to scroll to different sections on very long one-page websites. Any ideas how that can be achieved?

    Thanks for sharing & greetings from Sweden

    Reply
  14. Steve Ocean
    Posted on August 15, 2011 at 21:30 Permalink

    It seems to me this would be especially handy on small screens, e.g. tablets.

    How about making it so you can drag and/or “toss” the menu around with a cursor/finger? So users can move it anywhere. I think it should still float automatically as users scroll, basically staying in the same relative position while content slides underneath. Good for maps, etc.

    Reply
  15. Emile
    Posted on June 28, 2011 at 21:47 Permalink

    Very interesting and cheeky! One thing I would appreciate though: a timer that from the moment you chase the cursor timely stops it to give the menu back more readily. Thank you! :)

    Reply
  16. selefon
    Posted on June 18, 2011 at 16:23 Permalink

    ooo thanks

    Reply
  17. web yazılım
    Posted on May 24, 2011 at 14:05 Permalink

    good work… thanks

    Reply
  18. Cran
    Posted on May 7, 2011 at 15:37 Permalink

    I have to say some things. First of all thank you for sharing this with us. I think it’s great. But i also agree with some of those who think it’s distracting. The problem i think it’s the size of the element. If it would be smaller and have a diferent movement, and a nice tooltip on hover, it would be perfect. I’m gonna try to modify your script to see if i can get do that. I’m thinking of some smal “+” sign that has a tootip “Menu” on hover, and when clicked opens the menu. The + showd be positioned somewhere in the lower right side of the mouse, and the movement showld be faster on y-up and x-left, and have a delay on the other sides.

    Reply
    • malihu
      Posted on June 1, 2011 at 13:34 Permalink

      Thanks Cran, it sounds great :) Let us know when you do it.

      Reply
  19. Raghibsuleman
    Posted on March 24, 2011 at 06:42 Permalink
  20. hp toner
    Posted on March 3, 2011 at 15:25 Permalink

    thank u very much.
    Nice work.

    Reply
  21. Chicca
    Posted on February 23, 2011 at 11:07 Permalink

    Hi! Did you see it your code in action at Kristinati.it (Italian fashion Designer)?

    Reply
    • malihu
      Posted on February 26, 2011 at 15:17 Permalink

      Yes, looks great :)
      Thanks a lot for using this script Chicca!

      Reply
  22. Skywalker
    Posted on February 6, 2011 at 18:49 Permalink

    I really like the concept of being able to navigate to other parts of the site / page without having to move the mouse up to the main menu again. Though the floating menu is technically interesting, from a user’s perspectevie I think it will become very annoying. Perhaps it would be better if the user could simply right click anywhere on the page, and the floating menu will appear immediately underneath the cursor (or perhaps after a CTRL + click). Or even make the floating menu semi transparent and have it float vertically to the left or the right of the screen (calling the menu to the mouse cursor position after right clicking).

    Anyhow, the “instant-navigate” idea I think is great, it just needs another implementation imho.

    Reply
    • malihu
      Posted on February 7, 2011 at 13:45 Permalink

      Hello!
      I have also thought the idea of click-anywhere to open the menu and I think it’d be very interesting. I’ve done some other single-axis floating menus and they’re definitely more common to the user. I’ll definitely try the first way on a future script.
      Thanks a lot for your feedback and suggestions, I really appreciate it.

      Reply
  23. csabi
    Posted on February 2, 2011 at 15:48 Permalink

    Hi! You have lot`s of great tutorials!
    Congratulations!
    I`we just started a tutorial indexing website and I would like to ask you to submit some tutorials :D
    You can submit tutorials without registering, but if you register you will get gift points for each tutorial and you can use these points to buy ads.

    Please visit it: http://www.tutorialswindow.com
    Thanks

    Reply
  24. ramon
    Posted on January 5, 2011 at 18:23 Permalink

    is there a way to download the written tutorial or i have to copy and paste in word

    Reply
    • malihu
      Posted on January 7, 2011 at 12:11 Permalink

      If you mean to download this post, no. Only copy-paste.

      Reply
  25. Edis
    Posted on January 4, 2011 at 15:06 Permalink

    Dude,
    your tuts are awesome.

    I liked the menu the first minute or so, because it was new and interesting and stuff.
    But then it was a distraction from the main content.
    So a proposition of mine:
    Keep it on the left side (like on the picture of this post) next to the content.
    It would be more usable and less annoying.
    So that’s it. Let me check again . . . no that’s it.

    Your idea was crazy though . . .

    Reply
    • malihu
      Posted on January 7, 2011 at 12:20 Permalink

      Hi Edis,
      The script was meant to be a bit “crazy” and different ;)

      I know the menu can be distracting, especially on this demo where the content is just “lorem ipsum…”. I think that on real content, the user is focused and interested in the actual content and usually doesn’t move the cursor like crazy, so it won’t be that distracting.

      Your suggestion is great. It’s fairly easy to implement to have the menu fixed on one side and floating vertical with scrolling.

      Thanks

      Reply
      • Shawn
        Posted on April 9, 2011 at 11:29 Permalink

        Hey great work…im thinking about using this with a fullscreen image site. I was wondering how i can make it so the Browser Scroll bars don’t appear when it floats off the bottom or right side. Basically like a 20px stoppage before.

        Reply
      • malihu
        Posted on April 13, 2011 at 08:29 Permalink

        @Shawn
        On top of my head (haven’t test this):
        In malihu.jquery.cfm.js, inside MouseMove function (at the bottom) you could add something like:
        if(posX>$(window).width()+20){ $("body").css("overflow-x","hidden"); }else{ $("body").css("overflow-x","auto"); }

        Reply
      • Shawn
        Posted on April 16, 2011 at 19:27 Permalink

        Ok Thanks…I will have a look

        Reply
      • Shawn
        Posted on April 20, 2011 at 09:55 Permalink

        Hmm…I gave this a few attempts, although i did not have any luck. WOuld you have any suggestions?

        Thank You

        Reply
  26. pol
    Posted on December 27, 2010 at 12:26 Permalink

    i’ve been unimpressed for a while regarding jquery navigation plugins yet this brought hope back to my life.
    i can think of many user who will appreciate such awesomeness.
    thanks for sharing

    Reply
  27. Valikonen
    Posted on December 20, 2010 at 18:16 Permalink

    Very cool tutorial, thanks. If you want to see menus, web site trends, galleries, extension etc, visit http://www.1artmedia.com , you have online demo and free download. Bye!

    Reply
  28. Werner
    Posted on December 17, 2010 at 19:42 Permalink

    I like it and do believe it to be useful. When used in conjunction with a fullscreen image gallery, for example, it’s an easy way to provide navigation without necessitating the clutter and distraction of the ever-present, in-your-face menu. Thanks for sharing this. I’m seriously considering it for my current project. Unimpressed and Sully, of course, need not visit . . . .

    Reply
    • malihu
      Posted on December 18, 2010 at 03:22 Permalink

      I too was thinking of implementing this kind of navigation on a gallery ;)

      Reply
  29. JPop
    Posted on December 14, 2010 at 16:31 Permalink

    Great tutorial!! I was looking for something like this! Thanks for sharing :)

    Reply
  30. Michael Pehl
    Posted on December 14, 2010 at 12:17 Permalink

    The idea is cool, I have to experiment with it :)

    Good job, thanks for sharing cool ideas and fresh “blood” :)

    Reply
  31. e11world
    Posted on December 14, 2010 at 01:44 Permalink

    Very nice implementation and a really interesting way for this menu. I like the sub navs as well, nice touch!

    Reply
  32. malihu
    Posted on December 14, 2010 at 00:35 Permalink

    Thank you all for your comments!
    I truly appreciate your feedback (positive and negative).

    Yes it’s a bit weird and distracting navigation but it’s fun as hell to create so I couldn’t help it :P In my opinion it’s not that bad if you get used to it, but that’s just me…

    @Jared Williams me too ;)

    @Unimpressed lol

    @Sully no need to apologize. I greatly appreciate your honesty.

    Reply
  33. Sully
    Posted on December 13, 2010 at 23:59 Permalink

    If I visited a page that used this I would leave immediately. Wow – this is a horrible. Sorry; just being honest.

    Reply
  34. Unimpressed
    Posted on December 13, 2010 at 23:59 Permalink

    This is technically cool. Great job with that.

    But it hurts me so much in terms of usability. It’s so bad. Holy fuck. The worst thing I’ve seen this year.

    Reply
  35. albergo viserbella
    Posted on December 13, 2010 at 22:01 Permalink

    I find it very nice, r
    thank you for sharing!
    bye

    Reply
  36. Jared Williams
    Posted on December 13, 2010 at 20:08 Permalink

    Very cool. I can think of some other uses for this besides a menu too. Nice work.

    Reply
  37. Stephane Mourey
    Posted on December 13, 2010 at 14:34 Permalink

    Amazing, but boring…
    I mean : the trick is technically interesting and amazing, but it’s distracting from the content. And, for me, the content of the site is the main, anything else is here to serve it.

    Reply
  38. chlitto
    Posted on December 13, 2010 at 14:20 Permalink

    a pie menu would be better ;]

    Reply
  39. El
    Posted on December 13, 2010 at 12:31 Permalink

    Thanks for sharing but i am not convinced if the users will find this useful.
    I think the flying menu will be annoying to many of them.

    Anyway, thanks again for sharing your work with us

    Reply
  40. Elliott
    Posted on December 12, 2010 at 20:50 Permalink

    Pretty interesting malihu. I’m not sure if people would like it or not (maybe take some time to get used to it) but it is always great to see new out of the box ideas like this.

    Reply
    • rida57
      Posted on December 16, 2010 at 12:04 Permalink

      I don’t agree, I think this is excellent, maybe the use of it is still not obvious but that kind of idea could be the precursor of a whole modern interface project you can see in some movies like matrix etc…
      make the menu appearing vocally would be awesome though…

      Reply


Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>

css.php