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;
}

Бооолды

Скриптті мына жерден қарай аласыз