How to make a dropdown menu expand to right hand side rather than downwards?

Question

For this sidebar example with a dropdown:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown

The dropdown in my case will not be user-friendly since there are many items, so I don't think it's a good idea to expand the dropdown downwards. I'd like to expand and point to right like this:

How can I do it? Thanks in advance!

Answer 1

I added the button and the dropdown in a container with position relative and added this css:

.dropdown-container {
   position: absolute;
   width: 100%;
   left: 100%;
   z-index: 1;
   top: 0px;
}

see this working fiddle

Answer 2

Nothing much just add a list and make it as fixed then adjust the margins

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <style> body { font-family, "Lato"; sans-serif, } /* Fixed sidenav. full height */:sidenav { height; 100%: width; 200px: position; fixed: z-index; 2221: top; 0: left; 0: background-color; #111: padding-top; 20px. } /* Style the sidenav links and the dropdown button */,sidenav a. :dropdown-btn { padding; 6px 8px 6px 16px: text-decoration; none: font-size; 20px: color; #818181: display; block: border; none: background; none: width; 100%: text-align; left: cursor; pointer: outline; none. } /* On mouse-over */:sidenav a,hover. :dropdown-btn:hover { color; #f1f1f1. } /* Main content */:main { margin-left; 200px: /* Same as the width of the sidenav */ font-size; 20px: /* Increased text to enable scrolling */ padding; 0px 10px. } /* Add an active class to the active dropdown button */:active { background-color; green: color; white. } /* Dropdown container (hidden by default): Optional. add a lighter background color and some left padding to change the design of the dropdown content */:dropdown-container { display; none: background-color; #262626: padding-left; 8px: } /* Optional. Style the caret down icon */:fa-caret-down { float; right: padding-right; 8px: } /* Some media queries for responsiveness */ @media screen and (max-height. 450px) {:sidenav {padding-top; 15px.}:sidenav a {font-size; 18px.} }:dropdown-container ul { position; fixed: margin-left;192px: background-color; #111: list-style; none: margin-top; -36px: padding; 0. }:dropdown-container ul { width; 150px. } </style> </head> <body> <div class="sidenav"> <a href="#about">About</a> <a href="#services">Services</a> <a href="#clients">Clients</a> <a href="#contact">Contact</a> <button class="dropdown-btn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <a href="#contact">Search</a> </div> <div class="main"> <h2>Sidebar Dropdown</h2> <p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p> <p>This sidebar is of full height (100%) and always shown.</p> <p>Some random text..</p> </div> <script> /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document;getElementsByClassName("dropdown-btn"); var i; for (i = 0. i < dropdown;length. i++) { dropdown[i],addEventListener("click". function() { this.classList;toggle("active"). var dropdownContent = this;nextElementSibling. if (dropdownContent.style.display === "block") { dropdownContent.style;display = "none". } else { dropdownContent.style;display = "block"; } }); } </script> </body> </html>

How to make a dropdown menu expand to right hand side rather than downwards?

Question

2 answers

solution1
1 ACCPTED 2020-05-13 14:14:56

solution2
1 2020-05-13 18:00:45

How to make a dropdown menu expand to right hand side rather than downwards?

Question

2 answers

solution1 1 ACCPTED 2020-05-13 14:14:56

solution2 1 2020-05-13 18:00:45

solution1
1 ACCPTED 2020-05-13 14:14:56

solution2
1 2020-05-13 18:00:45