Custom css class is not visible for menuitem

asked 2019-09-19 17:34:39 +0800

BrickWithGlasses
105 ● 3

updated 2019-09-20 11:51:19 +0800

hawk
3250 ● 1 ● 5
http://hawkphoenix.blogsp...

I want to highlight menu items to visualize what is current page.

My template:

<zk>
<style>
    .mymenuitem .z-menuitem {
        font-weight: bold !important;
        color: red !important;
        background-color: red !important;
    }

    .z-menuitem-content {
        background: none !important;
    }

</style>

<div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('ua.dynamicdemoadmin.viewmodel.MenuModel')">
    <!--<include hflex="1" src="include-menu.zul"/>-->
    <menubar id="mainMenu" orient="horizontal">

        <menuitem label="profiles" onClick="@command('getProfiles')">
            <attribute name="sclass" if="${vm.currentPosition == '/clients'}">
                mymenuitem
            </attribute>
        </menuitem>
        <menuitem label="contracts" onClick="@command('getContracts')">
            <attribute name="sclass" if="${vm.currentPosition == '/contracts'}">
                mymenuitem
            </attribute>
        </menuitem>
        <menuitem sclass="boldItem" label="cards" onClick="@command('getCards')">
            <attribute name="sclass" if="${vm.currentPosition == '/cards'}">
                mymenuitem
            </attribute>
        </menuitem>

    </menubar>
</div>        
</zk>

What I see in result html, is that css class is applied, but in styles tab (Chrome DevTools) .mymenuitem class is absent.

Second problem is that li tag that menuitem is converted to, contains a tag that is actually js applied to. And it's background covers changes in li. At current moment I, don't know how to make what I want.