I am trying to create a dropdown menu in which I can scroll when the content doesn't fit on the screen. However, this isn't working as I want it to because there doesn't appear any scrollbar when the text goes off-screen.
How should I go about doing this?
This is my code:
body {
overflow-y: hidden;
}
.dropbtn {
height: 28px;
width: 50px;
padding: 16px;
font-size: 16px;
border: none;
}
.Panel {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.Panel:hover .dropdown-content {
display: block;
overflow: auto;
}
.Panel:hover .dropbtn {
background-size: 28px 50px;
background-repeat: no-repeat;
height: 50px;
width: 28px;
margin-left: 30px;
}
<body>
<div class="Panel">
<button class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<br> <br>
Home <be>
Other <br>
Other <br>
Other <br>
Other <br>
</div>
</div>
</body>
Thanks everybody. I've found the solution. It's basically that I need to give the size of the dropdown. Otherwise, CSS won't let me put a scroll.
Related
I am trying to build a html/css button that when I hover over it, it displays a dropdown.
Unfortunately, it isn't working.
Here is the Code.
.Panel {
overflow: hidden;
width: 25%;
height: 100%;
color: blue;
scrollbar-color: black lightgrey;
scrollbar-width: thin;
float: left;
}
.Panel a {
color: black;
white-space: pre;
text-decoration: none;
}
body {
overflow: hidden;
background: url(../Images/Texture.png) repeat 0 0;
}
.Document {
pointer-events: auto;
position: static;
padding-left: 26%;
width: 49%;
height: 100%;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
background-image: url("../Images/dropdown.png");
background-size: 50px 28px;
background-repeat: no-repeat;
height: 28px;
width: 50px;
}
.Panel {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropbtn:hover {
background-image: url("../Images/dropdown2.png");
background-size: 28px 50px;
background-repeat: no-repeat;
height: 50px;
width: 28px;
margin-left: 30px;
.dropdown-content {
display: block;
}
}
<div class="Panel">
<button class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<br> <br>
Home <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
I think the problem is the incorrect nested classes in the css, try this instead:
.dropbtn:hover {
background-image: url("../Images/dropdown2.png");
background-size: 28px 50px;
background-repeat: no-repeat;
height: 50px;
width: 28px;
margin-left: 30px;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
Here is a dropdown and I want to make this like wp. When anyone arrive the dashboard and click on the avatar.Dropdown will show full screen. And when anyone visit this dashboard from pc and click on the avatar. This drop-down size will be 180px.
Here's codepen link check this out and give me solution.
In media query position relative not working. Please help me out to fix that.
<div class="dropdown">
<button class="dropbtn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbnpURUI0RXpHWPtUZouzXUDiXme-mFvQDjzuXbeRE3XB5QGKOYg" alt="User Profile">
</button>
<div class="dropdown-content">
Inad Islam
Edit my Profile
Log Out
</div>
</div>
.dropbtn {
margin: 0;
border: 0;
outline: 0;
background: inherit;
font: inherit;
cursor: pointer;
width: 100%;
height: 50px;
line-height: 50px;
padding: 5px 5px 0 5px;
}
.dropdown {
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
left:0;
background: #4796b3;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
margin:0;
padding: 10px;
color: #fff;
font-size: 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn img {
width: 40px;
height: 40px;
}
.dropdown:hover .dropbtn {
background: #25a2c1;
}
#media only screen and (min-width: 900px) {
.dropdown {
position: relative;
disolay: inline-block;
}
.dropdown-content {
min-width: 160px;
}
}
If I understand you correctly by 'responsive' I have come up with a solution.
I removed the position:absolute and left:0 from the .dropdown-content. I also removed the typo that you did on your media-query.Try this out.
https://codepen.io/ekinalcar/pen/PMBPMd
.dropdown-content {
display: none;
background: #4796b3;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#media only screen and (min-width: 900px) {
.dropdown {
position: relative;
}
}
$(document).ready(function(){
$('.dropbtn').click(function(){
$(this).next('.dropdown-content').slideToggle();
});
});
body{margin:0px; padding:0px;}
.dropbtn {
margin: 0;
border: 0;
outline: 0;
background: inherit;
font: inherit;
cursor: pointer;
width: 100%;
height: 50px;
line-height: 50px;
padding: 5px 5px 0 5px;
}
.dropdown-content {
display: none;
position: absolute;
left:0;
background: #4796b3;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
margin:0;
padding: 10px;
color: #fff;
font-size: 18px;
text-decoration: none;
display: block;
}
.dropbtn img {
width: 40px;
height: 40px;
}
.dropdown:hover .dropbtn {
background: #25a2c1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbnpURUI0RXpHWPtUZouzXUDiXme-mFvQDjzuXbeRE3XB5QGKOYg" alt="User Profile"></button>
<div class="dropdown-content">
Inad Islam
Edit my Profile
Log Out
</div>
</div>
Hope so this will help full for you.
I want to make a horizontal navigation bar that is sticky to the top with dropdown menus. The problem is that the dropdown menus no longer show when I make the navigation bar sticky.
I used the following CSS3 to achieve the sticky effect. Is there another way to accomplish the same effect, especially with CSS.
.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* This line adds stickyness */
top: 0; /* along with this line here */
width: 100%;
}
Minimum Problematic Example:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<b>V</b>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
Edit:
Thanks to Saeed and dkobando. I am only at the start of my web document journey. I have been slowly piecing together the parts of my site from various guides. I was pleasantly surprised by two helpful prompt answers. Your replies here encourage me to continue my journey.
You may try this fix below, I used a display flex and remove the overflow: hidden; on your .topnav class. I hope this will help.
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown <b>V</b></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:flex;
}
.topnav a,
.dropdown,
.dropdown .dropbtn {
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
}
.topnav a,
.dropdown .dropbtn{
padding: 14px 16px;
}
.dropdown .dropbtn {
background-color: transparent;
border: none;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
That is because the dropdown is positioned absolutely and It won't be positioned according to the fixed nav bar but according to the closest relative positioned element. It can be quickly fixed with an extra wrapper with fixed positioning.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="fixed">
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<b>V</b>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
Need help to display the text box to the left side of Track. This is what it should look like.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #94CB32;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
Track
<div class="dropdown-content">
<input type="text" placeholder="OrderID" ID="Button1" Text="Track">
<input type="button" value="Track" />
</div>
</div>
it's simple, use display: flex for the dropcontent
check the updated snippet
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #94CB32;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: flex;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<html>
<div class="dropdown">
Track
<div class="dropdown-content">
<input type="text" placeholder="OrderID" ID="Button1" Text="Track">
<input type="button" value="Track" />
</div>
</div>
</html>
Add the following to .dropdown-content:
top: 0;
right: calc( 100% + 5px );
Note that when you hover one element to show another you have to be careful about the placement. If there is a gap between the parent element and the child element you'll no longer be hovering the parent element and the child will disappear. To fix this you need both elements to touch one another. You can do this by making sure they touch (butted up next to each other or overlap on another), add padding (which might not be ideal if using a background color) or use a pseudo element. I did the latter so I added this selector:
.dropdown-content:before {
content: '';
display: block;
position: absolute;
width: 5px;
top: 0;
right: -5px;
bottom: 0;
}
This solution does what you have show in your image but I'm not sure how you want (are going to) handle the space to the left of the .dropdown. I reduced the width of body so you can see it fly out.
body {
width: 40%;
margin: 25px auto;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Fills gap between Track and flyout so it will continue to show when moving mouse. */
.dropdown-content:before {
content: '';
display: block;
position: absolute;
width: 5px;
top: 0;
right: -5px;
bottom: 0;
}
.dropdown-content {
display: none;
position: absolute;
top: 0;
right: calc( 100% + 5px );
background-color: #94CB32;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
Track
<div class="dropdown-content">
<input type="text" placeholder="OrderID" ID="Button1" Text="Track">
<input type="button" value="Track" />
</div>
</div>
I've made a top bar that contains drop-down MENU button on the right side. But this drop-down content has exactly the same size (width) as my MENU button. Finally - my goal is to make this drop-down content as wide as the top bar is.
My HTML code looks like this:
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
And more important part - CSS:
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
If you want to see how does it look like HERE is jsFiddle link.
Don't you have any idea how to solve my problem?
Just move position: relative from .dropdown to #top-bar.
By doing this, .dropdown-content will calculate width according to the nearest element with position: relative i.e #top-bar.
#top-bar{
position: relative;
height:40px;
float: left;
width: 100%;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
}
.dropdown-content {
display: none;
left: 0;
top: 100%;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
I think that's what you want
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
display: block;
float: right;
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
width: 100%;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
https://jsfiddle.net/69uts0dr/3/