响应式菜单项 css 不堆叠在一起

Posted 2023-05-08

【中文标题】响应式菜单项 css 不堆叠在一起

【英文标题】：Responsive menu items css not stacking together

【发布时间】：2020-04-09 02:08:12

【问题描述】：

我的移动菜单有一个小问题（最大宽度：768px），请继续检查 -> https://tvo35400.com/

问题似乎很简单：我希望 4 个菜单项堆叠在一起，而不是散布在整个窗口中。

这是我的导航容器的代码：

#menu-menu-ville 
    position: absolute;
    display: flex;
    justify-content: flex-start;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    width: 20rem;
    height: 100vh;
    background: #374875;
    transition: 0.6s;
    transform: translateX(-20rem);
    z-index: 999999;
    overflow-y: auto;

当我应用 flex-direction: column; 时它部分工作，但问题是菜单滚动现在是水平的而不是垂直的。

您也可以查看我的 jQuery 脚本，以备不时之需。

$(document).ready(function() 
  (function($) 
     $(".header-icon").click(function(e) 
      e.preventDefault();
      $(".header-icon").css("opacity", "0");
      $(".logo-wrapper").css("right", "2px");
      $("#menu-menu-ville").css("transform", "translateX(0)");
      $(".overlay").css("visibility", "visible");
      $(".overlay").css("opacity", "0.6");
      $(".main-nav").css("translateX", "20rem");
      $("body").css("overflow", "hidden");
    );

    $(".overlay").click(function(e) 
      $(".header-icon").css("opacity", "1");
      $(".logo-wrapper").css("right", "15px");
      $("#menu-menu-ville").css("transform", "translateX(-20rem)");
      $(".overlay").css("visibility", "hidden");
      $(".overlay").css("opacity", "0");
      $("body").css("overflow", "initial");

    );

    $(".menu-item-has-children").click(function(e) 
      $(this).find(".sub-menu").slideToggle();

    );  
  );
);

提前感谢您的帮助！

【参考方案1】：

如果你想要这样的东西：

将items:flex-start; align-content:flex-start; 添加到移动视图上的#menu-menu-ville

【讨论】：

它的工作方式和我想要的完全一样！非常感谢！