【问题标题】:Horizontal scroll action for submenus子菜单的水平滚动动作
【发布时间】:2020-07-30 18:11:06
【问题描述】:

我想在移动视图中为我的网站创建一个水平滚动菜单。我从某个地方获得了 CSS 代码,它可以工作,但它仅适用于菜单。所以,我也想要子菜单的 CSS 代码。我该怎么做?

适用于水平滚动菜单的 CSS 代码如下:

selector ul{ /* let's set the horizontal layout for our menu */
     white-space: nowrap;
    overflow-x: auto; 
    overflow-y: hidden;
    flex-wrap: inherit !important;
    scrollbar-width: none; /* this will remove scroll-bar for mozilla based browser */
}

selector a{ /* some graphic adjustmend for the A tag */
    background: #161C2E;
    border-radius: 0px;
}

selector ul::-webkit-scrollbar { /* now, let's remove the scroll-bar from the menu */
  display: none; }

【问题讨论】:

  • 请也分享您的 HTML
  • 我没有使用 HTML。我直接在 WordPress 上特定部分的 Elementor 自定义 CSS 上使用了这个 CSS 代码。
  • 欢迎来到 Stack Overflow。我们指的是应用了 CSS 的网站上的菜单/子菜单 HTML。 CSS 本身什么都不做,所以我们需要查看它必须使用的 HTML。
  • 我没有编码知识,很抱歉,但不知道如何获取我的菜单和子菜单部分的 HTML 代码,因为我设法找到了水平滚动菜单的视频在 YouTube 上直接获取视频本身提供的 CSS 代码,并将该代码粘贴到 WordPress 上 elementor 页面构建器的自定义 CSS 部分中。

标签: html css wordpress horizontal-scrolling submenu


【解决方案1】:

由于 wordpress 中的子菜单通常是另一个 ul 内的 ul,因此您也可以定位这些元素:

selector ul, selector ul ul { 
    white-space: nowrap;
    overflow-x: auto; 
    overflow-y: hidden;
    flex-wrap: inherit !important;
    scrollbar-width: none;
} 

【讨论】:

  • 我应该修改它还是直接在我的 CSS 代码部分使用它?因为我在该特定部分的元素或自定义 CSS 中尝试了此代码,但它不起作用。
  • 请使用浏览器的检查器(右键单击和“检查元素”或类似内容)查看菜单的 html 代码。有了这个,我们可以为您提供更多帮助
猜你喜欢
  • 2015-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多