Submenu formatting

[DanM]

I have a menu that can be up to 3 levels deep. I have gotten it formatted well for the mobile size. Now I’m trying to develop the CSS for the desktop size (min-width:1001px). I want the top-level UL to be horizontal. When I hover any item in that menu, I want a dropdown (flyout) that displays the next two levels all expanded. I cannot figure out how to format the flyouts. Can you give me a general idea of how to go about it with SmartMenus? Thanks!

[admin]

For keeping deeper sub levels expanded all the time on desktop, you could use something like this as a start:

@media (min-width: 1001px) {
	.yourMenuClass ul ul {
		display: block !important;
		position: static !important;
		margin: 0 !important;
		/* the following are needed if you use the default fadeOut animation on close */
		-moz-opacity: 1 !important;
		-webkit-opacity: 1 !important;
		opacity: 1 !important;
		filter: alpha(opacity=100) !important;
	}
}

From here, of course, you will probably need to tweak the styling too.

Let me know if you have any troubles.

[DanM]

That looks promising. Thanks! I’ll test it out.

It appears to me that the plugin assumes a structure that looks like:

<ul>
	<li>
		<a></a>
		<ul>
		</ul>
	</li>
</ul>

In other words, the only tags inside an li are a and ul (if there is a submenu). I would like to replace the ul with a div, which in turn would contain a ul. But I might have multiple divs inside the parent div, so I could split the flyout into multiple columns. Is anything like this possible with SmartMenus? It seems like I got a JavaScript error when I tried anything besides a ul inside the li.

Thanks again for your help!

[DanM]

Here is a sample of what I am trying to do:

  <div class="level1">
    <ul class="sm level1">
      <li>
        <a href="#">Item 1</a>

        <div class="menu2">
          <div class="column">
            <ul>
              <li>
                <a href="#">Item 2</a>
              </li>

              <li>
                <a href="#">Item 3</a>
              </li>
            </ul>
          </div>

          <div class="column">
            <ul>
              <li>
                <a href="#">Item 4</a>
              </li>

              <li>
                <a href="#">Item 5</a>
              </li>

              <li>
                <a href="#">Item 6</a>
              </li>
            </ul>
          </div>

          <div class="clearboth"></div>
        </div>
      </li>

      <li>
        <a href="#">Item 7</a>

        <div class="menu2">
          <div class="column">
            <ul>
              <li>
                <a href="#">Item 8</a>
              </li>
            </ul>
          </div>

          <div class="column">
            <ul>
              <li>
                <a href="#">Item 9</a>
              </li>

              <li>
                <a href="#">Item 10</a>
              </li>
            </ul>
          </div>

          <div class="clearboth"></div>
        </div>
      </li>

      <li>
        <a href="#">Item 11</a>

        <div class="menu2">
          <div class="column">
            <ul>
              <li>
                <a href="#">Item 12</a>
              </li>

              <li>
                <a href="#">Item 13</a>
              </li>
            </ul>
          </div>

          <div class="column">
            <ul>
              <li>
                <a href="#">Item 14</a>
              </li>

              <li>
                <a href="#">Item 15</a>
              </li>

              <li>
                <a href="#">Item 16</a>
              </li>
            </ul>
          </div>

          <div class="clearboth"></div>
        </div>
      </li>
    </ul>
  </div>

I want the menu2 divs to be hidden initially. The level1 list items should be a horizontal menu. When I hover over a level1 item, menu2 for that item should fly out/drop down. Is it possible accomplish this with SmartMenus?

[admin]

Ah, then neglect my previous post. If you would like to include custom HTML code inside your sub menus, you can use mega drop-downs. The last sub menu on the default demo page (“demo/index.html” in the download ZIP) is a mega drop down:

http://vadikom.github.io/smartmenus/src/demo/

So you would have something like this:

<div class="level1">
  <ul class="sm level1">
    <li><a href="#">Main menu item 1</a>
      <ul class="mega-menu">
        <li>
          <div class="menu2">
            <div class="column">
              <ul>
                <li>
                  <a href="#">Item 2</a>
                </li>

                <li>
                  <a href="#">Item 3</a>
                </li>
              </ul>
            </div>

            <div class="column">
              <ul>
                <li>
                  <a href="#">Item 4</a>
                </li>

                <li>
                  <a href="#">Item 5</a>
                </li>

                <li>
                  <a href="#">Item 6</a>
                </li>
              </ul>
            </div>

            <div class="clearboth"></div>
          </div>
        </li>
      </ul>
    </li>
    <li><a href="#">Main menu item 2</a>
      <ul class="mega-menu">
        <li>
          Mega drop down 2 content...
        </li>
      </ul>
    </li>
  </ul>
</div>

and the following CSS as a start for the nested lists inside the mega drop-downs:

.mega-menu ul {
	display: block;
	position: static;
}

because by default ul elements in the menu tree are considered actual sub menus and have display: none; applied in “sm-core-css.css”.

[DanM]

Thank you! After trying to get it to work, I have decided to revert to a standard structure for our menus on all device sizes. That makes it all much more straightforward.

[jenlampton]

I’m attempting to do something similar, but I don’t have a need for custom HTML in my submenu.

My submenu happens to be a list of the 50 states. That list is too long for the page causing scrolling problems for people on desktops. I simply wish to split the existing UL into 4 columns that are a more reasonable length.

Can this be done with CSS alone?

edit: When testing scrolling for the very-long list on the demo page (it’s the “more” item in the “sub test” section) it seems to have been solved quite nicely. I’ll see if that alone will work for this project, but I am still curious about how to create a 4-column layout.

[higgo36]

I first want to say thank you for a highly accessible menu!

On that note, I need help styling the sub submenus (aka: “Flyouts”) using either CSS or Script, I need to drop the y-index a few pixels to line up top link with its parent, i want to hide the y-overflow, and also control the widths/heights.

I have discovered that using (.has-submenu) jquery attribute allows me to do some things with the first submenus, but not the second “flyouts”.

So i need to get control of the Nested ul’s,

Here is an example snippet of outline of my current HTML:

(The nested <ul>'s with note next to them are the ones I want to style and re-position)


<li>
<ul>

<li>   
<ul>    --- (This is a nested <ul> i need to control)
<li></li>
<li></li>
<li></li>
</ul>   ---  (ending here)
</li>

<li>
<ul>   ----  (Nested <ul> i need to control)
<li></li>
<li></li>
<li></li>
</ul>   ---  (ends here)
</li>

</ul>
</li>

Please advise any suggestions, and keep in mind that I have tried to manipulate the core jquery :

$.fn.smartmenus.defaults = {
isPopup: false, // is this a popup menu (can be shown via the popupShow/popupHide methods) or a permanent menu bar
mainMenuSubOffsetX: 0, // pixels offset from default position
mainMenuSubOffsetY: 0, // pixels offset from default position
subMenusSubOffsetX: 0, // pixels offset from default position
subMenusSubOffsetY: 0, // pixels offset from default position
subMenusMinWidth: ’10em’, // min-width for the sub menus (any CSS unit) – if set, the fixed width set in CSS will be ignored
subMenusMaxWidth: ’20em’, // max-width for the sub menus (any CSS unit) – if set, the fixed width set in CSS will be ignored

– I saw movement when fooling with the “mainMenuSubOffset” , but not the “subMenuSuboffset”

Thanks for any time.

[higgo36]

Nevermind, i just figured it out by using this:

 <script type="text/javascript">
    	$(function() {
    		$('#main-menu').smartmenus({
    			subMenusSubOffsetX: 1,
    			subMenusSubOffsetY: 0
    		});
    		$('#main-menu').smartmenus('keyboardSetHotkey', '123', 'shiftKey');
    	});
    </script>

So, instead of trying to use CSS, I was able to move the flyout nested ul’s using Script.

[Author]

Posts