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.
Related
I have a site I'm building which has a few dropdown menus. I'm sure this isn't being done in the most efficient way, but I'm curious why this is happening. I have the exact same CSS code for these dropdowns but one of them is nested under the main navigation and the other one is under a mobile menu (so like everything would be one under button).
The code works somewhat because when I've changed the display to be anything but none, the styling works fine and everything.. but for some reason, I just can't find out why the mobile menu dropdown isn't working but the main navbar one is.
Here's the code for the main nav bar dropdown:
#menu .dropdown {
top: -1px;
position: relative;
display: inline-block;
z-index: 9999;
margin-left: -6px;
margin-right: -7px;
}
#menu .dropbtn {
background-color: transparent;
color: white;
border: none;
font-family: 'chivolight';
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
}
#menu .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 10em;
box-shadow: relative rgba(0, 0, 0, 0.2);
margin-top: -0.2em;
margin-left: 0.35em;
top: 2.8em;
z-index: 99;
}
#menu .dropdown-content a {
background: white;
padding: 0.4em 1em;
text-decoration: none;
display: block;
}
#menu .dropdown-content a:hover {
background-color: #ddd;
}
#menu .dropdown:hover .dropdown-content {
display: block;
}
#menu .dropdown:hover .dropbtn {
background-color: transparent;
}
```
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
And the code for the mobile menu dropdown:
#menuicon .icon-dropbtn {
background-color: white;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#menuicon .icon-dropdown {
position: relative;
display: inline-block;
}
#menuicon .icon-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;
right: 0;
}
#menuicon .icon-dropbtn:hover {
opacity: 0.8;
transition: 0.3s;
}
#menuicon .icon-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuicon .icon-dropdown-content a:hover {
background-color: #f1f1f1
}
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
#menuicon .icon-dropdown:hover .icon-dropbtn {
background-color: #3e8e41;
}
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn" style="font-size: 0.8em;"><font color=black><i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
You have a misnamed hover selector in the mobile css:
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
should read:
#menuicon .icon-dropdown:hover .icon-dropdown-content {
display: block;
}
Select the mobile display classes:
#menuicon .icon-dropdown .icon-dropbtn{
//CSS for mobile display
}
or
Add same class to both buttons:
Like
Main:
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn someclass">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
Mobile:
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn someclass" style="font-size: 0.8em;"><font
color=black>
<i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
Now use CSS for the given class:
.someclass{
//Now both buttons have same class
//Add CSS
}
I'm trying to develop a website using django and I'd like to add a navigation bar dropdown menu, but for some reason, it keeps showing up as horizontal, instead of vertical.
I'm following the tutorial that W3 Schools has on their website https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button
Despite all of my efforts it still doesn't work, I've tried to look at other questions, but most of them seem to be using a different method using lists, or their using a framework like react.
I moved my project over to this jsfiddle.net and that just seemed to make the problem even worse, because now my second list item in the dropdown doesn't show up at all.
Here is the code I'm working with http://jsfiddle.net/iggy12345/ao04gfne/9/
Here is the code pasted below:
My html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
Profile
<div class="dropdown-content">
Logout
Customize Profile
</div>
</div>
</div>
</body>
</html>
My css file:
.dropdown {
float: left;
height: 55px;
display: inline-block
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: relative;
top: 55px;
background-color: #f9f9f9;
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;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.header {
background-color: #350752;
overflow-x: hidden;
overflow-y: visible;
}
.header > a, .dropdown > a {
float: left;
color: #dcb0f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
.header a:active {
background-color: #c7860e
color: white;
}
Edit
I remodelled my css to look like Chaska's answer, but it still doesn't work, I had to make a few tweaks to get it to keep its original look, but now it adds a scrollbar whenever I hover over profile.
Basically, according to the w3 tutorial, the dropdown list should show up under the profile box, but instead, whenever I try to do it, the entries just sit over the profile button, covering it up, and then on top of that, they continue horizontally instead of vertically
Some revises applied to the css. Please read the relevant comment:
.dropdown {
float: left;
display: inline-block;
height: 55px; /* overflow: hidden will hide the dropdown menu, use fixed height instead */
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
top: 55px; /* must specify the top position */
background-color: #f9f9f9;
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;
text-align: left;
}
.header {
background-color: #350752;
overflow: visible; /* overflow: hidden will hide the dropdown menu */
}
.header > a, /* use > to select the direct child <a> instead of all of <a> child */
.dropdown > a {
float: left;
color: #dcb0f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
.header a:active {
background-color: #c7860e;
color: white;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
Profile
<div class="dropdown-content">
Logout
Customize Profile
</div>
</div>
</div>
</body>
</html>
.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: #f9f9f9;
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;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.header{
background-color: #350752;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div>
</body>
</html>
Try with this code with your CSS.
I need to create menu like shown in this screenshot:
So as you can, the cursor hover opens large sub menu with two sub sections. Will be glad for any similar examples to my issues. Thanks for your answers!
Here is a very simple example to get you started. It needs more styling of course and more content, but this should give you all the tools to have a dropdown on hover in your menu
HTML:
<header>
<a href="/url">
Hover to see dropdown
</a>
<div>
<section></section>
<section></section>
</div>
</header>
CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50px;
}
header > a {
padding: 0 2em;
height: 50px;
display: grid;
place-content: center;
}
header > div {
display: hidden;
background-color: white;
}
a:hover + div {
display: inherit;
}
Something like this should work. It utilizes the :hover attribute in the navbar tab 'Dropdown' to reveal more content (in this case it'll be just some links).
HTML:
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.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;
}
.navbar 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;
}
You can find more information on the W3School website for more!
I currently have a navigation bar with typical links "Home, About, Resume, Contact".
I currently have code so when you hover over Resume (by default has an arrow pointing down), a dropdown appears and the direction of the arrow changes to point up using two span classes (code is below).
What I want to achieve is while hovering over the dropdown contents, the arrow is still pointing up (currently it reverts to pointing down while hovering over dropdown links).
Here is the current Code:
CSS/HTML:
/* Navbar links besides Resume */
.container1 {
overflow: hidden;
font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
text-align: center;
}
/*Navbar links besides Resume */
.container1 a {
display: inline;
font-size: 30px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline;
vertical-align: middle;
}
/* Affects Resume*/
.dropdown .dropbtn {
display: inline;
font-size: 30px;
font-family: Cabin,Helvetica,Arial,sans-serif;
border: none;
outline: none;
color: inherit;
padding: 14px 16px;
background-color: inherit;
}
/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
background-color: inherit;
}
button .hover { display: none; }
button:hover .no_hover { display: none; }
button:hover .hover { display: inline; }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 52.3%;
background-color: white;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 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;
}
<div class="container1">
<a id="home" href="#">Michael Geng</a>
<a id="about" href="#">About</a>
<div class="dropdown">
<a id = "resume" href="#"><button class="dropbtn">
<span class="no_hover">Resume ▼</span>
<span class="hover">Resume ▲</span>
</button></a>
<div class="dropdown-content">
<a id = "objective" href="#">Objective</a>
<a id = "education" href="#">Education</a>
<a id = "skills" href="#">Skills</a>
</div> <!-- dropdown-content -->
</div> <!-- dropdown -->
<a id="contact" href="#">Contact</a>
</ul>
</div> <!--container1 -->
My current thought this line of code where when you hover over the dropdown contents to change the display but I have not got it working:
.dropdown-content:hover ~ .no_hover{display: none; }
.dropdown-content:hover ~ .hover{display: inline; }
You need to change the CSS that triggers the appropriate arrow span to be displayed to be based on hovering over .dropdown. See updated snippet.
/* Navbar links besides Resume */
.container1 {
overflow: hidden;
font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
text-align: center;
}
/*Navbar links besides Resume */
.container1 a {
display: inline;
font-size: 30px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline;
vertical-align: middle;
}
/* Affects Resume*/
.dropdown .dropbtn {
display: inline;
font-size: 30px;
font-family: Cabin,Helvetica,Arial,sans-serif;
border: none;
outline: none;
color: inherit;
padding: 14px 16px;
background-color: inherit;
}
/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
background-color: inherit;
}
button .hover { display: none; }
.dropdown:hover .no_hover { display: none; }
.dropdown:hover .hover { display: inline; }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 52.3%;
background-color: white;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 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;
}
<div class="container1">
<a id="home" href="#">Michael Geng</a>
<a id="about" href="#">About</a>
<div class="dropdown">
<a id = "resume" href="#"><button class="dropbtn">
<span class="no_hover">Resume ▼</span>
<span class="hover">Resume ▲</span>
</button></a>
<div class="dropdown-content">
<a id = "objective" href="#">Objective</a>
<a id = "education" href="#">Education</a>
<a id = "skills" href="#">Skills</a>
</div> <!-- dropdown-content -->
</div> <!-- dropdown -->
<a id="contact" href="#">Contact</a>
</ul>
</div> <!--container1 -->
Hi I'm trying to make a dropdown menu on the pictures but when I try to get to the links I can't the menu closes, i want the menu under the picture boxes where it is but fixed, please help, Thanks :)
Also im using Wordpress and visual composer
Site: http://www.corebusinesssa.co.za/Test/
HTML:
<div class="dropdown">
<h6 style="text-align: center;"><span style="color: #000000;"><strong>4K/HD Camcorders</strong></span><img class="dropdownimg dropdownimg2 aligncenter wp-image-391 size-full" src="http://www.corebusinesssa.co.za/Test/wp-content/uploads/2016/09/4k-cameras.png" width="104" height="70" /></h6>
<div class="dropdown-content">
Varicam
AG-DVX 200
AG-GH4U
UX Series
GH4
AG-AC30
Consumer HD
</div>
</div>
CSS:
/* The container - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
width: 106%;
height:95px;
top: -25px;
left: -6px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
overflow:auto
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 125px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 0px 16px;
text-decoration: none;
text-align:center;
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;
}
Move the div inside the h6 and then adjust the position to top:100%.
/* The container - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
width: 106%;
height: 95px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
top: 100%;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
h6:hover .dropdown-content {
display: block;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 0px 16px;
text-decoration: none;
text-align: center;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
<div class="dropdown">
<h6 style="text-align: center;"><span style="color: #000000;"><strong>4K/HD Camcorders</strong></span><img class="dropdownimg dropdownimg2 aligncenter wp-image-391 size-full" src="http://www.corebusinesssa.co.za/Test/wp-content/uploads/2016/09/4k-cameras.png" width="104" height="70" />
<div class="dropdown-content">
Varicam
AG-DVX 200
AG-GH4U
UX Series
GH4
AG-AC30
Consumer HD
</div>
</h6>
</div>