• Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
IT-Blog.am
Տեղեկատվական տեխնոլոգիաների պորտալ
  • Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
Գլխավոր  /  CSS • HTML • Web  /  Հորիզոնական ընտրացանկի (drop down menu) կառուցում
13 Փետրվարի 2016

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

Հեղինակ Տարոն
CSS, HTML, Web

Ողջույն հարգելի ընթերցողներ։ Այսօր ես ուզում եմ Ձեզ ծանոթացնել այսպես կոչված հորիզոնական ընտրացանկերի հետ (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-ը ցույց է տալիս, որ մկնիկի ցուցիչը տեղափոխվել է նշված օբյեկտի վրա։

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

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

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

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

  • mysql transaction

    MySQL գործարքի(transaction) կառավարման օպերատորներ

    11/19/2016
  • Class

    Կլասների (classes) գրելաձևը (syntax)

    10/20/2016
  • MySQL Trigger

    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events)

    10/04/2016
Facebook
  • Շատ Դիտված Գրառումներ
  • Նոր գրառումներ
  • Calculator
    Հաշվիչի (calculator) պատրաստում 04/18/2016
  • Recursion
    Ռեկուրսիա (recursion) հասկացությունը 06/02/2016
  • Icon տառատեսակներ 02/21/2016
  • MySQL joins
    MySQL JOINS (MySQL միացումներ) 06/13/2016
  • Սուպերգլոբալ փոփոխականներ (superglobals) 03/24/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • Հետազոտողներն օգտագործում են էլեկտրական հոսանքներ`մարդու հյուսվածքներում քաղցկեղի հայտնաբերման համար 12/18/2017
  • Nvidia ընկերությունը ներկայացրել է երբևէ ստեղծված ամենահզոր գրաֆիկական պրոցեսորը 12/16/2017
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • Class
    Կլասների (classes) գրելաձևը (syntax) 10/20/2016
  • encapsulation
    Ինկապսուլացիա (Encapsulation) 08/17/2016
  • object oriented programming
    Օբյեկտ կողմնորոշված ծրագրավորում (OOP) 07/04/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • mysql transaction
    MySQL գործարքի(transaction) կառավարման օպերատորներ 11/19/2016
  • MySQL Trigger
    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events) 10/04/2016
  • Procedures and Functions
    MySQL ընթացակարգեր (procedures) և ֆունկցիաներ (functions) 08/31/2016
  • MYSQL View
    MySQL ներկայացումներ (VIEWS) 07/16/2016
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • SEO խրվակներ WordPress-ի համար 04/25/2016
  • Ծանոթացում WordPress-ի կառավարակետի հետ (մաս 2) 02/24/2016
  • Ի՞նչ է CMS-ը 02/17/2016
© 2020 թ.  IT-Blog.am Բոլոր հեղինակային իրավունքները պաշտպանված են:

Սույն կայքում տեղադրված նյութերի հեղինակային իրավունքը պատկանում է բացառապես IT-Blog.am կայքի հեղինակներին և կայքում բոլոր հրապարակված նյութերն անհատական օգտագործման համար են։ Այս կայքում  հրապարակված նյութերի (մասնակի կամ ամբողջական) վերահրապարկումը տեղեկատվություն տարածող այլ միջոցներում (բացառությամբ սոցկայքերի) արգելված է։ Խախտում թույլ տված անձինք կենթարկվեն պատասխանատվության` օրենքով սահմանված կարգով։