jQWidgets Forums

Tagged: fadeToggle, jqxMenu, Menu

This topic contains 2 replies, has 2 voices, and was last updated by africanfarmer 11 years, 11 months ago.

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

Author

How to make a menu fadeGToggle by clicking on an image or a button? Posts

August 18, 2013 at 1:19 pm How to make a menu fadeGToggle by clicking on an image or a button? #27062

africanfarmer

Member

Hi Peter,

my code below must be wrong. but i have no idea how to make a menu fadeToggle by clicking on an image or a button.

createDesktop.createStartMenu = function ()
{
var source =
[
{ html: “<img src=’../../images/mailIcon.png’/>Mail”,
items: [
{ html: “<img src=’../../images/calendarIcon.png’/>Calendar” },
{ html: “<img src=’../../images/contactsIcon.png’/>Contacts” }
]
},
{ html: “<img src=’../../images/folder.png’/>Inbox”,
items: [
{ html: “<img src=’../../images/folder.png’/>Admin” },
{ html: “<img src=’../../images/folder.png’/>Corporate” },
{ html: “<img src=’../../images/folder.png’/>Finance” },
{ html: “<img src=’../../images/folder.png’/>Other”}
]
},
{ html: “<img src=’../../images/recycle.png’/>Deleted Items” },
{ html: “<img src=’../../images/notesIcon.png’/>Notes” },
{ html: “<img src=’../../images/settings.png’/>Settings” },
{ html: “<img src=’../../images/favorites.png’/>Favorites” }
];
$(“#startMenu”).jqxMenu({ source: source, width: ‘180px’, height: ‘250px’, mode: ‘vertical’ });
var styles = {
visibility : “visible”
};
$(“#startMenu”).css(styles);
/* $(“#startMenu”).hide();*/
$(“#startMenu”).fadeToggle(“slow”, “linear”);

}

August 19, 2013 at 5:17 am How to make a menu fadeGToggle by clicking on an image or a button? #27088

Dimitar

Participant

Hello africanfarmer,

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" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical', theme: theme });
                $("#toggle").click(function () {
                    $("#jqxMenu").fadeToggle("slow", "linear");
                });
            });
        </script>
        <div id='jqxWidget' style='width: 110px;'>
            <button id="toggle">
                toggle</button>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                            <li><a href="#">The Team</a>
                                <ul>
                                    <li><a href="#">Brigita</a></li>
                                    <li><a href="#">John</a></li>
                                    <li><a href="#">Michael</a></li>
                                    <li><a href="#">Peter</a></li>
                                    <li><a href="#">Sarah</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">FAQs</a></li>
                        </ul>
                    </li>
                    <li>Services
                        <ul>
                            <li><a href="#">Product Development</a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Shop Online</a></li>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Training &amp; Consulting</a></li>
                        </ul>
                    </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>
                            <li><a href="#">Top Rated</a></li>
                            <li><a href="#">Prices</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>
                        <ul>
                            <li><a href="#">Enquiry Form</a></li>
                            <li><a href="#">Map &amp; Driving Directions</a></li>
                            <li><a href="#">Your Feedback</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

We hope it is helpful to you.

Best Regards,
Dimitar

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

August 23, 2013 at 7:46 am How to make a menu fadeGToggle by clicking on an image or a button? #27520

africanfarmer

Member

i made a wrong in initial function. thank you Dimitar!

Author

Posts

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

You must be logged in to reply to this topic.