Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

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
  • July 16, 2014 at 04:57 #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>
    July 16, 2014 at 06:42 #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!

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘0.9.x’ is closed to new topics and replies.