This time I will share jQuery Plugin and tutorial about jQuery Plugin For Tooltip Style Floating Navigation – jQTipnav, hope it will help you in programming stack.
jQTipnav is a jQuery plugin for appending a tooltip-style, scrollable navigation bar to any html element that support both hover and click events.
How to use it:
1. Include jQuery library and the jQuery jQTipnav plugin on the webpage as usual.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="jqtipnav.min.js"></script> |
2. Create a navigation list.
3 |
<li><a href="">Menu 2 </a> |</li> |
4 |
<li><a href="">Menu 3</a></li> |
3. Append the navigation list to an action element (e.g. a tag) that triggers on hover.
2 |
'action_element': $('#SELECTOR') |
4. Add your own CSS styles to the navigation.
07 |
[data-jqtipnav] ul { list-style-type: none } |
09 |
[data-jqtipnav] ul, [data-jqtipnav] ul li { |
15 |
[data-jqtipnav] ul li { |
20 |
[data-jqtipnav] ul li a { |
21 |
text-decoration: none; |
25 |
[data-jqtipnav] ul li a:visited { color: inherit } |
27 |
[data-jqtipnav] ul li a:hover { text-decoration: underline } |
5. Modify the default fade-out animation speed.
2 |
'action_element': $('#SELECTOR'), |
6. Change the default trigger event ‘hover’ to ‘click’.
2 |
'action_element': $('#SELECTOR'), |
4 |
'trigger_event': 'click' |
Change log:
2016-02-05
- change default fade time to 500ms
2016-02-03
2016-01-15
This awesome jQuery plugin is developed by TvrtkoM. For more Advanced Usages, please check the demo page or visit the official website.
