revision:
Codes:
<div class="custom-select-wrapper">
<div class="custom-select">
<div class="custom-select__trigger"><span>Tesla</span>
<div class="arrow"></div>
</div>
<div class="custom-options">
<span class="custom-option selected" data-value="tesla">Tesla</span>
<span class="custom-option" data-value="volvo">Volvo</span>
<span class="custom-option" data-value="mercedes">Mercedes</span>
</div>
</div>
</div>
<style>
.custom-select-wrapper {position: relative; user-select: none; width: 100%; margin: 0vw auto;}
.custom-select {position: relative; display: flex; flex-direction: column; border-width:
0 0.2vw 0 0.2vw; border-style: solid; border-color: darkblue;}
.custom-select__trigger {position: relative; display: flex; align-items: center; justify-content:
space-between; padding: 0 1vw; font-size: 1.5vw; font-weight: 300;
color: #3b3b3b; height: 3vw; line-height: 3vw; background: deepskyblue; cursor: pointer;
border-width: 0.2vw 0 0.2vw 0; border-style: solid; border-color: #394a6d;}
.custom-options {position: absolute; display: block; top: 100%; left: 0; right: 0; border:
0.2vw solid #394a6d; border-top: 0; background: #fff; transition: all 0.5s; opacity: 0;
visibility: hidden; pointer-events: none; z-index: 2;}
.custom-select.open .custom-options {opacity: 1; visibility: visible; pointer-events: all;}
.custom-option {position: relative; display: block; padding: 0 1vw 0 1vw; font-size: 1.5vw;
font-weight: 300; color: #3b3b3b; line-height: 3vw; cursor: pointer; transition: all 0.5s;}
.custom-option:hover {cursor: pointer; background-color: #b2b2b2;}
.custom-option.selected {color: #ffffff; background-color: green; }
.arrow {position: relative; height: 1vw; width: 1.5vw;}
.arrow::before, .arrow::after {content: ""; position: absolute; bottom: 0px; width: 0.15vw;
height: 100%; transition: all 0.5s;}
.arrow::before {left: -.3vw; transform: rotate(45deg);background-color: #394a6d;}
.arrow::after {left: 0.3vw; transform: rotate(-45deg); background-color: #394a6d;}
.open .arrow::before {left: -.3vw;transform: rotate(-45deg);}
.open .arrow::after {left: 0.3vw; transform: rotate(45deg);}
</style>
<script>
document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
})
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent
= this.textContent;
}
})
}
window.addEventListener('click', function(e) {
const select = document.querySelector('.custom-select')
if (!select.contains(e.target)) {
select.classList.remove('open');
}
});
</script>
Codes:
<div class="container">
<div class="lines-container">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="menu">
<li><a href="#" class="outer">About</a></li>
<li><a href="#" class="outer blog">Blog</a>
<ul class="blog-child">
<li><a href="#" class="inner">Tech</a></li>
<li><a href="#" class="inner">Travels</a></li>
<li><a href="#" class="inner">Gaming</a></li>
</ul>
</li>
<li><a href="#" class="outer contact">Contacts</a>
<ul class="contact-child">
<li><a href="#" class="inner">Email</a></li>
<li><a href="#" class="inner">Social Media</a></li>
<li><a href="#" class="inner">Address</a></li>
</ul>
</li>
<li><a href="#" class="outer">CV</a></li>
</ul>
<div class="pointer"></div>
</div>
<style>
.container{width:50vw; height: auto; margin: 0 auto;}
.lines-container{width: 6vw;margin-left: auto; cursor: pointer; border: 0.2vw solid
darkblue; border-radius: 0.1vw;}
.lines-container:hover{background-color: brown; border: 0.2vw solid lightgreen;}
.line{height: 0.3vw; margin: 0.4vw; border-radius: 5vw; background-color: orange;
margin-right: auto; transition: width 0.5s ease-out;}
.line-1{width: 5vw;}
.line-2{width: 4vw;}
.line-3{width: 3vw;}
.lines-container:hover .line-1{width: 3vw; background-color: red;}
.lines-container:hover .line-2{width: 4vw; background-color: red;}
.lines-container:hover .line-3{width: 5vw; background-color: red;}
.menu{list-style-type: none; border-bottom: 0.2vw solid #826e53; max-height: 0;
overflow: hidden; transition: max-height 0.5s linear; position: relative;}
.pointer{width: 0; border-width: 1vw; border-style: solid; border-color: white
black black black ; margin-left: 50%; transform: translateX(-50%); cursor:
pointer;}
.pointer:hover{border-color: red green green green;}
.pointer-up{ border-color: blue cyan cyan cyan;transform: translateY(-1vw);}
.pointer-up:hover{border-color: brown brown red brown;}
.blog-child, .contact-child{max-height: 0vw; overflow: hidden; transition: all 0.5s
linear;}
a.outer{ display: block; color: black; text-decoration: none; margin-top: 0.2vw;
background-color: darkgrey; padding: 1vw; transition: all 0.5s linear;}
a.inner{text-decoration: none; color: darkblue; display: block; padding: 0.5vw 3vw;
border: 0.2vw solid #171618; background-color:deepskyblue; opacity: 0.8;
transition: all 0.5s linear;}
a.inner:hover{border: 0.1vw solid green; opacity: 1; }
.blog, .contact{position: relative; cursor: inherit; pointer-events: none;}
.blog::after, .contact::after{ content: "+"; cursor: pointer; pointer-events: all;
width: 2vw; height: 2vw; color: black;background-color: white;
border-radius: 50%; display: inline-flex; justify-content: center; align-items: center;
position: absolute; right: 5%; box-shadow: 0.1vw .3vw .1vw .1vw #171618 ;
transition: background-color 0.5s linear;}
.blog:hover::after, .contact:hover::after{background-color: palevioletred;}
.btn-anime::after{right: 4.8%; bottom: 20%; box-shadow: 0px 0px 0px 0px #171618 ;}
.content::after{content: "\2212"; }
</style>
<script>
let cont = document.querySelector(".lines-container");
let menu = document.querySelector(".menu");
let pointer = document.querySelector(".pointer");
let blog = document.querySelector(".blog");
let contact = document.querySelector(".contact");
let blogChild = document.querySelector(".blog-child");
let contactChild = document.querySelector(".contact-child");
cont.addEventListener("click", () => {
blog.classList.remove("content");
contact.classList.remove("content");
if(menu.style.maxHeight){
menu.style.maxHeight = null;
blogChild.style.maxHeight = null;
contactChild.style.maxHeight = null;
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.remove("pointer-up");
pointer.style.display = "block";
}, 500);
}else{
menu.style.maxHeight = menu.scrollHeight + "px";
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.toggle("pointer-up");
pointer.style.display = "block";
}, 500);
}
})
pointer.addEventListener("click", () => {
blog.classList.remove("content");
contact.classList.remove("content");
if(menu.style.maxHeight){
menu.style.maxHeight = null;
blogChild.style.maxHeight = null;
contactChild.style.maxHeight = null;
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.remove("pointer-up");
pointer.style.display = "block";
}, 500);
}else{
menu.style.maxHeight = menu.scrollHeight + "px";
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.toggle("pointer-up");
pointer.style.display = "block";
}, 500);
}
})
blog.addEventListener("click", () => {
if(blogChild.style.maxHeight){
blogChild.style.maxHeight = null;
blog.classList.add("btn-anime");
blog.classList.remove("content");
setTimeout(() => {
blog.classList.remove("btn-anime");
}, 100);
}else{
blogChild.style.maxHeight = blogChild.scrollHeight + "px";
menu.style.maxHeight = menu.scrollHeight + blogChild.scrollHeight + "px";
blog.classList.add("btn-anime");
blog.classList.add("content");
setTimeout(() => {
blog.classList.remove("btn-anime");
}, 100);
}
})
contact.addEventListener("click", () => {
if(contactChild.style.maxHeight){
contactChild.style.maxHeight = null;
contact.classList.add("btn-anime");
contact.classList.remove("content");
setTimeout(() => {
contact.classList.remove("btn-anime");
}, 100);
}else{
contactChild.style.maxHeight = contactChild.scrollHeight + "px";
menu.style.maxHeight = menu.scrollHeight + contactChild.scrollHeight + "px";
contact.classList.add("btn-anime");
contact.classList.add("content");
setTimeout(() => {
contact.classList.remove("btn-anime");
}, 100);
}
})
</script>
Codes:
<form>
<div class="multipleSelection">
<div class="selectBox" onclick="showCheckboxes()">
<select><option>Select options</option></select>
<div class="overSelect"></div>
</div>
<div id="checkBoxes">
<label for="first"><input type="checkbox" id="first"/>checkBox1</label>
<label for="second"><input type="checkbox" id="second"/>checkBox2</label>
<label for="third"><input type="checkbox" id="third" />checkBox3</label>
<label for="fourth"><input type="checkbox" id="fourth"/>checkBox4</label>
</div>
</div>
</form>
<style>
.multipleSelection {margin-left:5vw; width: 30vw; background-color: deepskyblue;}
.selectBox {position: relative;}
.selectBox select {width: 100%; font-weight: bold;}
.overSelect {position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
#checkBoxes {display: none; border: 0.2vw #8DF5E4 solid; }
#checkBoxes label {display: block; }
#checkBoxes label:hover {background-color: #4F615E;}
</style>
<script>
var show = true;
function showCheckboxes() {
var checkboxes = document.getElementById("checkBoxes");
if (show) {checkboxes.style.display = "block"; show = false;
} else { checkboxes.style.display = "none"; show = true;
}
}
</script>
Codes:
<select id="id_of_select" style="margin-left:5vw;">
<option></option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
</select>
<button id="btn">Show selected</button>
<div style="margin-left:5vw;" id="display"></div>
<script>
"use strict";
function show_selected() {
var selector = document.getElementById('id_of_select');
var value = selector[selector.selectedIndex].value;
document.getElementById('display').innerHTML = value;
}
document.getElementById('btn').addEventListener('click', show_selected);
</script>
Codes:
<div>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</div>
<style>
#mySearch {margin-left: 5vw; width: 50%; font-size: 1.5vw; padding: 1vw; border:
1px solid #ddd;}
#myMenu {list-style-type: none; padding: 0; margin: 0; width:60%;}
#myMenu li a {margin-left: 5vw; padding: 1vw; text-decoration: none; color: black;
display: block}
#myMenu li a:hover {background-color: skyblue;}
</style>
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>