I have an element (dropdown-content) that is displayed when its parent (Element2) is hovered. When no interaction with the element (dropdown-content) occurs I want it to act as it does now and disappear when the hover is over. But when the element gets focus (the select or input or somewhere else in the dropdown-content are clicked) I want it to stay displayed until it loses focus (clicked somewhere outside the dropdown-content), even when the coursor leaves the dropdown-content.
I have already tried to find a solution with the search and several things using CSS and/or javascript but was not able to archive what I want. Here is an example code to illustrate my problem:
.dropdown-content {
display: none;
position: absolute;
border: 1px solid black;
width: 300px;
z-index: 1;
}
.dropdown:hover .dropdown-content,
.dropdown-content:focus {
display: inline-block;
}
<ul>
<li>Element1</li>
<li class="dropdown">
<span>Element2</span>
<div class="dropdown-content">
<select>
<option>option1</option>
<option>option2</option>
</select>
<input type="text">
</div>
</li>
<li>Element3</li>
</ul>
I would prefer a CSS solution if there is a clean one but I am also fine with javascript, but I don't want a JQuery solution if this is possible. If this makes the solution way easier it would be also fine if the dropdown-contet just stays displayed when there is focus on the select and input only.
You don't need Javascript let alone jQuery for that. It can and should be done with pure CSS with the pseudo-class :focus-within.
.dropdown-content {
display: none;
position: absolute;
border: 1px solid black;
margin: -3px 0 0 3px;
}
.dropdown:hover .dropdown-content, .dropdown-content:focus-within {
display: inline-block;
}
<ul>
<li>Element1</li>
<li class="dropdown">
<span>Element2</span>
<div class="dropdown-content">
<select>
<option>option1</option>
<option>option2</option>
</select>
<input type="text">
</div>
</li>
<li>Element3</li>
</ul>
Related
I have adapted some code from the W3 hoverable dropdown tutorial and want to make it so that rather than following a link when clicked, it passes a value to a function. A rough snippet of the HTML code is below:
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content" (change)="selectChange($event)">
<a value="egg">Egg</a>
<a value="milk">Milk</a>
</div>
</div>
I want to figure out how to get the value "egg" into the JavaScript function selectChange if the user clicks on that box, but currently, the boxes are not clickable and don't do anything. I would like to avoid using a <select> tag if possible.
Here is the W3 link I got the structure of this code from:
https://www.w3schools.com/howto/howto_css_dropdown.asp
You've tagged this with angular, so I'm assuming you're using that framework. If that's the case, just use (click)="function()".
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content">
<a (click)="selectChange('egg')">Egg</a>
<a (click)="selectChange('milk')">Milk</a>
</div>
</div>
Probably the best solution
How about an eventListener to all the links in the dropdown in Javascript that checks if when a link was clicked and then performs the function with the value of the element that was clicked?
Probably the easiest solution
Or maybe for just a few elements or if you don't feel like/don't know how to use an eventListener for this could always use some simple onclick events with a parameter.
function selectChange(selected)
{
//not sure what you want to do now
console.log(selected);
alert(selected);
}
.dropbtn {
background-color: #04AA6D;
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 span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content span:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content">
<span onclick="selectChange('egg')">Egg</span>
<span onclick="selectChange('milk')">Milk</span>
</div>
</div>
*In this example a replaced the a-tags with span as you probably shouldn't use an anchor-tag without a href.
I've made a dropdown from two different divs. One is the trigger and one the submenu.
If the mouse hovers from the trigger to the submenu, the submenu closes. How can I keep it open even when the mouse switches between the two divs?
Also I can't move the submenu-container inside the dropdown-trigger. They need to be two separate divs.
$('.dropdown-trigger,.submenu-container').hover(
function(){$('.submenu-container').css('display', 'block')},
function(){$('.submenu-container').css('display', 'none')},
);
Thank you so much in advance!
You may not need jquery. you can do by css. Similar way u can do in jquery
.dropdown {
max-width: 200px;
list-style: none;
padding: 10px;
position: relative;
}
.item {
display: none;
padding: 10px 20px;
border: 1px solid #000;
}
.item.default {
display: flex;
justify-content: space-between;
}
.dropdown:hover .item {
display: block;
}
.dropdown:hover .item.default {
display: flex;
}
<ul class="dropdown">
<li class="item default">Select <span>V</span></li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
</ul>
I'm super new to coding, and I'm wondering if you can help me out with this.
I'm trying to create a drop down menu that appears when you hover over a link "Exile" in a vertical list of links. The vertical list of links is simple and looks like the photo attached. I want two new links to appear in the list when you hover over "Exile," and I've been able to accomplish this using the hover feature. The problem is: although the two new links appear when I hover over exile, I need the "Today" link to move down so that the links are displaying ontop of each other in the hover. I'm assuming it uses javascript. Can anyone point me in the right direction?
Picture of my links
li {
display: block;
line-height: 1.5;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
a.link-dropdown {
font-size: 13px;
color: #999999;
line-height: 1;
}
<div class="sidebar">
<h1>Relatos trans</h1>
<li>Introduction</li>
<br />
<li class="stories-of">Coming of age</li>
<li class="stories-of">Arrest and incarceration</li>
<li class="stories-of">Theater and performance</li>
<div class="dropdown">
<li class="stories-of">Exile</li>
<div class="dropdown-content">
<li class="stories-of">Noelia and Carolina</li>
<li class="stories-of">Other stories of exile</li>
</div>
</div>
<li class="stories-of">Today</li>
<br />
<li>Acknowledgements</li>
<li>Resources</li>
<br />
</div>
I'm learning web design and I'm struggling to position a button. I'm a beginner and trying to recreate league of legends client which is pretty simple in browser just for exercise, but I don't know how to use javascript and I can not find the solution online.
So this is how I want it to look: https://prnt.sc/pos3gf
I've tried to add logo and button in list and then display: inline but that doesn't really work or I just don't know to make it work.
This is my code
https://codepen.io/simic21/pen/poowQXK
I removed all of the CSS before /*====== REGION ======*//* Dropdown Button */ and replaced it with this:
.logo {
display: inline-block;
}
.region {
display: inline-block;
}
That will display the logo and region divs side by side. Now the only thing left is to add the rest of your desired styling such as padding or margin.
Add to your .region class display:inline-block and the same to your .logo class:
.region {
padding: 20px;
display:inline-block;
}
.logo {
padding: 40px 0px 0px 50px;
display:inline-block;
}
<div class="centered">
<div class="logo">
<img src="assets/img/logo.png" alt="logo">
</div>
<div class="region">
<button onclick="myFunction()" class="dropbtn">
<strong>EUNE(EN)</strong></button>
</div>
</div>
I have a HTML drop down list with list of options. When user clicks on the dropdown list, first five options with scrollbar should be seen. I want to achieve this using JavaScript and CSS. As I'm new to these, please suggest how I can show the dropdown list with scrollbar so that can able to scroll and select an option from the dropdown list. Below is my HTML code:
<html>
<body>
<select>
<option value="one">Option1</option>
<option value="two">Option2</option>
<option value="three">Option3</option>
<option value="four">Option4</option>
<option value="five">Option5</option>
<option value="siz">Option6</option>
<option value="seven">Option7</option>
<option value="eight">Option8</option>
</select>
</body>
</html>
With the above html code, when the user click on the dropdown list, all options are seen without scrollbar.I want to show first five options with scrollbar.
try this https://jsfiddle.net/Ltkpshm9/ example i have added to the jsfiddel
or simply use,
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="one">Option1</option>
<option value="two">Option2</option>
<option value="three">Option3</option>
<option value="four">Option4</option>
<option value="five">Option5</option>
<option value="siz">Option6</option>
<option value="seven">Option7</option>
<option value="eight">Option8</option>
</select>
You can do this with just using html and css. You need to create a div that will contain your button as well as the "dropdown" div with the linked list inside. On the actual css for the dropdown div, you should specify a max-height to adjust how many links you want to show, as well as overflow:auto to make it scroll-able. Including a screenshot of how it should look, and here is an example just using HTML and inline CSS:enter image description here
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.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;
max-height: 200px;
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}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
</div>
</div>
</body>
</html>
*Also I just realized that I created an example with links and yours uses the option element, but the same concept should apply. Just edit the css of the dropdown-content class to include option:
.dropdown-content a, option {//same css here}