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

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Donating helps greatly in developing and updating free software and running this blog 🙂