În acest tutorial veți învăța cum să creați un meniu drop-down simplu cu Javascript vanilat, HTML și CSS. Vom parcurge codul HTML, CSS și Javascript, dar acordând mai multă atenție programării, deoarece acesta este un tutorial JS. Vom folosi doar JS și CSS simple, fără cadre sau preprocesoare. Singura excepție (de tip) va fi importarea fișierului Font Awesome Fișier CSS deoarece vom folosi una dintre pictogramele sale.

Aceasta se adresează dezvoltatorilor care înțeleg în medie HTML, CSS și JS. Am încercat să-l fac cât mai curat posibil, dar nu mă voi concentra prea mult pe detalii aici. Sper să vă bucurați cu toții.

Capturi de ecran

Așa arată rezultatul codului:

Ecran inițial:

Cum se creeaza un meniu drop down cu CSS si JavaScript

Meniu derulant deschis:

1611892504 646 Cum se creeaza un meniu drop down cu CSS si JavaScript

Meniul derulant cu opțiunea selectată:

ad-banner
1611892504 74 Cum se creeaza un meniu drop down cu CSS si JavaScript

HTML:

În această secțiune, vom discuta despre implementarea codului HTML pentru pagina demonstrativă. Pentru a începe, să vedem <head> cod

<!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>Dropdown Example</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="styles.css">
</head>

Acesta este în esență capul HTML, cu excepția link etichete care încarcă cele două foi de stil CSS pe care le vom folosi în acest tutorial: stilurile Font Awesome și styles.css , unde vom defini stilurile acestei pagini.

Apoi, există restul fișierului HTML, corpul:

<body>
	<div class="dropdown">
		<div class="title pointerCursor">Select an option <i class="fa fa-angle-right"></i></div>
		
		<div class="menu pointerCursor hide">
			<div class="option" id='option1'>Option 1</div>
			<div class="option" id='option2'>Option 2</div>
			<div class="option" id='option3'>Option 3</div>
			<div class="option" id='option4'>Option 4</div>
		</div>

	</div>
	<span id='result'>The result is: </span>
	<script>
	  ...
	</script>
</body>
</html>

Această secțiune poate fi împărțită în 3 părți principale:

  • .dropdown div, unde va fi definită structura elementului derulant.
  • #result element, care va conține opțiunea selectată de utilizator, din elementul derulant.
  • Scriptul scris în <script> etichetă. Implementarea sa este ascunsă aici, deoarece detaliile sale vor fi explicate în ultima secțiune a acestui tutorial.

Elementul derulant este un div care conține o title și menu elemente. Primul definește doar ce text va fi prezentat pe element înainte ca orice opțiune să fie selectată, iar cel din urmă va defini opțiunile care vor fi selectabile de către element.

result elementul este acolo doar pentru a vă arăta ce opțiune este selectată în prezent.

Stiluri:

Mai jos puteți verifica codul CSS complet. După cum puteți vedea, folosește CSS3 transition și transform construcții.

Vă rugăm să fiți atenți la .dropdown definiții de clase. Acestea sunt utilizate pentru a defini aspectul pentru componenta drop-down container, precum și elementele sale interioare, cum ar fi .title si este .option‘s.

body{
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.hide {
    max-height: 0 !important;
}

.dropdown{
	border: 0.1em solid black;
	width: 10em;
	margin-bottom: 1em;
}

.dropdown .title{
	margin: .3em .3em .3em .3em;	
	width: 100%;
}

.dropdown .title .fa-angle-right{
	float: right;
	margin-right: .7em;
	transition: transform .3s;
}

.dropdown .menu{
	transition: max-height .5s ease-out;
	max-height: 20em;
	overflow: hidden;
}

.dropdown .menu .option{
	margin: .3em .3em .3em .3em;
	margin-top: 0.3em;
}

.dropdown .menu .option:hover{
	background: rgba(0,0,0,0.2);
}

.pointerCursor:hover{
	cursor: pointer;
}

.rotate-90{
	transform: rotate(90deg);
}

JavaScript:

Acum vom vedea cum este implementată partea Javascript. Mai întâi vom parcurge definițiile funcției și apoi codul care apelează aceste funcții pentru a face ca acțiunile derulante să se întâmple.

Practic, există 3 acțiuni care au loc în funcție de interacțiunea cu utilizatorul, deoarece ascultătorii lor sunt adăugați la elementele DOM:

  1. Dând clic pe elementul drop-down
  2. Selectarea uneia dintre opțiunile drop-down
  3. Schimbarea opțiunii selectate în prezent

Aș dori să clarific că folosim funcții săgeată ( () => {} ) si const cuvânt cheie, care sunt caracteristici ES6. Probabil că ești bun dacă folosești o versiune recentă a browserului tău, dar ține cont de asta.

1. Faceți clic pe elementul drop-down

function toggleClass(elem,className){
	if (elem.className.indexOf(className) !== -1){
		elem.className = elem.className.replace(className,'');
	}
	else{
		elem.className = elem.className.replace(/s+/g,' ') + 	' ' + className;
	}
	
	return elem;
}

function toggleDisplay(elem){
	const curDisplayStyle = elem.style.display;			
				
	if (curDisplayStyle === 'none' || curDisplayStyle === ''){
		elem.style.display = 'block';
	}
	else{
		elem.style.display = 'none';
	}
}


function toggleMenuDisplay(e){
	const dropdown = e.currentTarget.parentNode;
	const menu = dropdown.querySelector('.menu');
	const icon = dropdown.querySelector('.fa-angle-right');

	toggleClass(menu,'hide');
	toggleClass(icon,'rotate-90');
}

Când se face clic pe elementul drop-down, acesta se deschide (dacă este închis) sau se închide (dacă este deschis). Acest lucru se întâmplă prin legare toggleMenuDisplay la ascultătorul de evenimente clic pe elementul drop-down. Această funcție comută afișarea acestuia menu element prin utilizarea toggleDisplay și toggleClass funcții.

2. Selectarea uneia dintre opțiunile drop-down

function handleOptionSelected(e){
	toggleClass(e.target.parentNode, 'hide');			

	const id = e.target.id;
	const newValue = e.target.textContent + ' ';
	const titleElem = document.querySelector('.dropdown .title');
	const icon = document.querySelector('.dropdown .title .fa');


	titleElem.textContent = newValue;
	titleElem.appendChild(icon);
	
	//trigger custom event
	document.querySelector('.dropdown .title').dispatchEvent(new Event('change'));
	//setTimeout is used so transition is properly shown
	setTimeout(() => toggleClass(icon,'rotate-90',0));
}

3. Schimbarea opțiunii selectate în prezent

function handleTitleChange(e){
	const result = document.getElementById('result');

	result.innerHTML = 'The result is: ' + e.target.textContent;
}

Functia handleTitleChange este legat de obicei change eveniment pe .title element, pentru a schimba #result conținutul elementului ori de câte ori elementul titlu se modifică. Declanșarea acestui eveniment se face în secțiunea anterioară.

Codul principal

//get elements
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option');

//bind listeners to these elements
dropdownTitle.addEventListener('click', toggleMenuDisplay);
dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected));
document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

În secțiunea principală există doar câteva coduri simple pentru a obține titlul drop-down și elemente de opțiuni pentru a le lega de evenimentele discutate în ultima secțiune.

Demo

Codul complet și demo-ul acestei aplicații pot fi găsite aici.

Mai multe informatii