Horizontal Scrollable Menu with content

Question

i want to ask

how to create Horizontal Scrollable Menu with content?

i get tutorial in https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

but in tutorial there is no content (i mean if menu news i click show teks news or other teks if i click menu contact, teks news hide and show teks contact or other teks)

this the code for 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>

and this for html code :

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

how to create Horizontal Scrollable Menu with content if click one of menu?

if menu news i click show teks news or other teks if i click menu contact, teks news hide and show teks contact or other teks

thanks

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

solved: i found this : Show/Hide Multiple Divs Javascript

What exactly do you call *"content"*? Please provide a clearer description of what exactly is the expected behavior. — tao, Nov 14 '18 at 15:03
thanks sir for reply @AndreiGheorghiu i mean like this, if menu news i click show teks news or other teks if i click menu contact, teks news hide and show teks contact or other teks — creat15, Nov 14 '18 at 15:05
Before expecting the browser to display the content, you need to add it. You have to hide it by default and display it according to whatever rules you set, when the links are used. Your question, in current form, is extremely vague and too broad. — tao, Nov 14 '18 at 15:09
thanks sir @AndreiGheorghiu for reply, any tutorial for this case sir, i am confused by the keywords for this problem — creat15, Nov 14 '18 at 15:14

score -1 · Answer 1 · answered Nov 14 '18 at 15:31

Are you looking for something like this?

Run the code snipped below and hover over News or Contacts:

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>

Hope this helps

thanks sir for answer my question, but i'm sorry this is not what I'm looking for, i want if i click menu "news" teks Horizontal Scrollable Menu Resize the browser window to see the effect. change teks news and if i click menu "contact" teks news hide and show teks contact — creat15, Nov 14 '18 at 15:39

Horizontal Scrollable Menu with content

1 Answers1