menu

[Muhammad Izhharuddin Muhammad Marzuqi]

Hi syncfusion team, 

 i am having issues to change the menu color when mouse over, can u help me on how to change the menu color, basically currently all the color follow the theme color. how i can customized the color when mouse over on particular menu

 

 

my code as below, 

 

 

<ej-Menu id="template" padding-top="0px;" width="59%;" menu-type="@MenuType.

NormalMenu" orientation="@Orientation.

Vertical" css-class="menubar">

 

        <e-menu-items style="padding-left:20px">

 

            <e-menu-item url="/Hijr/HijrDashboard" text="Home" image-url="../icon/home_icon.

png">

 

            </e-menu-item>

 

            <e-menu-item url=""  text="Pendaftaran" image-url="../icon/register_

icon.png" >

 

                <e-menu-child-items>

 

                    <e-menu-child-item>

 

                        <e-content-template>

 

                            <div class="e-tile-group">

 

                                <div class="e-tile-small-col-2"> this.BorderColor = System.Drawing.SystemColors.

MenuHighlight;

 

                                    <ej-tile id="ExternalPengesahan" image-position="@

TileImagePosition.Center" tile-size="@TileSize.Medium" text="Pengesahan"  image-url="../images/tile/

windows/pengesahan.png" mouse-down="

ExternalPengesahan"></ej-tile>

 

                                    <ej-tile id="ExternalDaftarKursus" image-position="@

TileImagePosition.Center" tile-size="@TileSize.Medium" text="Daftar Kursus" image-url="../images/tile/

windows/register.png" mouse-down="

ExternalDaftarKursus"></ej-

tile>

 

                                </div>

 

                            </div>

 

                        </e-content-template>

 

                    </e-menu-child-item>

 

                </e-menu-child-items>

 

            </e-menu-item>

 

            <e-menu-item url="/Hijr/HijrDashboard" text="Aduan" image-url="../icon/complaints.

png">

 

                <e-menu-child-items>

 

                    <e-menu-child-item>

 

                        <e-content-template>

 

                            <div class="e-tile-group">

 

                                <div class="e-tile-column">

 

                                    <ej-tile id="JHComplaintForm" image-position="@

TileImagePosition.Center" tile-size="@TileSize.Medium" text="Borang Aduan" image-url="../images/tile/

windows/complaint3.png" mouse-down="JHComplaintForm"><

/ej-tile>

 

                                </div>

 

                            </div>

 

                        </e-content-template>

 

                    </e-menu-child-item>

 

                </e-menu-child-items>

 

            </e-menu-item>

 

        </e-menu-items>

 

    </ej-Menu>

 

s

 

regards,

 

izhar

[Keerthana Rajendran]

Hi Muhammad,   

 

Thank you for contacting Syncfusion support. 

We have prepared a sample based on your requirement. We suggest you to change the hover color of menu through cssClass property using the below code 

<ej-Menu id="template" padding-top="0px;" width="59%;" menu-type="@MenuType.NormalMenu" orientation="@Orientation.Vertical" css-class="menubar"> 

        <e-menu-items style="padding-left:20px"> 

            ………………………. 

        </e-menu-items> 

    </ej-Menu> 

<style> 

 

    .menubar .e-menu.e-vertical .e-list:hover, .menubar .e-menu.e-vertical .e-mhover>.e-menulink 

    { 

        background:darkturquoise; 

    } 

</style> 

  

We have attached a sample for your reference. Please download the sample from 

http://www.syncfusion.com/downloads/support/directtrac/189980/ze/Menu1516273917 

  

Regards, 

Keerthana. 

 

[Muhammad Izhharuddin Muhammad Marzuqi]

Hi, it solved the problem. Thanks a lot.

Best Regards,

Izhar

[Gopi Govindasamy]

Hi Muhammad, 

 

Most Welcome. we are glad that your issue is resolved. 

 

Regards, 

Gopi G. 

[ACM]

Had a problem with child items but sollution found :

add this line to the style if you have child items in your menu 

"  , menubar .e-menu.e-vertical .e-mfocused>.e-menulink " 

else the parent color will revert back to default when u focus on a child 

[Keerthana Rajendran]

Hi Muhammad, 

 

We are glad to hear that your problem is solved, let us know if you need any assistance. 

  

 

Regards, 

Keerthana.