Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$(window).load( function(){
/* Get toggle effect on header menu */
/* preparation: wrap menu text with <span> tag and add empty span tag */
$("#menu-primary-menu>li.menu-item>a").each( function(){
$(this).contents().eq(0).wrap('<span class=\"menu-text-switch\">');
});
/* Fixing width so menu item didn't change width */
$("#menu-primary-menu>li.menu-item").each( function(){
//distinguish between two header menu modes
if($(window).width() > 768){
$my_width = $(this).width();
}else{
$my_width = $(window).width();
}
$(this).find(">a").width($my_width - 30);
});
/* Insert different Font Awesome icons for different menu items */
$("#menu-primary-menu .menu-item-home>a").prepend("<span class=\"menu-item-icon menu-text-switch\"><i class=\"fa fa-home\" aria-hidden=\"true\"></i></span>");
$("#menu-primary-menu .menu-item-iot>a").prepend("<span class=\"menu-item-icon menu-text-switch\"><i class=\"fa fa-mixcloud\" aria-hidden=\"true\"></i></span>");
$("#menu-primary-menu .menu-item-cycling>a").prepend("<span class=\"menu-item-icon menu-text-switch\"><i class=\"fa fa-bicycle\" aria-hidden=\"true\"></i></span>");
$("#menu-primary-menu .menu-item-web>a").prepend("<span class=\"menu-item-icon menu-text-switch\"><i class=\"fa fa-at\" aria-hidden=\"true\"></i></span>");
$("#menu-primary-menu .menu-item-beer-life>a").prepend("<span class=\"menu-item-icon menu-text-switch\"><i class=\"fa fa-beer\" aria-hidden=\"true\"></i></span>");
/* Specify delay and interval for each menu item*/
fade2("#menu-primary-menu .menu-item-home>a>.menu-text-switch",3000,100);
fade2("#menu-primary-menu .menu-item-iot>a>.menu-text-switch",3000,700);
fade2("#menu-primary-menu .menu-item-cycling>a>.menu-text-switch",3000,300);
fade2("#menu-primary-menu .menu-item-web>a>.menu-text-switch",3000,900);
fade2("#menu-primary-menu .menu-item-beer-life>a>.menu-text-switch",3000,500);
/* Select a particular menu item, delay for a certain time and start text-icon toggle
select_str: selector string for jQuery.
duration: the period of text-icon switching.
delay: delay at load.
*/
function fade2(select_str,duration,delay){
setTimeout(function(){
setInterval(function(){
$(select_str).fadeToggle(300);
},duration);
},delay);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.