sending in enter image description here the screenshot of the code
You need to add a bit of javascript to do that.. look at this example its pretty straightforward.
<head>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<style>
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* 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);
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: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
CLoud
Data
Digitale
Commerece
Crm/Erp
About Us
</div>
</div>
</body>
Related
the code react below with the css should generate a dropdown menu with the switch on the menu, but it doesn't work what is this about? and how can I fix it
Css Style File:
/* Dropdown Button */
.dropbtn {
background-color: #04aa6d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #3e8e41;
}
TypeScript Code:
import type { NextPage } from "next";
import styles from "../styles/header.module.css";
import Head from "next/head";
export const Header: NextPage = () => {
return (
<div>
<Head>
<title>Lamboghini</title>
<meta name="description" content="Lamborghini" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className={styles.dropdown}>
<button className={styles.dropbtn}>Dropdown</button>
<div className={styles.dropdown_content}>
Link 1
Link 2
Link 3
</div>
</div>
</div>
);
};
Your CSS indicates
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
But your component is using dropdown_content (underscore instead of hyphen)
<div className={styles.dropdown_content}>
I have this drop down which looks like this
Now when I click on Add Equipment everything works fine, but when I click on the Deployed Equipments the dropdown of the Add Equipment drops down.
Basically this is what happens when I click Deployed Equipments
Am I doing something wrong?
Here's my css:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* 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);
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: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
Here's my html:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Add Equipment</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Deployed Equipments</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Here's my JavaScript:
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Both the divs have same id myDropdown. You can remove ids for the div and use the below code to access the dropdown using nextElementSibling of the clicked button. Hope this helps.
function myFunction() {
//Remove class 'show' for dropdown except the current one
[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
if (this.event.target.nextElementSibling !== el)
el.classList.remove("show");
});
//this.event.target refers to the button clicked. Get nextelement and toggle class 'show'
this.event.target.nextElementSibling.classList.toggle("show");
}
Example:
function myFunction() {
[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
if (this.event.target.nextElementSibling !== el)
el.classList.remove("show");
});
this.event.target.nextElementSibling.classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
el.classList.remove("show");
});
}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
/* 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);
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: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Add Equipment</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Deployed Equipments</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You should not use the same ID for 2 different elements on the same page. myDropdown appears to be on both.
Here you can find a solution made using jQuery:
$('.dropdown').click(function() {
$(this).find(".dropdown-content").toggleClass("show");
});
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* 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);
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: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Add Equipment</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Deployed Equipments</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
So I've basically tried everything I could think off. I want to make a drop down menu from an image I'm using. The cursor does manage to become a pointer. I'm really lost to what I've done wrong.
This is the HTML I have right now:
<a>
<img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</img>
</a>
And here's the CSS:
/* Dropdown Button */
.dropbtn {
cursor: pointer;
background-color: none;
}
/* 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 (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
Use below code
$(".dropbtn").click(function() {
$("#myDropdown").toggleClass("show");
});
.dropbtn {
cursor: pointer;
background-color: none;
}
/* 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;
}
a:hover .dropdown-content {display:block}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>
<img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</a>
Are you open to using jQuery?
You can achieve what you want by simply adding:
$(".dropbtn").click(function() {
$("#myDropdown").toggleClass("open");
});
Codepen Demo
$(".dropbtn").click(function() {
$("#myDropdown").toggleClass("open");
});
/* Dropdown Button */
.dropbtn {
cursor: pointer;
background-color: none;
}
/* 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);
}
.dropdown-content.open {
display: block;
}
/* 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 (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a>
<img class="dropbtn" id="profile" src="http://placehold.it/350x350" alt="Profiel" width="50px" height="50px">
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</img>
</a>
Have you made sure to change the dropdowns CSS to display: block; when the image is clicked?
If not, try this out (JavaScript):
var trigger = document.getElementById("profile"),
dropdown = document.getelementById("myDropdown");
trigger.onclick = function(){ // on image click
dropdown.classList.toggle("active"); // toggle dropdown display
});
CSS:
or jQuery (if you have it referenced within your website):
$("#profile").click(function(){ // on image click
$("#myDropdown").toggleClass("active"); // toggle dropdown display
});
Make sure (if you don't already know) to add the above to a script tag within your <head> or <body> tags, inside of your HTML document!
#myDropdown.active{ /* if #myDropdown has class "active" */
display: block; /* make the dropdown visible */
}
Hope this helps! :-)
How do I move the drop down menu onto a certain area ?
HTML CODE:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Mirror Page
Link 2
Link 3
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
CSS CODE:
/* Dropdown Button */
.dropbtn {
background-color: #262829;
color: white;
padding: 16px;
font-size: 16px;
right:80px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* 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 (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
IMAGE OF WHAT I WANT DONE:
want to move the dropdown onto the restoration page
You have to add a top: x px; for your dropdown content in order to place it below your header bar. Like this:
.dropdown-content {
display: none;
position: absolute;
top: 30px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Any button is set to display: block by default. To align it next to the dropdown buttons, use either float: left or display: inline-block.
Previously, when my header only had 3 titles, i had no wrapping issues, however after adding another title, that specific title misplaces itself on top of the actual header.
Diagram of desired result: https://i.gyazo.com/3a71cc861daf2ec897cceed30d4bb576.png
Codepen: https://codepen.io/valik140795/pen/qadXOo
I believe the issue is coming from a dropdown button positioning(if not css), yet I am unable to specifically locate the issue.
Code of the button of the title that relocates itself:
<body>
<div class="body">
<div class="block_header">
<div class="lang">RU | ENG</div>
<img src="pictures/logo.png" class="logo" width="220px;" />
<ul>
<style>
.dropbtn {
background-color: #282828;
color: #AA9568;
padding: 0px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #282828;
}
.dropdown {
position: relative;
z-index: 999;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
z-index: 999;
background-color: #282828;
min-width: 180px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #AA9568;
padding: 3px 5px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #282828}
.show {display:block;}
</style>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a></button>
<div id="myDropdown" class="dropdown-content">
Nobilis
Color de Seda
Eugenio Colombo
Libra
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
Thanks in advance.
The dropdown element that positions on top is out of the ul element that holds the other three, you should put it in the same parent container as them.