Selected item

[rhonsbergerMember]

Is it possible to visually offset, or select, a top level menu item?

Thanks,
Rick

[Peter StoevKeymaster]

Hi Rick,

In the HTML structure, you can set an ID to a top-level item. Then, after the Menu’s initialization, you can select it with jQuery selection by its ID and use the jQuery’s addClass method to add a custom CSS Style to the item.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rhonsbergerMember]

Thanks for the suggestion Peter. I’m not having any luck though due to CSS’s prioritization. I’m unable to change things like the li’s background color and border. I’ve tried using !important as well, but with no luck. Any further thoughts?

Best,
Rick

[rhonsbergerMember]

..found a solution. Instead of using:

$(‘#solutionsmenu’).addClass(‘HighlightedTopMenu’);

to add the new class, I’m using:

$(‘#solutionsmenu’).css(‘background-color’, ‘red’);

to change the style via jquery

I’d appreciate an other thoughts though.

Thanks,
Rick

[mattkayParticipant]

we have tried the above example but we are not able to show a background color for a selected menu item.

our basic goal is to just change the background color of the menu after the user selects the menu to indicate which menu has been selected.

here is our menu code in case you can find something that we are doing wrong. your help is much appreciated!!!!!

.jqx-menu ul {background: #d7ecf3 !important;font:13px arial; font-weight:bold; border-style:none}
.jqx-menu-horizontal {background: #d7ecf3 !important;font:13px arial; font-weight:bold; border-style:none;margin-left: auto; margin-right: auto;}
.jqx-menu-item-top {background: #d7ecf3 !important;font:13px arial; font-weight:bold; border-style:none}
.jqx-menu-item-selected {background: #2aabab !important;font:13px arial; font-weight:bold; border-style:none}
.jqx-menu-item-top-hover {background: #d7ecf3 !important;font:13px arial; font-weight:bold; border-style:none; text-decoration:underline}
.jqx-menu-item-top-selected {background: #2aabab !important;font:13px arial; font-weight:bold; border-style:none}
.jqx-menu-item-top-hover{color: #3268b6 !important;}

$(document).ready(function () {
var theme = getTheme();
// Create a jqxMenu
$(“#jqxMenu”).jqxMenu({ width: ‘100%’, height: ’30px’ });
$(“#jqxMenu”).css(‘visibility’, ‘visible’);

$(“#disabled”).jqxCheckBox({ theme: theme, width: ‘150px’, height: ’20px’ });
$(“#open”).jqxCheckBox({ theme: theme, width: ‘150px’, height: ’20px’ });
$(“#hover”).jqxCheckBox({ theme: theme, width: ‘150px’, height: ’20px’ });
$(“#topLevelArrows”).jqxCheckBox({ theme: theme, width: ‘200px’, height: ’20px’ });
$(“#animation”).jqxCheckBox({ theme: theme, width: ‘150px’, height: ’20px’ });
$(“#animation”).bind(‘change’, function (event) {
var value = event.args.checked;
// enable or disable the menu’s animation.
if (!value) {
$(“#jqxMenu”).jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 });
}
else {
$(“#jqxMenu”).jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
}
});
$(“#disabled”).bind(‘change’, function (event) {
var value = event.args.checked;
// enable or disable the menu
if (!value) {
$(“#jqxMenu”).jqxMenu({ disabled: false });
}
else {
$(“#jqxMenu”).jqxMenu({ disabled: true });
}
});
$(“#hover”).bind(‘change’, function (event) {
var value = event.args.checked;
// enable or disable the menu’s hover effect.
if (!value) {
$(“#jqxMenu”).jqxMenu({ enableHover: false });
}
else {
$(“#jqxMenu”).jqxMenu({ enableHover: true });
}
});
$(“#open”).bind(‘change’, function (event) {
var value = event.args.checked;
// enable or disable the opening of the top level menu items when the user hovers them.
if (!value) {
$(“#jqxMenu”).jqxMenu({ autoOpen: false });
}
else {
$(“#jqxMenu”).jqxMenu({ autoOpen: true });
}
});
$(“#topLevelArrows”).bind(‘change’, function (event) {
var value = event.args.checked;
// enable or disable the opening of the top level menu items when the user hovers them.
if (!value) {
$(“#jqxMenu”).jqxMenu({ showTopLevelArrows: false });
}
else {
$(“#jqxMenu”).jqxMenu({ showTopLevelArrows: true });
}
});
$(“#jqxMenu”).jqxMenu(‘disable’, ‘fin’, true);

});

My Company
My Department
My Paystubs
My Time
My Expenses

[Author]

Posts