サブメニュー画面の右側からスライドする

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/

Answer 2

<script> 
 
    \t \t $('#charts-menu').click(function() { 
 
    \t \t $('li').not(this).find('ul').hide(); 
 
    \t \t $(this).find('ul').show(); 
 
    \t \t }); 
 
\t \t </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>

/*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;}

<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> 
 
       \t  
 
        <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>