Smooth Menu - How to make menu open onclick

**Oyabun** · 12-31-2008, 09:31 AM

1) Script Title: Smooth Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: When I click on a menu item (folder) I want it to be opened by click.

Can anyone tell me how to do this?
Thanks

**Snookerman** · 12-31-2008, 10:25 AM

Try this .js file: Attachment 2386

**Oyabun** · 12-31-2008, 11:33 AM

Well thank you but i got a problem then. The foldermenu doesn't close and when i click on it to open it the site always jumps to the top.

So i got 2 main folders. If i open both of them, they just stay opened...

**Snookerman** · 12-31-2008, 11:37 AM

I tested this with the demo on DD and it worked fine.

Please post a link to the page on your site that contains the problematic script so we can check it out.

**Oyabun** · 12-31-2008, 11:41 AM

Lol thats odd. I tested it with the original too, and it did not work, on any browser.

There is nothing wrong in my code. Im pretty sure.

**Snookerman** · 12-31-2008, 12:07 PM

Sorry, I forgot to say that you should give all the li tags with the folders the class value of mainmain. Here is the test page I used:

HTML Code:

<!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" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
        <!--[if lte IE 7]>
            <style type="text/css">
            html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
            </style>
        <![endif]-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript" src="ddsmoothmenu.js">
            
            /***********************************************
             * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
             * This notice MUST stay intact for legal use
             * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
             ***********************************************/
            
        </script>
    </head>
    <body>
        <div id="smoothmenu1" class="ddsmoothmenu">
            <ul>
                <li>
                    <a href="http://www.dynamicdrive.com">Item 1</a>
                </li>
                <li class="mainmain">
                    <a href="#">Folder 0</a>
                    <ul>
                        <li>
                            <a href="#">Sub Item 1.1</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.2</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.3</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.4</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.2</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.3</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.4</a>
                        </li>
                    </ul>
                </li>
                <li class="mainmain">
                    <a href="#">Folder 1</a>
                    <ul>
                        <li>
                            <a href="#">Sub Item 1.1</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.2</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.3</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.4</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.2</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.3</a>
                        </li>
                        <li>
                            <a href="#">Sub Item 1.4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
                <li class="mainmain">
                    <a href="#">Folder 2</a>
                    <ul>
                        <li>
                            <a href="#">Sub Item 2.1</a>
                        </li>
                        <li>
                            <a href="#">Folder 2.1</a>
                            <ul>
                                <li>
                                    <a href="#">Sub Item 2.1.1</a>
                                </li>
                                <li>
                                    <a href="#">Sub Item 2.1.2</a>
                                </li>
                                <li>
                                    <a href="#">Folder 3.1.1</a>
                                    <ul>
                                        <li>
                                            <a href="#">Sub Item 3.1.1.1</a>
                                        </li>
                                        <li>
                                            <a href="#">Sub Item 3.1.1.2</a>
                                        </li>
                                        <li>
                                            <a href="#">Sub Item 3.1.1.3</a>
                                        </li>
                                        <li>
                                            <a href="#">Sub Item 3.1.1.4</a>
                                        </li>
                                        <li>
                                            <a href="#">Sub Item 3.1.1.5</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">Sub Item 2.1.4</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="http://www.dynamicdrive.com/style/">Item 4</a>
                </li>
            </ul>
            <br style="clear: left"/>
        </div>
    </body>
</html>

**Oyabun** · 12-31-2008, 10:45 PM

Not workin for me, im sorry mate. Did what you said :/
I tested yours too. It opens. When you click again it closes and opens again and it stays opened.
If you have a folder in the folder, it doesn't open, just jumps to the top of the page.
A normal folder also jumps up while clickin on it

**phooda** · 11-15-2009, 07:50 PM

hi... i am sorry because i am reopening this old topic... but i couldn't find answer for this...

i have copied everything that Snookerman wrote... The script is opening one click, but when you click again to close it, it menu first close and the reopen alone... and you can close it any more... you can only change "folder"

i like this script very much... the script just do OnClick open/hide menu.. i don't need OnMouseOver/Out... i want to use this script as a secondary menu in the page... menu for the news...

thx for your time...

i forgot to say that i dont need arrows... (i found out how to remove them by my self)

Thread: Smooth Menu - How to make menu open onclick

Thread Tools

Search Thread

Smooth Menu - How to make menu open onclick

Bookmarks

Bookmarks

Posting Permissions