如何使用javascript为溢出的子菜单和子菜单项动态调整css_Javascript_Jquery_Css_Drop Down Menu_Menu

如何使用javascript为溢出的子菜单和子菜单项动态调整css

javascript jquery css drop-down-menu menu

如何使用javascript为溢出的子菜单和子菜单项动态调整css,javascript,jquery,css,drop-down-menu,menu,Javascript,Jquery,Css,Drop Down Menu,Menu,我正在建立一个CSS菜单，并希望确保子菜单和子菜单留在屏幕上，不会溢出。这是一个响应html布局，我想动态调整CSS，以便当屏幕大小调整时，受修复影响的菜单项现在可能在下一行和最左边重置。。。这是我试过的。。我的css和javascript很差 HTML: <body> <div class="container"> <div id='cssmenu'> <ul class='dropdown'> &

我正在建立一个CSS菜单，并希望确保子菜单和子菜单留在屏幕上，不会溢出。这是一个响应html布局，我想动态调整CSS，以便当屏幕大小调整时，受修复影响的菜单项现在可能在下一行和最左边重置。。。这是我试过的。。我的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');
     }
     }
    });
    });

子菜单

最后我就这样做了。。。

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