submenus are not being displayed

Home Forums Older releases 0.9.x submenus are not being displayed

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1353
    mag
    Participant

    i have gone through this SmartMenus and gave a try on it.
    But my submenus are not being shown.
    Please help.

    My code is as below:

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    
    <!-- jQuery -->
    <script type="text/javascript" src="http://vadikom.github.io/smartmenus/src/libs/jquery-loader.js"></script>
    
    <!-- SmartMenus jQuery plugin -->
    <script type="text/javascript" src="http://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
    
    <!-- SmartMenus jQuery init -->
    <script type="text/javascript">
    	$(function() {
    		$('#main-menu').smartmenus({
    	mainMenuSubOffsetX: -1,
    			mainMenuSubOffsetY: 4,
    			subMenusSubOffsetX: 6,
    			subMenusSubOffsetY: -6
    		});
    	});
    </script>
    
    <!-- SmartMenus core CSS (required) -->
    <link href="http://vadikom.github.io/smartmenus/src/css/sm-core-css.css" rel="stylesheet" type="text/css" />
    
    <!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
    <link href="http://vadikom.github.io/smartmenus/src/css/sm-clean/sm-clean.css" rel="stylesheet" type="text/css" />
    
    <!-- #main-menu config - instance specific stuff not covered in the theme -->
    <style type="text/css">
    	#main-menu {
    		position:relative;
    		z-index:9999;
    		width:auto;
    	}
    	#main-menu ul {
    		width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
    	}
    </style>
    </head>
    
    <body>
    
    <!-- Sample menu definition -->
    <ul id="main-menu" class="sm sm-clean">
      <li><a href="http://www.smartmenus.org/">Home</a></li>
      <li><a href="http://www.smartmenus.org/about/">About</a>
        <ul>
          <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
          <li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
          <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
          <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
            <ul>
              <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
              <li><a href="http://vadikom.com/projects/">Projects</a></li>
              <li><a href="http://vadikom.com/services/">Services</a></li>
              <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
            </ul>
          </li>
          <li><a href="http://www.smartmenus.org/about/old-smartmenus-versions/">Old SmartMenus versions</a></li>
        </ul>
      </li>
      <li><a href="http://www.smartmenus.org/download/">Download</a></li>
      <li><a href="http://www.smartmenus.org/support/">Support</a>
        <ul>
          <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
          <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
        </ul>
      </li>
      <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
      <li><a href="#">Sub test</a>
        <ul>
          <li><a href="#">Dummy item</a></li>
          <li><a href="#">Dummy item</a></li>
          <li><a href="#" class="disabled">Disabled menu item</a></li>
          <li><a href="#">Dummy item</a></li>
          <li><a href="#">more...</a>
            <ul>
              <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">more...</a>
                <ul>
                  <li><a href="#">Dummy item</a></li>
                  <li><a href="#" class="current">A 'current' class item</a></li>
                  <li><a href="#">Dummy item</a></li>
                  <li><a href="#">more...</a>
                    <ul>
                      <li><a href="#">subMenusMinWidth</a></li>
                      <li><a href="#">10em</a></li>
                      <li><a href="#">forced.</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Dummy item</a></li>
                  <li><a href="#">Dummy item</a></li>
                </ul>
              </li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
              <li><a href="#">Dummy item</a></li>
              <li><a href="#">Dummy item</a></li>
      
              <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
              <li><a href="#">Dummy item</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Mega menu</a>
        <ul class="mega-menu">
          <li>
            <!-- The mega drop down contents -->
            <div style="width:400px;max-width:100%;">
              <div style="padding:5px 24px;">
                <p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
                <p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
    	  </div>
    	</div>
          </li>
        </ul>
      </li>
    </ul>
    
    </body>
    </html>
    #1683
    admin
    Keymaster

    You don’t have to link the script and CSS files directly from GitHub since it’s not a CDN. Additionally “jquery-loader.js” is used just on the demo pages to allow easy testing with different jQuery versions, so instead of it, you should just use whatever jQuery version you like.

    So to fix the issue you will need to replace the following:

    <!-- jQuery -->
    
    
    <!-- SmartMenus jQuery plugin -->
    
    
    ...
    
    <!-- SmartMenus core CSS (required) -->
    
    
    <!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
    

    with something like this:

    <!-- jQuery -->
    
    
    <!-- SmartMenus jQuery plugin -->
    
    
    ...
    
    <!-- SmartMenus core CSS (required) -->
    
    
    <!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
    

    Cheers!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?