使用javascript将子菜单添加到垂直菜单

Question

I managed to design a vertical menu using javascript, but I'm failing horribly when trying to add a submenu to it.

Heres the example http://www.bootply.com/isPSKNdGCG#

Can anyone give me a hint on how to add the submenu to be opened under the first level?

Thanks.

--

I managed to make it work through this jquery code, not sure if this is the best practice, but worked well.

Relatório

 function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } 

 <li> <div class="dl_parent"> <span onclick="toggle_visibility('dl_sub_dd');"> <a href="#">Relatório <span class="caret" style="margin-left: 10px;"></span></a> </span> <div id="dl_sub_dd"> <ul> <li><a href="#">Secretaria</a></li> <li><a href="#">Tesouraria</a></li> <li><a href="#">Tesouraria</a></li> <li><a href="#">Chancelaria</a></li> </ul> </div> </li> 

Answer 1

Primary CSS Menu Principles

The classic solution is to modify either the CSS display or the CSS visibility attribute on a div. The later of these two will require a non-transparent background and a higher Z-index the menu panes. Your example code uses the first of the two, which is slower and not quite as pretty in most designs.

For a nested menu, one simply nests the div-ul-li-button hierarchy inside the menu pane li of the parent.

<button onwhatever=...> <!-- optional -->
<div class='parent-menu'>
  <ul>
    <li>
      <button onwhatever=...>
      <div id=...>
        <ul>
          <li>
            <button onwhatever=...>
            <div id=...>
              <ul>
                <li>
                  <button onclick=...>

The sub-menu expands just like its parent, except you have to give the panes ids so you can associate user events with the sub-menu they intend to expand. (For grandchild panes, you need to use distinct child and grandchild ids, usually following a simple pattern.)

It is better HTML5 structural design to use button tags instead of input tags or reusing the div tag for both ul container and button. If you go with this cleaner and more readable structure, use the buttons in the panes too, for consistency. This way you are always dealing with button events to drive your expansion, contraction, and final menu selection actions.

Cascading Style Design

You only need one CSS class. Everything else can be CSS selected relative to that div.parent-menu base. How you use block, inline, or other layouts depends largely on your page design and may switch in real time based on the browser's view port width. Also responsive page designs often change the menu layout based on media type.

Get your mechanics working first, and then tweak your style as you test on multiple devices and vary your desktop window width.

Choosing and Associating Your Events

Depending on your desired behavior, you would use onclick or onmouseover to trigger the appropriate changes. The mouse over event is fast, but sometimes too fast for the user if the layout is compact.

Graceful Show and Hide Mechanics

In responsive design, you can get tricky in how the menu and submenu expand based on the width of the display or the media type.

There are ways to slow the mechanics of showing or expanding or the speed at which writing appears or fades using third degree polynomials. Most of the library components that people love to plug in, aren't quite that sophisticated. They sometimes provide linear first degree mechanics. Nonetheless, many like them because the provide the basics right out of the box, cross-browser tested, and responsive designed.

Usually, only a few lines of JavaScript will provide mechanical grace, and it saves the additional HTTP activity and keeps your code highly visible, especially if you name your functions and variables at least as well as a high school graduate.