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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.