Doing a dropdown button in css - javascript

I'm trying to incorporate a dropdown button in my website but I don't know why the content of button is not showing correctly:
<body>
<div class="topnav">
<a id="inicio" href="index.php">Inicio</a>
<a id="contacto" href="login.php" >Login</a>
<a id="contacto" href="registro.php">Registro</a>
<a id="contacto" href="#" >Contacto</a>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Iniciar sesion
</div>
</div>
<input type="text" placeholder="Search..">
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
You can try the code here: https://jsfiddle.net/pgn6yw5f/

Set the background color of the dropdown-content a in your CSS-file. below is an example
dropdown-content a {
/* Your other styling */
background-color: inherit;
}
that solves the display issue.

After some search
Here is an example of a drop-down menu using CSS only to improve performance
.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;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
for more examples on CSS only dropdown menus look HERE

Related

alter .dropdown-content formatting to fit specific buttons using id in css

I have a splash page with 3 dropdown buttons that I'm editing. Each of them is based on a specific color that represents a geological time period. I want the .dropdown-content formatting for each button to be different & to reflect this base color. When I try to use the id tag to alter each button's '.dropdown-content' attributes, it breaks the code. Here is the 'broken' css:
.dropbtn {
color: black;
padding: 16px;
font-size: 15px;
cursor: pointer;
}
#left.dropbtn {
border-color: #f57a5f;
background-color: rgba(245, 122, 95, 0.2);
}
#middle.dropbtn {
border-color: #9DC2A6;
background-color: rgba(157, 194, 166, 0.2);
}
#right.dropbtn {
border-color: #47C7EA;
background-color: rgba(71, 199, 234, 0.2);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
#left.dropdown-content {
display: none;
position: absolute;
background-color: #f57a5f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#middle.dropdown-content {
display: none;
position: absolute;
background-color: #9DC2A6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#right.dropdown-content {
display: none;
position: absolute;
background-color: #47C7EA;
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;
font-size: 15px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(157, 194, 166, 0.2)}
/* 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 #left.dropbtn {
background-color: #f57a5f;
}
.dropdown:hover #middle.dropbtn {
background-color: #9DC2A6;
}
.dropdown:hover #right.dropbtn {
background-color: #47C7EA;
}
<div class="jumbotron">
<div class="container">
<div class="wrapper">
<h2><t id="the">The</t> Wowsers</h2>
<p>Revealing stuff & knowledge & things</p>
<div class="row">
<div class="dropdown">
<button id="left" class="splashMainButton btn btn-info dropbtn">Learn</button>
<div class="dropdown-content">
Teach & Learn
<a onclick="">News & Info</a>
</div>
</div>
<div class="dropdown">
<button id="middle" class="splashMainButton btn btn-info dropbtn">Data</button>
<div class="dropdown-content">
Enter
Visualize
Retrieve
Browse
</div>
</div>
<div class="dropdown">
<button id="right" class="splashMainButton btn btn-info dropbtn">Join & Support</button>
<div class="dropdown-content">
Join!
<a onclick="">Patreon!</a>
<a onclick="">Merch</a>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</div>
Do I have the nomenclature wrong in css? Do I need to add an id to the for each .dropdown-content?
You need a space after each ID, e.g.:
#middle .dropdown-content
Because .dropdown-content is a child of #middle.
Without a space, it means the element with both an ID of middle and a class of dropdown-content.
Also, ID's are (or at least should be) unique, so you don't need to do this:
#left.dropbtn
You can target the element with just the #left selector.

New to html,css, and javascript. I am having trouble passing variables to my javascript function from a drop down menu onclick

I assume I am making a syntax error, but not able to find an example close to mine on google. Would love any help anyone is willing to provide. I just started working in HTML, CSS, and JavaScript today. I thought it might be how I am passing the values to the function. However when I look up passing values it seems like functionName(value) is the correct format.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
</script>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Red
Blue
Green
</div>
</div>
</body>
</html>
You simply need single quotes '' around your string function arguments. When you use just a color name, your code is looking for a variable named red/ green/ blue, and not interpreting it as a string.
Red
Blue
Green
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
</script>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Red
Blue
Green
</div>
</div>
</body>
</html>
When you pass a string to a function as a parameter it needs to be in quotes. If your function is already in double quotes, you can use single quotes to pass the string. Like this -
onclick="changeColor('myColor')"
So the correct syntax will be
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Red
Blue
Green
</div>
</div>

color boxes inside select option html

color boxes inside select option in html
i want do it using html and css and without using jquery or javascript
Output should be like this
i have tried
.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;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><span style="background-color:Red"> </span>
Red</a>
<a href="#"> <span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<span class="color" style="background-color:Red"> </span> Red
<span class="color" style="background-color:Green"> </span> Green
</div>
</div>
but output should display color boxes inside dropdown.
color boxes inside select option html
here i am using anchor tag and div tag in the code i have written.
but i want it in select, option tag
You can't do it without JavaScript - here's some very simple click handlers that do what you want:
function updateColor(element) {
var newColor = element.firstChild.style.backgroundColor;
element.parentElement.parentElement.style.backgroundColor = newColor;
console.log(newColor);
}
.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;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#" onclick="updateColor(this)"><span style="background-color:Red" onclick="updateColor(this)"> </span>
Red</a>
<a href="#" onclick="updateColor(this)"><span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div onclick="updateColor(this)"><span class="color" style="background-color:Red"> </span> Red</div>
<div onclick="updateColor(this)"><span class="color" style="background-color:Green" onclick="updateColor(this)"> </span> Green</div>
</div>
</div>
Remove "min-width: 160px;" from .dropdown-content
And
Remove "padding: 12px 16px;" from .dropdown-content a

Drop down menu only by click on button

I am trying to make a drop down menu, but I want to show and hide drop down just by click on the button. Currently drop down is hiding even when I click on one of the children. How to fix it?
Fiddle:
<ul id="nav">
<li class="parent"><button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Try it:
http://jsfiddle.net/zyfv6nd0/
$(document).ready(function() {
$('button').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
Change your selector from $('.parent') to $('.parent button'):
$(document).ready(function() {
$('.parent button').click(function() {
$(this).next('.sub-nav').toggleClass('visible');
});
});
#nav {
list-style: none;
padding: 0;
margin: 0;
}
#nav > li {
display: inline-block;
vertical-align: top;
position: relative;
}
#nav ul.sub-nav {
position: absolute;
min-width: 200px;
display: none;
top: 100%;
left: 0;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Drop down menu only by click on button example classList.toggle pure js
/* Cross-browser solution for classList.toggle() */
function myFunction2() {
var x = document.getElementById("myDropdown");
if (x.classList) {
x.classList.toggle("show");
} else {
var classes = x.className.split(" ");
var i = classes.indexOf("show");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("show");
x.className = classes.join(" ");
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block}
<p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn" onclick="myFunction2()">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>

Show drop down menu under link

I try to show a dropdown menu after the user hovers over the link with id galerie. I solved it like this:
$("#gallerie").mouseover
(
function()
{
$("#gallerie_drop").css("display","block");
}
);
$("#gallerie_drop").mouseleave
(
function()
{
$("#gallerie_drop").css("display","none");
}
);
#header {
text-align: right;
padding:20px;
}
#header a {
padding: 20px;
}
#gallerie_drop {
display:none;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: block;
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}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
Galerie
Videos
Photos
Foo
Bar
</div>
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
But how can i let the box appear directly under the link?
JSFIDDLE: https://jsfiddle.net/c544es76/2/
If you are creating Menu, please use UL, LI.
Here is demo, with hoverable item. All without JS:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Need changes.
You HTML Should be like this,
<div class="yourclass">
Galerie
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
</div>
And CSS,
.yourclass{
position: relative;
}
#gallerie_drop{
position: absolute;
top: 10px;
left: 10px;
}
And the script is correct to show/hide the element.
Add position:relative to .gallery_drop
#gallerie_drop {
display:none;
position:relative;
}
and change your mouseover callback to
$("#galerie").mouseover
(
function()
{
$(this).append($('#gallery_drop'));
$("#gallerie_drop").css("display","block");
}
);
This will append the div to your hover link. You have size it appropriately.
Use Like This
Javascript is not needed
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
float:right;
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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
Galerie
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<li><a class="active" href="#Videos">Videos</a></li>
<li> <a href="#photos" >Photos</a></li>
<li> <a href="#Foo" > Foo</a></li>
<li> <a href="#Bar" > Bar </a></li>
</li>
</ul>
</body>
</html>

Categories