Few customizations in C1WijMenu

C1Wijmo Controls are fully customizable and their look and feel can be changed according to your own requirement. I am going to demonstrate this using C1Menu. Let us first start with applying a custom theme to the control. Changing the theme - 1) Create a website and drag drop c1Menu on to the web page. 2) Click the smart tag and open the Tasks Menu 3) Inside theme property enter the CDN Url to specify the theme. You can find the cdn links for the themes you want to apply at the below mentioned url - http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/ Run the project and observe that Theme gets applied to the control. Changing Appearances of C1Menu - In case you want to tweak C1Menu's appearances all you need to do is find the correct css and override it with the style you desire. For instance in case you want to change the default C1Menu Items font-size, family on mouse hover tweak the below given css- .wijmo-wijmenu a.wijmo-wijmenu-link:hover { color: #701; font-family:Calibri; background: Yellow; border-color: red; border-style: solid; } This will apply a different the font-family, background, border-color and style as you desire to the menu items. Stopping Auto-Wrap in C1Menu - C1Menu's default behavior is that it auto wraps the contents inside Menu Items, in case one needs to switch it off - please find the below given css which needs to be overrided for stopping the wrapping - .wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child { width: auto; } .wijmo-wijmenu-text { white-space: nowrap; } I am attaching a sample along with which demonstrates all above mentioned points i.e; applying a customized theme, changing appearance and stopping the auto-wrap. Please find the same - 'sample_c1Menu' Run the sample. You will see C1Menu applied with theme - 'ui-darkness'. It's child menu items will not display the auto-wrap behavior and on hovering mouse over items the custom style that we applied will be observed.


GrapeCity Developer Tools
comments powered by Disqus