box shadow and jqxMenu

[bronson3Member]

I\’d like to surround each sub menu with a CSS3 box shadow. The problem is shadow width and the blur distance aren\’t taken in calculation for the parent div\’s width.
Is there an break through ?
Thks for answering

[MinkoBlocked]

Hello,

here is a solution for your problem:

CSS:

<style type="text/css">
.dropdown-shadow
{        
    -webkit-box-shadow: 5px 4px 10px #333333;
    box-shadow: 5px 4px 10px #333333;
}
.dropdown-parent
{
    padding-left: 7px;
    padding-top: 7px;
    padding-right: 7px;
}
</style>

JavaScript:

//Initialization of jqxMenu
$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: 'classic' });
//Set shadow to jqxMenu's submenus and padding to their wrapper
$('.jqx-menu-dropdown').addClass('dropdown-shadow').parent().addClass('dropdown-parent');

In the code above after the initialization of jqxMenu you have to set shadow to all it’s submenus and padding to the submenu’s wrapper.
If your shadow is with bigger length the padding should be bigger.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[bronson3Member]

It works fine.
Many thks.
For display purposes i’ve added a margin left attribute on dropdown-parent css

.dropdown-parent
{
padding-left: 7px;
padding-top: 7px;
padding-right: 7px;
margin-left : 15px; // open direction is left
}

[Author]

Posts