kereknews.kz сайтындағыдай меню жасаймыз CSS3

Осы CSS3-те анда санда жазып тұратын велосипедттерімді жазбағалы көп болып еді, бүгін шо то CSS3 тақырыбында жазбалары жазыла бастағасын қайта шабыттана бастадым.

Ощм бұл жазбада 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 пікір

qyrmyzy
керекинфонікіне қарағанда әдемі шығыпты.
qyrmyzy
кешірім сұраймын, шатастырып алдым
AL-ASTER
Тамаша, Әбеке! Рахмет!

Мындағы CSS3«тің тамаша мүмкіндіктерін IE дұрыс қабылдамайды екен(((
AL-ASTER
Осы парақ та, кешегі Жәнібектің CSS анимациясы да анимацияны дұрыс көрсетпеді IE.

Сайтқа скрипт жазудан басқа амал жоқ. IE'мен ашқан жағдайда, бірден қате шығарып, «Браузеріңіз нашар!» деген мағынада, кейін Google Chrome жүктейтін параққа редирект жасайтын етіп.

Abylai
мына бағдарлама саған көмек болар ау осы, бұрындары 5.5 нұсқасынан бастап тексеретін едім кодттарымды, қазір қайдааа, жетіден бастап қарай салам.
CSS3 мүмкіндіктері ИЕ тоғызыншы нұсқасынан бастап енгізіле бастады. Сондықтан CSS3 анимацияны бір екі жылдықтан толық қолдана қоймаспыз.
Abylai
Осындайда ereke_enu -ды тәпішкімен салып қалғың келеді ә? :))
serjan
Осы кодтардың ішіне қашан кіріп кетіп жүзіп жүрер екенбіз.
STR
молодцы! өздерің жаздыңдар ма мына сайтты? аты да, өзі де күшті екен
Тек тіркелген қолданушылар ғана пікір қалдыра алады.