Question

我正在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');
     }
     }
    });
    });

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

Answer 1

<% @activities.where(:user_id => current_user.id).where(:activity_type => :personal).each do |activity| %>
<%= activity.activity_name %>
<% end %>

子菜单

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

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

1 个答案: