jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Menu Transparent Background
Tagged: background, background color, css, jqwidgets menu, jqxMenu, Menu, style, transparent
This topic contains 5 replies, has 2 voices, and was last updated by DiegoUnanue 10 years, 7 months ago.
-
Author
-
<div id='jqxWidget' style="background-color: transparent; float: left"> <div id='jqxMenu'> <ul> <li><a href="#"> <img src='/Images/config.png' /></a> <ul> <li><a href="#" id="showUsersList">User Settings</a></li> <li ><a href="#" id="showCompanies">Company Settings</a></li> <li><a href="#" id="showMyProfile">User Profile</a></li> <li target="_blank">Download</a></li> <li data-bind="visible: mViewModel.userLogin().UserType() == 'SA'"><a href="#">Reports</a> <ul> <li><a href="#" class="showRpt" target="_blank">Sell Company List</a></li> <li><a href="#" class="showRpt" target="_blank">Buy Company List</a></li> <li><a href="#" class="showUserRpt" target="_blank">Sell Side User List</a></li> <li><a href="#" class="showUserRpt" target="_blank">Buy Side User List</a></li> </ul> </li> <li><a href="#" class="spanMenu">Help? (888) 988-3735</a></li> </ul> </ul> </div> </div>
I have a menu that’s an image, with the common rectangle of the ul and li that the menu set.
I’m having trouble to make the menu completly transparent. I try to use color: transparent in all the clases that the menu uses without success.
How or where I have to set this in order to acomplish that.This is the image of the menu:
https://drive.google.com/file/d/0BzdiE5NGBr1QR3hZOU02V256LVU/edit?usp=sharing
Hello DiegoUnanue,
You should apply the style to the menu and not its parent div:
<div id='jqxMenu' style="background-color: transparent;">
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I tried the solution previously given but it didn’t work, still looking the same as the dropbox pic.
here’s the code:<div id='jqxWidget' > <div id='jqxMenu' style="background-color: transparent"> <ul> <li><a href="#"> <img src='/Images/config.png' /></a> <ul> <li><a href="#" id="showUsersList">User Settings</a></li> <li ><a href="#" id="showCompanies">Company Settings</a></li> <li><a href="#" id="showMyProfile">User Profile</a></li> <li target="_blank">Download</a></li> <li data-bind="visible: mViewModel.userLogin().UserType() == 'SA'"><a href="#">Reports</a> <ul> <li><a href="#" class="showRpt" target="_blank">Sell Company List</a></li> <li><a href="#" class="showRpt" target="_blank">Buy Company List</a></li> <li><a href="#" class="showUserRpt" target="_blank">Sell Side User List</a></li> <li><a href="#" class="showUserRpt" target="_blank">Buy Side User List</a></li> </ul> </li> <li><a href="#" class="spanMenu">Help? (888) 988-3735</a></li> </ul> </ul> </div> </div>
I find that if I delete the background image from the css class called jqx-widget-header it works, but as I use other components of jqwidgets, I don’t know what impact will have. How can I use or rewrite this class and only applied it to the menu. By the way the class that I use it’s from a theme that I create jqx-widget-header-custom. I named the other in order to be understood what the problem is.
.jqx-widget-header-custom { background-clip: padding-box; background-image: -moz-linear-gradient(center top , #292929, #292929); --> this line its what I need to delete font-family: Verdana; text-shadow: none; }
best regards
Solved:
In the jqx-menu class located in my custom theme, I overwrite the class setting background-image: none/*jqxMenu Style*/ .jqx-menu { border: 1px solid transparent; float: none; margin: 0px; height: 100%; padding: 0px; overflow: hidden; text-align: left; border-radius: 0; border-color: transparent; border: none; background-color: transparent; color: transparent; position: fixed; left: 970px; background-image: none; --> set to none, allows me to see the background }
-
AuthorPosts
You must be logged in to reply to this topic.