How to get 2 jqxMenus - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 10 replies, has 2 voices, and was last updated by bronson 12 years, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

How to get 2 jqxMenus Posts

March 28, 2013 at 10:17 am How to get 2 jqxMenus #18196

Participant

Hi every body,

I’ùm loojing for method to get 2 jqxMenu on same page, 1 horizontal the other vertical, with 2 different themes and lay out.

Any help would be appreciated

Thks

March 28, 2013 at 10:59 am How to get 2 jqxMenus #18199

Dimitar

Participant

Hello Thks,

Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.black.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#jqxMenuH").jqxMenu({ theme: "summer", width: 600, height: 30 });
            $("#jqxMenuV").jqxMenu({ theme: "black", width: '120', mode: 'vertical' });
        });
    </script>
</head>
<body>
    <div id='jqxMenuH'>
        <ul>
            <li><a href="#">Home</a></li>
            <li>About Us
                <ul>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Our Vision</a></li>
                </ul>
            </li>
            <li>Services </li>
            <li>Products
                <ul>
                    <li><a href="#">New</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Used</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Featured</a></li>
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <br />
    <div id='jqxMenuV'>
        <ul>
            <li><a href="#">Home</a></li>
            <li>About Us
                <ul>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Our Vision</a></li>
                </ul>
            </li>
            <li>Services </li>
            <li>Products
                <ul>
                    <li><a href="#">New</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Used</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Featured</a></li>
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 28, 2013 at 11:51 am How to get 2 jqxMenus #18208

bronson

Participant

It’s exactly what i was looking for.

Perfect,

Thousands of thks.

Best Rgads

March 28, 2013 at 5:56 pm How to get 2 jqxMenus #18224

bronson

Participant

Hi Dimitar

I’m working on jqxMenuH, i’ve almost customized it, still wondering how to set “New” (for example) with no background-color.
I’m messed up with the CSS involved !

Any help would be appreciated

Best Regards
Bronson

March 29, 2013 at 7:24 am How to get 2 jqxMenus #18243

Dimitar

Participant

Hello Bronson,

Maybe you need a theme that does not have a highlight background colour. To browse the existing themes, please check out a demo and choose different themes from the dropdown list above the demo window.

Best Regards,
Dimitar

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

March 29, 2013 at 8:06 am How to get 2 jqxMenus #18249

bronson

Participant

Thks i’ve just discovered the theme builder which fit all my needs and inquiries!

Apology for this stupid question

Best Regards

March 29, 2013 at 9:10 pm How to get 2 jqxMenus #18278

bronson

Participant

Dimitar Hi,

Last, with the horizontal menu i want the li’s objects centered in the page so, i add a CSS in the customized theme as :

.jqxMenuH ul {
margin:0 auto;
width:750px;
}

which works fine for center the first level of li’s but the second level (ul li ul li, “History” or “Our vision” in the above example) pops on the left border ie not at all above the li’s trigger…
How can i handle this properly.

2nd point how can i have the second level (ul li ul li) popup with same width than the li’s trigger, for example 150px width ?

Many thks

Best regards

March 30, 2013 at 7:57 am How to get 2 jqxMenus #18296

bronson

Participant

Hi Dimitar,

The first point of my last post is solved !
I found the post called : Center jqxMenu Items.
Every thing works fine

Regards

March 30, 2013 at 9:12 am How to get 2 jqxMenus #18297

bronson

Participant

Back on the 2nd point
I want to get different CSS (same width but different color and border) for :
“Product”, “News”, & “Corporate Use”
“

<li>Products
                <ul>
                    <li><a href="#">New</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>"

i’m messed up with the theme builder and all info i got over the web on that topic.

Thks U for your help.

April 1, 2013 at 7:09 am How to get 2 jqxMenus #18337

Dimitar

Participant

Hi bronson,

You should apply styles to the HTML, like shown:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.black.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#jqxMenuH").jqxMenu({ theme: "summer", width: 600, height: 30 });
            $("#jqxMenuV").jqxMenu({ theme: "black", width: '120', mode: 'vertical' });
        });
    </script>
</head>
<body>
    <div id='jqxMenuH'>
        <ul>
            <li><a href="#">Home</a></li>
            <li>About Us
                <ul>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Our Vision</a></li>
                </ul>
            </li>
            <li>Services </li>
            <li id="products" style="width: 75px; border: 1px solid Green; background-color: Lime;">
                Products
                <ul id="1" style="width: 87px;">
                    <li style="border: 1px solid Green; background-color: Lime;"><a href="#">New</a>
                        <ul>
                            <li style="border: 1px solid Green; background-color: Lime;"><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Used</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Featured</a></li>
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <br />
    <div id='jqxMenuV'>
        <ul>
            <li><a href="#">Home</a></li>
            <li>About Us
                <ul>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Our Vision</a></li>
                </ul>
            </li>
            <li>Services </li>
            <li>Products
                <ul>
                    <li><a href="#">New</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Used</a>
                        <ul>
                            <li><a href="#">Corporate Use</a></li>
                            <li><a href="#">Private Use</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Featured</a></li>
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 2, 2013 at 6:46 pm How to get 2 jqxMenus #18462

bronson

Participant

Ok thank U for the help.

Best rgds

Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.