Announcement

**SB65** · Aug 25, 2011, 07:08 AM

Can you give a link to your page (including the non-working additional menu)? I'd guess you haven't defined the new megamenu correctly, but impossible to say without more information.

**ludo007** · Aug 25, 2011, 08:06 AM

Originally posted by SB65 View Post

Can you give a link to your page (including the non-working additional menu)? I'd guess you haven't defined the new megamenu correctly, but impossible to say without more information.

I just want to put another mega menu, what should I do?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />

<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")



</script>

<style type="text/css">
body {
	background-image: url(background.jpg);
}
</style>
</head>

<body>
<div style="position: absolute; top:126px; left:701px; width:100px; height:20px; font-size: 18px; color: #FFF;">
  <!--Mega Menu Anchor-->
  <a href="http://www.javascriptkit.com" style="color: #FFF" id="megaanchor">Accueil</a>
  <!--Mega Drop Down Menu HTML. Retain given CSS classes-->
  <div id="megamenu1" class="megamenu">
    <div class="column">
      <h3>Quad</h3>
      <ul>
        <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
        <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.codingforum.net">Coding Forum</a></li>
        <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
      </ul>
    </div>
    <div class="column">
      <h3>Buggy</h3>
      <ul>
        <li><a href="http://www.cnn.com/">CNN</a></li>
        <li><a href="http://www.msnbc.com">MSNBC</a></li>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://news.bbc.co.uk">BBC News</a></li>
      </ul>
    </div>
    <div class="column">
      <h3>Voiture sans permis</h3>
      <ul>
        <li><a href="http://www.news.com/">News.com</a></li>
        <li><a href="http://www.slashdot.com">SlashDot</a></li>
        <li><a href="http://www.digg.com">Digg</a></li>
        <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
      </ul>
    </div>
    <br style="clear: left" />
    <!--Break after 3rd column. Move this if desired-->
  </div>
</div>
</body>
</html>

I know I should do something like

jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover") but still doesn't work

**SB65** · Aug 25, 2011, 09:32 AM

If your existing menu works then we need to see (preferably) a link to your page with the additional menu added. Above looks like your single megamenu only.

**ludo007** · Aug 25, 2011, 09:37 AM

Originally posted by SB65 View Post

If your existing menu works then we need to see (preferably) a link to your page with the additional menu added. Above looks like your single megamenu only.

yes that is only 1 single megamenu I'm just asking what should I add to make another one?

**SB65** · Aug 25, 2011, 09:42 AM

You said it didn't work, implying you'd tried it - is that not the case?

**ludo007** · Aug 25, 2011, 09:48 AM

Originally posted by SB65 View Post

You said it didn't work, implying you'd tried it - is that not the case?

Yes I tried adding another one but it doesn't work, can someone show me? lol

**SB65** · Aug 25, 2011, 09:54 AM

So can you post the code where you tried adding the other one? That might save everyone's time.

**ludo007** · Aug 25, 2011, 09:56 AM

Originally posted by SB65 View Post

So can you post the code where you tried adding the other one? That might save everyone's time.

HAHA I just tried something and it works

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />

<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover")



</script>

<style type="text/css">
body {
	background-image: url(background.jpg);
	margin-left: 700px;
	margin-top: 125px;
	margin-right: 800px;
	margin-bottom: 150px;
}
body,td,th {
	font-size: 18px;
	color: #FFF;
}
a:hover {
	color: #F30;
	text-decoration: underline;
}
a:link {
	text-decoration: none;
	color: #FFF;
}
a:visited {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>

</head>

<body>

<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="496"><!--Mega Menu Anchor-->
  <a href="http://www.javascriptkit.com" style="color: #FFF" id="megaanchor">Accueil</a>
  <a href="http://www.javascriptkit.com" style="color: #FFF" id="megaanchor2">Quad</a>
  <!--Mega Drop Down Menu HTML. Retain given CSS classes-->
  <div id="megamenu1" class="megamenu">
    <div class="column">
      <h3>Quad</h3>
      <ul>
        <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
        <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.codingforum.net">Coding Forum</a></li>
        <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
      </ul>
    </div>
    <div class="column">
      <h3>Buggy</h3>
      <ul>
        <li><a href="http://www.cnn.com/">CNN</a></li>
        <li><a href="http://www.msnbc.com">MSNBC</a></li>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://news.bbc.co.uk">BBC News</a></li>
        <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
      </ul>
    </div>
    <br style="clear: left" />
    <!--Break after 3rd column. Move this if desired-->
  </div>
</div>
<div id="megamenu2" class="megamenu">
    <div class="column">
      <h3>Quad</h3>
      <ul>
        <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
        <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.codingforum.net">Coding Forum</a></li>
        <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
      </ul>
    </div>
&nbsp;</td>
  </tr>
</table>


</body>
</html>

**SB65** · Aug 25, 2011, 09:59 AM

Splendid....

Announcement

Need Help for megamenu

Need Help for megamenu

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment