I wanna make the select input like this, I already designed the UI
I tried to search in google, how to build it to code and many of the people seems to use dropdown css with UL and LI.
Is there any way to build this design with select tag, or if I must use dropdown li how to build the list to functions like select.
You can simulate the select dropdown as follows.
I assume you use a form for this. The code contains a hidden input element which will get the value that was selected.
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
<li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
<li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
</ul>
</div>
</form>
Related
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);
I have made a toggle button to show some navlinks on mobile screens.
However on the first page load it takes two clicks.
After that point it toggle perfectly fine.
How can I make it so it functions correctly first time?
Heres the script that contains the function.
script.js
function ToggleNavLinks() { /
var navLink = document.getElementsByClassName("nav-links")[0];
if (navLink.style.display === "none") {
navLink.style.display = "flex";
}
else {
navLink.style.display = "none";
}
}
Heres the layout file that contains the front-end element.
I have tested if it was the external script reference and it definitely works.
layout.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<meta charset="utf-8"/> <!-- Charset -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script type="text/javascript" src="/javascripts/script.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<img class="logo" alt="logo" src="images/logo-stock.png">
<a class="nav-toggle" onclick="ToggleNavLinks()" >
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!-- Links used in the navbar -->
<div class="nav-links">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
</header>
<div>
{{{body}}}
</div>
</body>
</html>
Ill also include the stylesheet in case that has anything to do with it.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
:root {
font-size: 16px;
font-family: 'Roboto', sans-serif;
--text-primary: white;
--text-secondary: #4c6bc1;
--bg-primary: #101316;
--bg-secondary: #181a1d;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--bg-primary);
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #181a1d;
}
body::-webkit-scrollbar-thumb {
background: #4c6bc1;
}
.navbar {
justify-content: space-between;
position: relative;
background-color: var(--bg-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar img {
width: 250px;
height: 100px;
}
.logo{
max-width: 100%;
height: auto;
}
.navbar-links {
height: 100%;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
font-size: 1.5rem;
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
.nav-links li a:hover {
color: #4c6bc1;
}
.nav-toggle {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
}
.nav-toggle:hover {
cursor: pointer;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links ul {
width: 100%;
flex-direction: column;
}
.nav-links li {
text-align: center;
}
.nav-links.active {
display: flex;
}
element.style.display === 'none'
is true when the element has an inline style attribute, which includes display: none. Note that this is true regardless of the actual computed style property of the element. You can check it in this example:
console.log(document.querySelector('.test').style.display);
.test {
display: block !important;
}
code {
background-color: #eee;
}
<div style="display: none;" class="test">I haz <code>style.display === 'none'</code>. You are looking at me. Stop staring, it's not nice.</div>
To check the computed property of the display, use
window.getComputedStyle(element).display === 'none'
In conclusion, replace
if (navLink.style.display === "none") {
with
if (window.getComputedStyle(navLink).display === "none") {
It maybe not the problem of Your Javascript. First check your CSS file. Check if the order of your code i.e display tag is already none or flex. Then only it was not working at 1st instance.
It may be like that:
.navlink{
display: none;
}
Change it to :
.navlink{
display: flex;
}
Is it possible to have an option list in two columns? For example that an option has a text that is on the left side and another that is on the right, but in the same row.
Example:
+-----select options-----+
option1 option2
option3 option4
+-----------------------+
It's not possible to do that with a standard select but you can simulate it. Below is an example which you can modify according to your needs.
When the form is submitted, the selected option is being sent as a hidden input.
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 160px;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
width: 100%;
}
.options.open {
display: flex;
flex-wrap: wrap;
}
li {
display: flex;
align-items: center;
cursor: pointer;
width: 50%;
}
li:nth-child(odd) {
justify-content: flex-start;
}
li:nth-child(even) {
justify-content: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><span>Option 1</span></li>
<li class="option"><span>Option 2</span></li>
<li class="option"><span>Option 3</span></li>
<li class="option"><span>Option 4</span></li>
</ul>
</div>
</form>
I want to add a feature such that when I click the flex-item it must expand to size of complete row below it. Like basically increase it's size when I click on it, and get back to previous size when I click it again.
The subsequent elements must remain of same size and be shifted to next row after the expanded clicked flex-item and follow the same properties of flex-box. The flex-items must be clickable elements which expand on click and get back to same size on another click.
I am not able to figure this out and I am new to front-end technologies.
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
$(this).insertAfter($('[class^="flex-item"]').last());
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
You can toggle class on click.
var i = 1; // just for differentiate divs
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar-'+i));
$(this).insertAfter($('[class^="flex-item"]').last());
i++
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
You might want to just add a class to the clicked flex-item that sets its width to 100%, then toggle this class on click.
Now I don't know if you wanted to: (a) just expand one flex-item at a time; or (b) you'd want to retract flex items on click only, but I made scenario (a) in my answer as this probably makes more sense. Nevertheless, you can go for scenario (b) by deleting this line of code:
$('.expand').removeClass('expand');
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click','.flex-item',function(){
$('.expand').removeClass('expand');
$(this).toggleClass('expand');
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
.expand {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
I am using nav-pills as a collection of toggles for a tagging system. It is an unordered list with list elements. The list items are setup like this with Jade and NodeJS:
.row
.tagnav.col-xs-12
ul.ptag.nav.nav-pills
each tc in tagColours
li(onClick="selectTag('"+tc.tag+"', '"+tc.colour+"')").active #{tc.tag}
The row is aligned in the centre of the screen with:
.tagnav {
display: flex;
justify-content: center;
flex-direction: row;
}
like so:
As I make the window more narrow the nav-pills start to fold (which is good) but the layout is not pleasant. This is what they look like when I make the window smaller:
I would like them to line up nicely in centred rows. Like this (photoshopped):
I am using Jade for my HTML so I can get the tags dynamically from an array on the server so for the jsfiddle I've just put the tags in statically. They seem to behave the same. JSFiddle
Thanks.
Adding this makes it better:
.ptag.nav-pills > li.active {
color: white;
background-color: black;
border-radius: 15px;
padding: 5px 10px 5px 10px;
margin: 5px;
}
.nav-pills>li {
display: inline-block;
}
.nav-pills {
text-align: center;
}
Fiddle: https://jsfiddle.net/bnn9f3a3/
If you want to maintain the flex style..
(see fiddle below for a more readable comments explanation)
.tagnav {
display: flex;
}
.ptag {
display: flex;
flex-wrap: wrap;
flex: 1;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
margin: 5px;
padding: 5px 10px;
text-align: center;
font-variant: small-caps;
font-weight: bold;
font-size: 18px;
color: white;
background-color: black;
border-radius: 15px;
cursor: pointer;
}
.ptag.nav-pills > li.inactive {
color: #909090;
}
<div class="container">
<br>
<div class="row">
<div class="tagnav col-xs-12">
<ul class="ptag nav nav-pills">
<li class="active">tech</li>
<li class="active">art</li>
<li class="active">electronics</li>
<li class="active">dsp</li>
<li class="active">c++</li>
<li class="active">openframeworks</li>
<li class="active">processing</li>
<li class="active">graphics</li>
<li class="active">java</li>
<li class="active">unity3d</li>
<li class="active">c#</li>
</ul>
</div>
</div>
</div>
fiddle
based on your html structure
https://jsfiddle.net/Hastig/x3mu0k1d/
original, for others
https://jsfiddle.net/Hastig/h8w58rzd/