Web Analytics Made Easy -
StatCounter Need Help for megamenu - CodingForum

Announcement

Collapse
No announcement yet.

Need Help for megamenu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need Help for megamenu

    I did the tutorial on www.javascriptkit.com


    Everything works good, did my own modifications but when I want to add more links with megamenu style it doesn't work can someone help?

    What I want to do is make another link with drop down menu like in tutorial, have 2 drop down menus
    Last edited by ludo007; Aug 25, 2011, 06:35 AM.

  • #2
    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.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

    Comment


    • #3
      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

      Comment


      • #4
        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.
        Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
        Read Steve Krug's book Don't Make Me Think - essential reading on web usability
        I don't recommend much, but I do recommend Clook for UK web hosting

        Comment


        • #5
          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?

          Comment


          • #6
            You said it didn't work, implying you'd tried it - is that not the case?
            Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
            Read Steve Krug's book Don't Make Me Think - essential reading on web usability
            I don't recommend much, but I do recommend Clook for UK web hosting

            Comment


            • #7
              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

              Comment


              • #8
                So can you post the code where you tried adding the other one? That might save everyone's time.
                Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
                Read Steve Krug's book Don't Make Me Think - essential reading on web usability
                I don't recommend much, but I do recommend Clook for UK web hosting

                Comment


                • #9
                  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>

                  Comment


                  • #10
                    Splendid....
                    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
                    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
                    I don't recommend much, but I do recommend Clook for UK web hosting

                    Comment

                    Working...
                    X