Create Simple Jquery Plugin To Add An Arrow On Active Menu
written on Min 10 November 2013 by Habibillah
Sometime I need to put an arrow on active menu visited by website user or visitor on simple way as image below.
Firstly, prepare HTML image for arrow and a list of menus
<img class="up_arrow" src="images/up_arrow.png" />
<div class="menu left">
<a href="#" class="active">About Us</a>
<a href="#">The Dream</a>
<a href="#">Events</a>
<a href="#">Contact Us</a>
<a href="#">Affiliates</a>
</div>
set absolute and hide the image on CSS file for first load
.up_arrow {
position: absolute;
display: none;
}
add javascript and write it as jquery plugin
(function($) {
$.fn.putMenuArrow = function() {
$('.up_arrow').css({
'display': 'block',
'position': 'absolute',
'left': ($(this).offset().left + $(this).outerWidth() / 2) - 17, // 17 is width of arrow image
'top': $(this).offset().top - 19 //19 is height of arrow image
});
}
}(jQuery));
// call putMenuArrow plugin
$(document).ready(function() {
$('.menu a.active').putMenuArrow();
$('.menu a').click(function(e) {
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
$(this).putMenuArrow();
});
});
The complete demo can be found at: