Question

单击水平主菜单时，子菜单应从右侧滑动到主菜单并隐藏主菜单。

Answer 1

我为您创建了一个简单的示例，它在单击菜单项后显示了侧边菜单的简单转换

HTML

<ul id="menu">
  <li>Item 1 
    <ul class="sub_menu">
      <li>Sub item 1</li>
      <li>Sub item 2</li>
      <li>Sub item 3</li>
    </ul>
  </li>
  <li>Item 2 </li>
  <li>Item 3 </li>
  <li>Item 4 </li>
</ul>

JS

$(function () {
    $('#menu > li').click(function() {
    var show = !$(this).find('.sub_menu').hasClass('show');

    $('.sub_menu').removeClass('show');

    // Show if the sub-menu is hidden
    if (show) {
        $(this).find('.sub_menu').addClass('show');
    }
  });
});

CSS

#menu {
  padding: 0;
  border: 1px solid #ccc;
  background: #fff;
  list-style: none;
  position: relative;
  border-bottom: 0;
}

li {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

li:hover {
  background: #f5f5f5;
}

.sub_menu {
  padding: 0;
  border: 1px solid #ccc;
  background: #fff;
  list-style: none;
  z-index: 1;
  opacity: 0.5;
  position: absolute;
  left: -100%;
  top: -1px;
  width: 70%;
  height: 100%;
  transition: all 0.7s;
}

.sub_menu.show {
  opacity: 1;
  left: -1px;
  box-shadow: 0 0 5px #ccc;
}

你可以在https://jsfiddle.net/LeoAref/5fq3qdm1/

找到一个有效的JSFiddle

Answer 2

＆＃13;

<script>
  		$('#charts-menu').click(function() {
  		   $('li').not(this).find('ul').hide();
  		   $(this).find('ul').show();
  		});
		</script>  
        <script type="text/javascript">  
          
          $( '#charts-menu ul li').click(function(){
                      // by default, hide all li's
                  $( '#charts-menu ul li').toggle();
                      // show only the selected li
                  $( this ).show('key');
                  $('.sub_nav ul li').show('slow');

                  $('.sub_nav ul li').click(function(){
                       $( this ).hide('key');
                      $('#charts-menu ul li').toggle();

                  })
                  
              });
                
        </script>

＆＃13;

/*Sub Nav*/
.navbar-nav > li , .sub_nav { position:inherit;}
.sub_nav{ float:left; width:65%;border-bottom: 1px solid #eee;box-shadow:0 4px 6px #999; position:absolute; left:0px; min-height:36px; display:none;}
.sub_nav ul { margin:0px; padding:0px;}
.sub_nav ul li{ float:left; list-style-type:none;padding-right: 50px;} 
.sub_nav ul li:hover, .sub_nav ul li.active{background:#fff;height:34px;}
.sub_nav ul li a span{background:#fff;}
.open .sub_nav{ display:block;}
.open .sub_nav .dropdown-menu{ display:block; top:0px; max-width:1000px; width:100%; background:none; box-shadow:inherit; left:50%; margin-left:-29%; border:none;}
#navbar li.open{ margin-bottom:36px;}
.sub_nav ul li.active a span{ background:#fff; width:100%; height:15px; position:absolute; bottom:-10px; left:0;}

＆＃13;

<div id="charts-menu">
        
            <ul class="nav navbar-nav" id="myCharts">
              <li>
                <a id="trigger_Nested-summary" class="select-market" data-toggle="pill" href="#summary"  data-intro="this is summary" data-position="top">
                <img src="/static/images/MARKET-icon.png">
                Summary
                </a></li>


                {% for key,value in charts.items %}
                   
                    <li class="dropdown">
                      <a href=#{{key}}  id='trigger_Nested-{{key}}' value = 'trigger_Nested-{{key}}' data-intro="{{key}}" class="dropdown-toggle active" data-toggle="dropdown" data-position="right"  onclick='my_func("{{key}}")'> <!--data-toggle="pill"--><img src="/static/images/{{key}}-icon.png"/>  {{key}}<img src="/static/images/leftpanel-dropdwn-{{key}}.png" style="float:right;margin-top:10px;padding-left:35px;" /> <!--span class="caret" style="float:right;margin-top:10px;"></span--></a> 
                	   
                     <div class="sub_nav">
                          <ul id='Nested-{{key}}'>
                            {% for chart in value %}
                                {% if chart.id == 1 %}
                                   
                                    <li class="orange"><a href="#{{chart.id}}" data-toggle="pill" data-intro="{{chart.name}}" data-position="right">{{chart.name}}</a><span></span></li>
                                {% else %}
                                    <li><a href="#{{chart.id}}" data-toggle="pill" data-intro="{{chart.name}}" data-position="right">{{chart.name}}</a><span></span></li>
                                {% endif %}
                            {% endfor %}                
                        </ul></div>
                    </li>
                {% endfor %}                    
                </ul>
           
         </div>

＆＃13;

SubMenu从屏幕右侧滑出

2 个答案: