PDA

View Full Version : 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/dynamicindex1/ddsmoothmenu.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: 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. :confused: :confused: :confused:

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:

<!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)