13 Փետրվարի 2016

Հորիզոնական ընտրացանկի (drop down menu) կառուցում

Հեղինակ Տարոն

Ողջույն հարգելի ընթերցողներ։ Այսօր ես ուզում եմ Ձեզ ծանոթացնել այսպես կոչված հորիզոնական ընտրացանկերի հետ (drop down menu)։

Նախ մի քանի խոսքով ներկայացնեմ, թե ինչ է իրենից ներկայացնում հորիզոնական ընտրացանկը։ Այն իրենից ներկայացնում է պատուհան, որի մեջ գրված են ընտրացանկի անդամները։ Այդ պատուհանը չի երևում և դառնում է տեսանելի միայն այն ժամանակ, երբ մկնիկի ցուցիչը տեղափոխում ենք ընտրացանկի գլխագրի վրա։
Սկսենք ընտրացանկի կառուցմունը։ Դրա համար մեզ անհրաժեշտ են 2 ֆայլեր՝ index.html և style.css:

Առաջինի ֆայլի մեջ կառուցում ենք ընտրացանկի մարմինը։

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link href="./style.css" type="text/css" rel="stylesheet" />
		<title>Dropdown Menu</title>
	</head>
	<body>
		<ul class="list">
			<li><a href="#">HOME</a></li>
			<li>
				<a href="#">PRODUCTS&nbsp;&nbsp;+</a>
				<ul class="dropdown">
					<li>
						<a href="#">Product 1&nbsp;&nbsp;+</a>
						<ul class="second-dropdown">
							<li><a href="#">Sub Item</a></li>
							<li><a href="#">Sub Item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Product 2&nbsp;&nbsp;+</a>
						<ul class="second-dropdown">
							<li><a href="#">Sub Item</a></li>
							<li><a href="#">Sub Item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</body>
</html>

Առաջին ֆայլում մենք այլևս փոփոխություններ չունենք կատարելու։ Մեր հետագա աշխատանքը կատարելու ենք երկրորդ ֆայլում։ Երկրորդ ֆայլով ապահովելու ենք ընտրացանկի արտաքին տեսքը և աշխատանքը։

Ընտրացանկի անդամների թաքցնելը կկատարենք վերջում, որպեսզի արտաքին տեսքի կարգավորումը ավելի հեշտ լինի։

Մի փոքր ձևափոխենք արտաքին տեսքը։ Ստորև ներկայացված է CSS կոդ, որի միջոցով կկարգավորենք մեր ընտրացանկի տեսքը։

.list {
	background-color: #222222;
    height: 40px;
    line-height: 2.5;
    white-space: nowrap;
    border-bottom: 5px solid #1B9BFF;
}

.list, .list > li {
	display: inline-block;
}

li {
	list-style: none;
}

li a {
	text-decoration: none;
	color: #ffffff;
}

.list > li > a {
	padding: 5px 20px;
}

.dropdown a {
	padding: 10px 31px;
	background-color: #1B9BFF; 
	border-bottom: 1px solid #1B9BFF;
}

.dropdown  li:last-child > a{
	border-radius: 0 0 0 3px;
}

.second-dropdown > li:last-child  a{
	border-radius: 0 0 3px 0;
}

.list > li {
	position: relative;
}

.dropdown li {
	position: relative;
}

.dropdown {
	position: absolute;
	top: 40px;
	left: -40px;	
}

.second-dropdown {
	left: 99px;
	position: absolute;
	top: 0;
}

.list li:hover {
	background-color: #1B9BFF;
}

Արտաքին տեսքը կարգավորելուց հետո ժամանակն է թաքցնել պատուհանը։ Դրա համար գրում ենք հետևյալ կոդը․

.dropdown {
	display: none;
}

.second-dropdown {
	display: none;
}

Այժմ գրենք կոդի այն մասը, որը պատասխանատու է պատուհանի բացվելու և փակվելու համար․

.list > li:hover .dropdown {
	display: block;	
}

.dropdown li:hover .second-dropdown {
	display: block;
}

Այստեղ ։hover-ը ցույց է տալիս, որ մկնիկի ցուցիչը տեղափոխվել է նշված օբյեկտի վրա։

Կոդերը և աշխատանքը կարող եք տեսնել այստեղ, ինչպես նաև ձևափոխել կոդերը։

Որևէ հարց ունենալու դեպքում կարող եք գրել մեկնաբանություններում։

Շնորհակալություն մեր բլոգից օգտվելու համար։

Կապված գրառումներ