Question

我想问

如何创建包含内容的水平滚动菜单？

我在https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp中获得了教程

但是在教程中没有内容（我的意思是，如果我单击菜单联系人，teks新闻隐藏并显示teks联系人或其他teks，如果我单击菜单新闻，则单击显示teks新闻或其他teks）

这是CSS的代码：

<style>
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}
</style>

这是html代码：

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

如果单击菜单之一，如何创建带有内容的水平可滚动菜单？

如果菜单新闻我单击显示teks新闻或其他teks，如果我单击菜单联系人，则teks新闻隐藏并显示teks联系人或其他teks

谢谢

===================

解决：我发现了这个问题：Show/Hide Multiple Divs Javascript

Answer 1

您是否正在寻找类似的东西？

运行下面的代码，并将鼠标悬停在“新闻”或“联系人”上：

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu li {
  display: inline-block;
}

div.scrollmenu li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

ul>li>ul {
  display: none;
}

ul>li:hover>ul {
  background-color: #333;
  position: absolute;
  display: block;
}

<div class="scrollmenu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a>
      <ul>
        <li><a href="#">News 1</a></li>
        <li><a href="#">News 2</a></li>
        <li><a href="#">News 3</a></li>
      </ul>
    </li>
    <li><a href="#contact">Contact</a>
      <ul>
        <li><a href="#">Contact 1</a></li>
        <li><a href="#">Contact 2</a></li>
        <li><a href="#">Contact 3</a></li>
      </ul>
    </li>
    <li><a href="#about">About</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#tools">Tools</a></li>
    <li><a href="#base">Base</a></li>
    <li><a href="#custom">Custom</a></li>
    <li><a href="#more">More</a></li>
    <li><a href="#logo">Logo</a></li>
    <li><a href="#friends">Friends</a></li>
    <li><a href="#partners">Partners</a></li>
    <li><a href="#people">People</a></li>
    <li><a href="#work">Work</a></li>
  </ul>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

希望这会有所帮助

具有内容的水平滚动菜单

1 个答案: