CSS yordamida menyu animatsiyasini yaratamiz
Maqola o‘zimga o‘xshagan boshlang‘ich verstalshik va web-dasturchilarga qandaydir foyda beradi, degan umidda yozdim.
Ko‘pchilik animatsiyalar odatda jQuery orqali qilinadi. Lekin buning bitta yomon tomoni bor: agar javascript ishlamaydigan qilingan bo‘lsa yoki umuman javascriptni qo‘llamaydigan brauzer bo‘lsa, web-sahifangizning bor go‘zalligi havoga uchadi. Demak, imkoni boricha animatsiyalarni CSS’da qilgan ma’qul.
Ushbu maqolada menyu jadvalidagi pastga tushadigan animatsiyani qanday qilib tuzish haqida o‘rtoqlashaman.
'navigation' dividagi barcha tartiblanmagan list bizga 1, 2 va 3-darajali menyularni yaratish uchun kerak.
head tegi ichiga style ochamiz va asosiy CSS-kodlarni kiritib chiqamiz:
}
DOCTYPE html degan joyidan keyin quyidagilarni qo‘shib qo‘ying:
Va CSS'ga buniyam qo‘shing:
tayyor sahifa kodini olib sinab ko‘rishingiz ham mumkin.
Hozircha shu!
Ko‘pchilik animatsiyalar odatda jQuery orqali qilinadi. Lekin buning bitta yomon tomoni bor: agar javascript ishlamaydigan qilingan bo‘lsa yoki umuman javascriptni qo‘llamaydigan brauzer bo‘lsa, web-sahifangizning bor go‘zalligi havoga uchadi. Demak, imkoni boricha animatsiyalarni CSS’da qilgan ma’qul.
Ushbu maqolada menyu jadvalidagi pastga tushadigan animatsiyani qanday qilib tuzish haqida o‘rtoqlashaman.
I qadam
Ishni HTML-sahifadan boshlasak:<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Horizontal sliding menu</title>
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li><a href="#">Main - 1</a>
<ul>
<li><a href="#">Level 2 - 1</a></li>
<li><a href="#">Level 2 - 2</a></li>
<li><a href="#">Level 2 - 3</a></li>
<li><a href="#">Level 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 2</a>
<ul>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 1</a>
</li>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 2</a></li>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 3</a></li>
<li><a href="#">Level 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 3</a></li>
<li><a href="#">Main - 4</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="item">
</div>
</div>
</body>
</html>'navigation' dividagi barcha tartiblanmagan list bizga 1, 2 va 3-darajali menyularni yaratish uchun kerak.
head tegi ichiga style ochamiz va asosiy CSS-kodlarni kiritib chiqamiz:
<style>
.header{
width: 600px;
height:50px;
border:1px dotted grey;
}
.content{
position:relative;
width: 600px;
height:500px;
color:white;
background-color: #e6056f;
overflow:hidden;
}
.item{
position:absolute;
top:50px;
left:20px;
width: 600px;
height:400px;
background-color: grey;
}
</style>II qadam
Menyuni gorizontal qilib taxlash uchunfloat: left;.navigation {
width:600px;
}
.navigation ul{
/* positioning */
position:relative;
z-index:1000;
/* remove the dots next to list items: */
list-style:none;
/* get rid of any default or inherited margins and padding: */
margin:0;
padding:0;
/* styling: */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 15px;
}
/* we're using the direct descendant selectors > to ONLY affect the main menu items */
.navigation > ul > li {
/* positioning */
position: relative;
float: left;
/* styling: */
margin-right: 10px;
}
.navigation > ul > li > a {
/* positioning */
display:block;
/* styling: */
background-color: #2c2c2c; /* grey */
padding:8px 14px;
text-decoration:none;
color:#aaaaaa;
}
.navigation > ul > li > a:hover{
/* styling: */
background-color:#666666; /* grey */
color:#eeeeee; /* light grey */}
III qadam
pastga tushadigan menyuni yaratish. Quyida 2 va 3-darajali menyular uchun bir xil effekt qo‘llanilgan. Siz xohlagan tarzda o‘zgartirib olishingiz mumkin:.navigation ul ul{
background-color:rgba(255, 255, 255, 0); /* remove. this is for illustration purposes only */
width:340px; /* you need a width to accommodate tertiary menus */
position:absolute;
z-index:1;
height: 0;
overflow: hidden;
}
/* don't display tertiary box yet */
.navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
height:0;
}
/* tertiary drop-down box */
.navigation ul ul ul{
left:170px;
width:170px;
}
.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
.navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
height:220px; /* need a height to accommodate any tertiary menus */
}
/* drop-down item style
/* if you want different styling for tertiary menus, just copy the 4 rules below and insertadditional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
.navigation ul ul li{
background-color:#eaeaea; /* grey */
width:170px;
}
.navigation ul ul li:hover {
background-color:#999; /* grey */
}
.navigation ul ul li a {
display:block;
text-decoration:none;
margin:0 12px;
padding:5px 0;
color:#4c4c4c; /* grey */
}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {
color:#ffffff; /* white */
}IV qadam
menyu qatoridagi har bir elementni bir-biridan nuqta-nuqtali chiziq bilan ajratib chiqamiz, oxirgi elementdan keyin nuqtali chiziq chizmasligi uchun last-child selektoridan foydalansak bo‘ladi-yu, lekin biz IE brauzerlarida ham ishlashini xohlaymiz, shuning uchun '+' orqali ajratib olamiz:.navigation ul ul ul li a{
border:0 !important;
}
.navigation ul ul ul li + li a{
border-top:1px dotted #999 !important;
}
.navigation ul ul li + li a{
border-top:1px dotted #999;
}
.navigation ul ul li:hover + li a{
border-top:1px solid #eaeaea;
}
.navigation ul ul ul li:hover + li a{
border: 0 !important;
}
.navigation ul ul ul li:hover + li{
border-top:1px solid #999 !important;
}V qadam
Ana endi CSS3 imkoniyatlaridan foydalanib, animatsion effekt beramiz:.navigation ul ul{
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.navigation ul ul li{
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}VI qadam
Oxirgi qadam sizga IE brauzerining avvalgi versiyalari uchun ishlashini xohlaganlar uchun.DOCTYPE html degan joyidan keyin quyidagilarni qo‘shib qo‘ying:
<html class="ie6" lang="en">
<html class="ie7" lang="en">
<html class="ie8" lang="en">Va CSS'ga buniyam qo‘shing:
/* unfortunate ie7 gap fix */
.ie7 .navigation ul ul li{
margin-bottom:-3px;
}tayyor sahifa kodini olib sinab ko‘rishingiz ham mumkin.
Hozircha shu!
3 комментария