Advertisement
kyujouz

horizontal scroll menu

Jan 29th, 2022
1,597
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.88 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. #scrollmenu {
  7. margin: auto;
  8. width: 34em;
  9. height: 14em;
  10. background-color: #fff;
  11. border: 4px double black;
  12. border-radius: 15px 50px 30px 5px;
  13. overflow-y: hidden;
  14. overflow-x: auto;
  15. padding: 0.5em;
  16. white-space: nowrap;
  17. }
  18.  
  19. #awa {
  20. display: inline-block;
  21. color: black;
  22. height: 12em;
  23. width: 12em;
  24. text-align: center;
  25. padding: 15px;
  26. border: 1.5px solid black;
  27. white-space: normal;
  28. overflow: auto;
  29. border-radius: 15px;
  30. text-decoration: none;
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36. <div id="scrollmenu">
  37. <div id="awa">
  38. this scrolls horizontally! you can add more of these by adding div id="awa" if you wanna. adjust the appearance to suit your needs
  39. </div>
  40. <div id="awa">
  41. example text
  42. </div>
  43. <div id="awa">
  44. yeah
  45. </div>
  46. </div>
  47.  
  48.  
  49.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement