如何動態調整CSS使用javascript的子菜單和子子菜單項溢出

我在CSS中建立一個菜單，並希望確保子菜單和子子菜單停留在屏幕上，並且不會溢出。它是一個響應式html佈局，我想動態調整CSS，以便在屏幕大小調整時，受到修復程序影響的菜單項目現在可能位於下一行和最左側的位置。這裏是我曾嘗試..（我的CSS和JavaScript差）如何動態調整CSS使用javascript的子菜單和子子菜單項溢出

HTML: 
    <body> 
    <div class="container"> 

    <div id='cssmenu'> 

    <ul class='dropdown'> 
     <li><a href='#'><span>Home</span></a></li> 
     <li class='active has-sub'><a href='#'><span>Products</span></a> 
    <ul> 
     <li class='has-sub'><a href='#'><span>Product 1</span></a> 
    <ul> 
     <li><a href='#'><span>Sub Product</span></a></li> 
     <li class='last'><a href='#'><span>Sub Product</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Product 2</span></a> 
    <ul> 
    <li><a href='#'><span>Sub Product</span></a></li> 
    <li class='last'><a href='#'><span>Sub Product</span></a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
    <li class='active has-sub'><a href='#'><span>Products</span></a> 
    <ul> 
    <li class='has-sub'><a href='#'><span>Product 1</span></a> 
    <ul> 
     <li><a href='#'><span>Sub Product</span></a></li> 
     <li class='last'><a href='#'><span>Sub Product</span></a></li> 
    </ul> 
    </li> 
    <li class='has-sub'><a href='#'><span>Product 2</span></a> 
    <ul> 
     <li><a href='#'><span>Sub Product</span></a></li> 
     <li class='last'><a href='#'><span>Sub Product</span></a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
</ul> 
</div> 
</div> 
</body> 

CSS: 




    body { 
     background:red; 
    } 
    .container { 
     margin:30px; 
     background:#fff; 
     padding-bottom:400px; 
    } 
    .dropdown, .dropdown li, .dropdown ul { 
     list-style:none; 
     margin:0; 
     padding:0; 
    } 
    .dropdown { 
     position:relative; 
     z-index:10000; 
     float:left; 
     width:100%; 
    } 
    .dropdown ul { 
     position:absolute; 
     top:100%; 
     visibility:hidden; 
     display:none; 
     z-index:900; 
     width:16em; 
    } 
    .dropdown ul ul { 
     top:0; 
    } 
    .dropdown li { 
     position:relative; 
     float:left; 
    } 
    .dropdown li:hover { 
     z-index:910; 
    } 

    .dropdown ul:hover, .dropdown li:hover > ul, .dropdown a:hover + ul, .dropdown a:focus + ul { 
     visibility:visible; 
     display:block; 
    } 
    .dropdown a { 
     display:block; 
     background:#000; 
     color:#fff; 
     padding:1em 2em; 
    } 
    .dropdown ul li { 
     width:100%; 
    } 
    .dropdown li:hover a { 
     background:#333; 
    } 
    .dropdown li a:focus, .dropdown li a:hover { 
     background:#666; 
    } 

    .dropdown .nonedge ul li ul li{ 
     left:100%; 
    } 
    .dropdown .edge ul { 
    right:0px; 
    } 

    .dropdown .edge ul li ul { 
     left:-100%; 
    } 





JAVASCRIPT 



    $(function() { 

    $(".dropdown li").on('mouseenter mouseleave', function (e) { 
     if ($('ul', this).length) { 
      var elm = $('ul:first', this); 
      var off = elm.offset(); 
      var l = off.left; 
      var w = elm.width(); 
      var docH = $(".container").height(); 
      var docW = $(".container").width(); 

      var isEntirelyVisible = (l + w <= docW); 

      if (!isEntirelyVisible) { 
       $(this).addClass('edge'); 
      } else { 
       $(this).removeClass('edge'); 
      } 
     } 
    }); 
    }); 
    $(function() { 

    $(".dropdown li").on('mouseenter mouseleave', function (e) { 
     if ($('ul', this).length) { 
      var elm = $('ul:first', this); 
      var off = elm.offset(); 
      var l = off.left; 
      var w = elm.width(); 
      var docH = $(".container").height(); 
      var docW = $(".container").width(); 

      var isEntirelyVisible = (l + w <= docW); 

      if (!isEntirelyVisible) { 
       $(this).removeClass('nonedge'); 
       } else { 
       $(this).addClass('nonedge'); 
    } 
    } 
    }); 
    });

http://jsfiddle.net/G7qfq/739/

來源

2016-01-30 Marley

-1

<script> 
$(document).ready(function(){ 
    $('.dropdown-submenu a.test').on("click", function(e){ 
    $(this).next('ul').toggle(); 
    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
}); 
</script>

子菜單

/* CSS: */ 
<style> 
.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu .dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -1px; 
} 
</style> 

/* JS: */ 
<script> 
$(document).ready(function(){ 
    $('.dropdown-submenu a.test').on("click", function(e){ 
    $(this).next('ul').toggle(); 
    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
}); 
</script>

來源

2016-01-30 22:23:41 Patrick

回答

相關問題