kereknews.kz сайтындағыдай меню жасаймыз CSS3
Осы CSS3-те анда санда жазып тұратын велосипедттерімді жазбағалы көп болып еді, бүгін шо то CSS3 тақырыбында жазбалары жазыла бастағасын қайта шабыттана бастадым.
Ощм бұл жазбада www.kereknews.kz/ сайтындағыдай менюді жасайтын боламыз.
Кодттары өте қарапайым, қисық деп теппессіңдер, осыны өзім жасып көрсем қалай жазар едім деп жазғандағы түрім осы.
HTML:
html-да осы код жарайды енді CSS-те былай жазамыз.
body-ға стандартты стильдер:
.menu class-ына
li тегіне
сілтеме тегіне
div тегіне стильдер (бұл див нәғып тұр дерсіңдер, бірақ ховер болған кезде осы див анимация жасайды)
енді ховерлер, бар болғаны екі ховер, бооолды
егер li тегіне тінтуірді апарсаң, онда сілтеменің түсін #6AB3B2-ға өзгерт дегенді білдіреді
егер li тегіне тінтуірлі апарсаң, онда ішіндегі div тегінің ұзындығын 100%-ға, фон түсін ақ түске, және сол жаққа тақап өзгерт дейміз
.menu li:hover div {
width: 100%;
left: 0%;
background-color: #FFF;
}
Бооолды
Ощм бұл жазбада www.kereknews.kz/ сайтындағыдай менюді жасайтын боламыз.
Кодттары өте қарапайым, қисық деп теппессіңдер, осыны өзім жасып көрсем қалай жазар едім деп жазғандағы түрім осы.
HTML:
<ul class="menu">
<li>
<div></div>
<a href="#">Біреу</a>
</li>
<li>
<div></div>
<a href="#">Екеу</a>
</li>
<li>
<div></div>
<a href="#">Үшеу</a>
</li>
<li>
<div></div>
<a href="#">Төртеу</a>
</li>
<li>
<div></div>
<a href="#">Бесеу</a>
</li>
<li>
<div></div>
<a href="#">Алтау</a>
</li>
</ul>
html-да осы код жарайды енді CSS-те былай жазамыз.
body-ға стандартты стильдер:
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.menu class-ына
.menu {
background-color: #5EA5A4; //менюдің түсі
margin: 0px;
padding: 0px;
width: 250px; //меню ені
}
li тегіне
.menu li {
height: 37px; //биіктігі
margin: 0px;
padding: 0px;
position: relative;
border-bottom: 1px solid #499796;
}
сілтеме тегіне
.menu a {
position: absolute; //ия ия білем мынау біртүрлі көрінеді
top: 0px; //ну енд қайтем үстіне тақалмағасын осылай етжвердім
color: #FFF; //сілтеме түсі
width: 100%; //енді блок absolute болғасын ұзындығын осылай деп жазу керек
text-decoration: none; //сілтеменің астын сызба
text-align: center; //блоктың ішіндегі мәтіндер ортасына туралансын
line-height: 37px; //бір қатар (строка) биіктігі (li биіктігімен тек болуы керек)
}
div тегіне стильдер (бұл див нәғып тұр дерсіңдер, бірақ ховер болған кезде осы див анимация жасайды)
.menu li div {
position: absolute; //ия ияяяя дұрыс емес
left: 48%; //білееееем
top: 0px;//жоғарыға жабыстырып тастайды
background-color: transparent;//түсі түссіз
height: 37px;//ия мұнда тағы жаздым биіктігін (li биіктігімен тек болуы керек)
width: 4%; //ұзындығы
margin: 0px auto;
transition: all 0.15s ease-in-out 0ms; // анимация жасайтын осы транзишіндер, барлық тег өзгеріске ұшыраса 0.15 секунд ішінде ease-in-out әдісімен өзгерсін дегенді білдіреді.
-webkit-transition: all 0.15s ease-in-out 0ms; //мынау дәл сол, хром, сафари үшін
-moz-transition: all 0.15s ease-in-out 0ms;//мынау да, мозилла үшін
-o-transition: all 0.15s ease-in-out 0ms;//мынау опера үшін
}
енді ховерлер, бар болғаны екі ховер, бооолды
егер li тегіне тінтуірді апарсаң, онда сілтеменің түсін #6AB3B2-ға өзгерт дегенді білдіреді
.menu li:hover a {
color: #6AB3B2;
}
егер li тегіне тінтуірлі апарсаң, онда ішіндегі div тегінің ұзындығын 100%-ға, фон түсін ақ түске, және сол жаққа тақап өзгерт дейміз
.menu li:hover div {
width: 100%;
left: 0%;
background-color: #FFF;
}
Бооолды
8 пікір
Мындағы CSS3«тің тамаша мүмкіндіктерін IE дұрыс қабылдамайды екен(((
Сайтқа скрипт жазудан басқа амал жоқ. IE'мен ашқан жағдайда, бірден қате шығарып, «Браузеріңіз нашар!» деген мағынада, кейін Google Chrome жүктейтін параққа редирект жасайтын етіп.
CSS3 мүмкіндіктері ИЕ тоғызыншы нұсқасынан бастап енгізіле бастады. Сондықтан CSS3 анимацияны бір екі жылдықтан толық қолдана қоймаспыз.