jQuery UI Widgets Forums Navigation Menu, Context Menu Menu Transparent Background

This topic contains 5 replies, has 2 voices, and was last updated by  DiegoUnanue 10 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Menu Transparent Background #53188

    DiegoUnanue
    Participant
    <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.

    Menu Transparent Background #53195

    DiegoUnanue
    Participant
    Menu Transparent Background #53213

    Dimitar
    Participant

    Hello DiegoUnanue,

    You should apply the style to the menu and not its parent div:

    <div id='jqxMenu' style="background-color: transparent;">

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Menu Transparent Background #53233

    DiegoUnanue
    Participant

    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>
    Menu Transparent Background #53238

    DiegoUnanue
    Participant

    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

    Menu Transparent Background #53251

    DiegoUnanue
    Participant

    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
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.