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.

Vertical Menu submenu items not displaying

Home › Forums › Older releases › 0.9.x › Vertical Menu submenu items not displaying

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 19, 2014 at 10:08 #1378
    AMS
    Participant

    I’ve been trying to create a vertical menu, but the submenu items aren’t displaying.

    Here is the code for my page: 

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery-loader.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			mainMenuSubOffsetX: 6,
			mainMenuSubOffsetY: -6,
			subMenusSubOffsetX: 6,
			subMenusSubOffsetY: -6
		});
	});
</script>
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-clean" menu theme (optional, you can use your own CSS, too) -->
<link href="../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:12em;
	}
	#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>
<ul id="main-menu" class="sm sm-vertical sm-clean sm-clean-vertical">
  <li><a href="#">item 1</a></li>
  	<ul>
    <li><a href="#">sub item 1</a></li>
    <li><a href="#">sub item 2</a></li>    
    </ul>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>
</body>
</html>

    Incase that’s hard to read, here is a link to the html file. I uploaded it only for the purposes of this forum, and the css and java script files aren’t uploaded yet:
    http://alanshapiromusic.net/newmenu4.html

    And here is an image of my file structure. My file is called “newmenu4.html” and I put it in the smart menus “demo” folder because the demo “index” file was working fine.

    August 21, 2014 at 03:47 #1707
    admin
    Keymaster

    Your menu structure is not valid. The sub UL elements should be enclosed in the parent LI’s (this isn’t the case for “item1” in your sample). It should look like this:

    <ul id="main-menu" class="sm sm-vertical sm-clean sm-clean-vertical">
  <li><a href="#">item 1</a>
    <ul>
      <li><a href="#">sub item 1</a></li>
      <li><a href="#">sub item 2</a></li>    
    </ul>
  </li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>

    Cheers!

    August 29, 2014 at 14:09 #1722
    AMS
    Participant

    Thanks–works like a charm!

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