Vertical Menu submenu items not displaying

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

  • This topic has 2 replies, 2 voices, and was last updated 6 years ago by AMS.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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.

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

    #1722
    AMS
    Participant

    Thanks–works like a charm!

Viewing 3 posts - 1 through 3 (of 3 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?