Script to easily change the background color of one or more menu/submenu items
Posted: Sun Dec 27, 2020 2:52 pm
Script to easily change the background color of menu or/and submenu items
No more hassle with li nth child.
The script give each menu item an item number.
It always start with 0 your first menu
Make your menu the way you like it.
Run the script and define in css the different background color you would like to have for your menu or submenu item.
I made a sample here so you can see how it's done
https://jsfiddle.net/Lkfd9mpr/
have fun
Fender
No more hassle with li nth child.
The script give each menu item an item number.
It always start with 0 your first menu
Make your menu the way you like it.
Run the script and define in css the different background color you would like to have for your menu or submenu item.
Code: Select all
<style>
#wb_master_CssMenu1 a.nav-link.item-0 {
background: green;
}
#wb_master_CssMenu1 a.nav-link.item-1 {
background: blue;
}
#wb_master_CssMenu1 a.nav-link.item-2 {
background: blue;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-2:hover {
background: #C72424;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-3 {
background: purple;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-3:hover {
background: #C72424;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-4 {
background: green;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-4:hover {
background: #C72424;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-7 {
background: blue;
color: white;
}
</style>
Code: Select all
<script>
$(document).ready(function(){
$( "ul li a" ).addClass(function( index ) {
return "item-" + index;
});
});
</script>
https://jsfiddle.net/Lkfd9mpr/
have fun
Fender