I've created a sub menu using html/css and I'm now trying to apply a dropdown on these links but I'm struggling to bring the dropdown up. As you can see it's now stuck within the container. Here is the link:
https://vitrinemedia.ca/retail-test (I'm using wordpress)
.menu-row {
display: flex;
justify-content: space-around;
}
.dropbtn {
color: #1a1a1a;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 5;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
<div class="menu-row">
<div class="dropdown">
<div class="dropbtn"><strong>STOREFRONT</strong></div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<div class="dropbtn"><strong>STORE DISPLAY</strong></div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
I took out some if the html cause the code was too long so I've just copy the first and last div.
Thank you so much for your help,
.grve-background-wrapper and #grve-theme-wrapper .grve-section[data-section-type="fullwidth-background"] are both set to overflow: hidden
If you set them both to overflow: visible then the dropdown will come out of the box.
Related
[i am new to website design, any help is appreciated]
This code is for having the dropdown button links appear in a list form, what i am trying to do is when you hover over the "More about Us", the links will show on the right side of the button
[HTML]
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
[CSS]
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #B9DADC;}
OK, if now i understand what do you want you can solve this adding the position at the .dropdown-content.
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left: 100%;
top:0;
}
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
left: 100%;
top:0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #B9DADC;}
<html>
<body>
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
I loose the fact that you want the link displayed all inline. To achieve this you have to set a fixed dimensione of .dropdown-content like :
width: 350px;
and the display of a element, like
display: inline-block;
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
left: 100%;
top:0;
width:350px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
display:inline-block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #B9DADC;}
<html>
<body>
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
This is not sure the best solution but at the moment it is the only solution that comes to my mind.
Maybe you can try playing with
display: flex;
adding it to the .dropdown-content and then working on child element
I have a p-table in which the last column contains three dots that open a dropdown menu.
The dropdown menu position is fixed and does not suit the position of the td element of each row.
HTML code:
<td width="80" class="grp-list">
<a (click)="myFunction()">
<div class="test">
<div id="myDropdown" class="dropdown-content">
<a >Home</a>
<a >About</a>
<a >Contact</a>
</div>
</div>
CSS file:
.test:after {
content: '\2807';
font-size: 20px;
//position: relative;
}
.grp-list{
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
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;
font-family: SFR;
}
.show {
display: block;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
}
ts file:
myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
If you want to reuse that css you can create a Mixin with scss, it allows you to reuse it.
Or you just can make that a component having a content input with the same css that you have there.
I'm building a hover menu using css and bootstrap(for flex grid). If I try to put my menu in any parent div, my menu only goes as wide as the parent div.
Also I can't seem to center my hover menu to the length of my menu item.
So, how can I make my menu items stretch the width so the text does not wrap onto a new line and how do I center the whole menu relevant to it's link?
html
<div class="d-flex flex-row">
<div class="dropdown">
<button class="dropbtn">Small</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">a really long Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
</div>
CSS
/* Dropdown Button */
.dropbtn {
color: #3a3a3a;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background: #fff;
border: 1px solid #cecece;
color:#3a3a3a;
z-index: 1;
box-sizing: border-box;
}
.dropdown-content:after, .dropdown-content:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.dropdown-content:after {
border-bottom-color: #fff;
border-width: 13px;
margin-left: -13px;
}
.dropdown-content:before {
border-bottom-color: #cecece;
border-width: 14px;
margin-left: -14px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:$green;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
//background-color: #3e8e41;
}
how can I make my menu items stretch the width so the text does not wrap onto a new line?
You can use the css property white-space: nowrap;, so Text will never wrap to the next line. See docs: https://www.w3schools.com/cssref/pr_text_white-space.asp
new line and how do I center the whole menu relevant to it's link?
So you can set a position left:50% and then use the transform property setting the value translateX(50%) to bring it back 50% of its size. Add the following to .dropdown-content :
left: 50%;
transform: translateX(-50%);
/* Dropdown Button */
.dropbtn {
color: #3a3a3a;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background: #fff;
border: 1px solid #cecece;
color:#3a3a3a;
z-index: 1;
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content:after, .dropdown-content:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.dropdown-content:after {
border-bottom-color: #fff;
border-width: 13px;
margin-left: -13px;
}
.dropdown-content:before {
border-bottom-color: #cecece;
border-width: 14px;
margin-left: -14px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
white-space: nowrap;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:$green;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
//background-color: #3e8e41;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="dropdown">
<button class="dropbtn">Small</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">a really long Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
</div>
I have this dropdown menu, for my mobile site. The problem is, it will not go away when clicking outside of the dropdown menu. So when clicking the button, there is no way of getting rid of the menu again, besides choosing one of the other sites from the menu. Is it possible, when it shows, to make it go away if you click outside of it?
This is my code:
/* Dropdown Button */
.dropbtn {
background-color: #948a69;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #9e9370;
}
<div style="position:absolute; top:15px; left:15px;">
<div class="dropdown">
<button class="dropbtn"><b>MENU</b></button>
<div class="dropdown-content">
Velkommen
Produkter
Fadøl
Historie
Kontakt
</div>
</div>
</div>
I just had this same issue and found a solution from here:
http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html
The fix centers around using a transparent image to force the browser behavior we want. Add this CSS:
// For the Safari mobile browser
div img.close {
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
div button:hover + img {
display: block;
}
Then add this in your HTML, before your last </div>:
<img class="close" src="ipad/trans.gif" />
I personally am using this with lists rather than buttons, so there might be some tweaking necessary. But I can confirm it works using lists (<ul> and <li> based menu).
I am trying to create pure and simple HTML+CSS drop down menu which will open in a full width mode underneath each item and will also push content. This image and jsfiddle better explains what I am trying to achieve:
jsfiddle.net/66qez5tn
How do I do this ?
This code can do the drop down menu with HTML and CSS:
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>