Script to easily change the background color of one or more menu/submenu items

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
Fender
 
 
Posts: 172
Joined: Sun Oct 16, 2011 11:01 am

Script to easily change the background color of one or more menu/submenu items

Post by Fender » 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.

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> 
  
I made a sample here so you can see how it's done

https://jsfiddle.net/Lkfd9mpr/

have fun
Fender

Post Reply