📜 ⬆️ ⬇️

Menu with smooth color inversion

I present to your attention the menu with a smooth inversion of color when blending the cursor.


image
Under the cut itself is a plugin and a little about the concept.

How it works

A clone wrapped in a container is created for the menu.
When the user hovers over a menu item, the position of the container is shifted to this element, and internal content also scrolls to this element.

Clearly:

image
Thanks to this, the desired effect is achieved.

Connection

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="js/inji_inversion_menu.js" type="text/javascript"></script> <script> $(function() { $( '.menu' ).inji_inversion_menu({bg:'#444',font:'#fff'}); }); </script> 

Options

 options = { bg: '#000', //  font: '#fff', //   activeclass: 'active', //   cloneclass: 'inji_inversion_menu_clone', //    navcursorclass: 'inji_inversion_menu_navcursor', //   speed: 500 //     } 

')
Links

Demo
Archive with plugin
github

PS

I would appreciate constructive comments and suggestions for improvement

upd

chrome fix
Firefox fix
speed setting added
ie8 fix

Source: https://habr.com/ru/post/149864/


All Articles