[DanM]

That worked. Thanks very much for the suggestion!

[DanM]

Just what I needed. Thanks very much! Your plugin is great!

[DanM]

Thank you! The first option worked well for me.

[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.

[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?

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

[Author]

Posts