How to style individual menu items differently in jQuery UI Menu

Question

With the help of code can i know How to style individual menu items differently in jQuery UI Menu?

Answer 1

To style individual menu items differently in a jQuery UI Menu, you can use custom CSS classes:

Using Custom CSS Classes

$(function() {

  $("#menu").menu({

    create: function(event, ui) {

      $(this).find("li").eq(0).addClass("highlight-item"); // First item

      $(this).find("li").eq(2).addClass("warning-item");  // Third item

    }

  });

});

CSS:

.highlight-item a {

  background-color: #ffeb3b !important;

  color: #333 !important;

  font-weight: bold;

}


.warning-item a {

  background-color: #ff5722 !important;

  color: white !important;

}