Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by  mattkay 11 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Selected item #4384

    rhonsberger
    Member

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

    Thanks,
    Rick

    Selected item #4391

    Peter Stoev
    Keymaster

    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

    Selected item #4462

    rhonsberger
    Member

    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

    Selected item #4463

    rhonsberger
    Member

    ..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

    Selected item #4864

    mattkay
    Participant

    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);

    });

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.