Вертыкальнае меню Ормана Кларка: CSS3 версія

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Далей у PSD серыі Ормана Кларка яго дзіўнае вертыкальнае меню. Мы створым яго з дапамогай CSS3 і jQuery, выкарыстоўваючы мінімальную колькасць малюнкаў.

Адзіныя малюнкі, якія мы будзем выкарыстоўваць гэта абразкі - я ствару спрайт, выкарыстоўваючы новы інструмент SpriteRight, але гэта неабавязкова. Акрамя таго, я буду выкарыстоўваць GradientApp для стварэння градыентаў CSS3, але гэта таксама неабавязкова.

Крок 1. Асноўная HTML-разметка

Пачнем з таго, што створым базавую разметку, пусты дакумент HTML5:

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8">
		
		<title>Vertical Navigation Menu: CSS3 Coded</title>
		
		<link rel="stylesheet" href="css/styles.css">
		
	</head>
<body>

</body>
</html>

А цяпер разметка для нашага меню; неўпарадкаваны спіс у кантэйнеры.

<div id="wrapper">

	<ul class="menu">
		<li class="item1"><a href="#">Friends <span>340</span></a></li>
		<li class="item2"><a href="#">Videos <span>147</span></a></li>
		<li class="item3"><a href="#">Galleries <span>340</span></a></li>
		<li class="item4"><a href="#">Podcasts <span>222</span></a></li>
		<li class="item5"><a href="#">Robots <span>16</span></a></li>
	</ul>

</div>

Нарэшце, мы ствараем падменю, калі размяшчалі неўпарадкаваных спіс, укладзены ў кожны з існуючых элементаў спісу.

<div id="wrapper">

	<ul class="menu">
		<li class="item1"><a href="#">Friends <span>340</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item2"><a href="#">Videos <span>147</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item3"><a href="#">Galleries <span>340</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item4"><a href="#">Podcasts <span>222</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
		<li class="item5"><a href="#">Robots <span>16</span></a>
			<ul>
				<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
				<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
				<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
			</ul>
		</li>
	</ul>

</div>

Такім чынам, гэта можа здацца складаным, але не бянтэжцеся. Спачатку мы стварылі неўпарадкаваны спіс з пяццю элементамі спісу, кожны з якіх змяшчае якар. Затым мы дадалі укладзеныя неўпарадкаваныя спісы, кожны з якіх складаецца з трох розных элемента спісу.

Я таксама дадаў клас да кожнага элементу спісу, так што ён спросціць працэс афармлення. Нарэшце, для лікаў мы стварылі тэг span ўнутры кожнага якара. Калі вы праглядзіце яго ў сваім браўзэры, ён павінен выглядаць так:

Крок 2: Якія плаваюць шрыфты

Спачатку пераканайцеся, што наша меню адлюстроўваецца правільна. Дадайце гэтыя правілы ў файл css/styles.css, яны задаюць знешнія і ўнутраны водступы для ўсіх нашых спісаў і удалят стыль спісу ul па-змаўчанні.

ul,
ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

Перш чым прыступіць да афармлення нашага меню, мы створым кантэйнер з фіксаванай шырынёй і памерам шрыфта 13 пікселяў (выяўленая ў адзінках em). Спачатку, мы дадзим правіла для тэга body, font-size:100%;. Гэта забяспечыць тое, што наш стыль будзе заснаваны на памеры шрыфта браўзэра па змаўчанні (звычайна 16 пікселяў).

Цяпер я растлумачу, як працуе памер шрыфта кантэйнера. Мы павінны выказаць гэта у em; прапарцыйна да памеру яго бацькоўскага шрыфта. Мы імкнемся да памеру 13px, таму пры ўмове, што памер шрыфта бацькоўскага элемента складае 16px, наша выніковая em роўная 13/16 = 0,8125. 13px - 0,8125 * 16 пікселяў.

Выкарыстанне для нашых шрыфтоў (і іншых элементаў) адзінак em зробіць іх плаваюць. Цяпер, калі мы зменім памер шрыфта абгорткі (або наш памер па змаўчанні ў браўзэры), усе меню будзе наладжана адносна гэтага. Хай гэта вас не бянтэжыць, калі вам патрэбна дапамога ў пераўтварэнні шрыфтоў, я прапаную вам наведаць сайт pxtoem.com.

body {
	font-size: 100%;
}
a {
	text-decoration: none;
}
ul, 
ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#wrapper {	
	width: 220px;
	margin: 100px auto;
	font-size: 0.8125em;
}

Мы задалі для кантэйнера фіксаваную шырыню 220px і выраўнялі яе па цэнтры з водступамі зверху, дадаўшы стыль margin:100px auto;.

Крок 3: CSS для галоўнага меню

Далей мы дадамо стыль для меню. Мы зробім шырыню і вышыню меню тэга ul auto, а затым і ў дачыненні цень да ўсяго аб'екту. Усталёўваючы вышыню як аўто, цень будзе настройвацца пры адкрыцці слайдера.

Затым аформім якара; мы дададим шырыню 100%, што азначае, што яны будуць расцягвацца да шырыні кантэйнера памерам 220 пікселяў. Для вышыні мы будзем выкарыстоўваць адзінкі em, так што ўспомніце наш асноўны памер шрыфта 13px. У нашым файле .psd ввысота 36 пікселяў, так што гэта наша мэта. Мы возьмем 36 і падзелім яго на 13, што атрымаецца прыкладна 2.75em (36/13 = 2.76923077). Мы таксама ўсталюем 2.75em для вышыні радка (каб Цэнтраваць ўвесь тэкст па вертыкалі), затым выкарыстоўваецца і ў дачыненні водступ для тэксту, ствараючы прастору для абразкі якую мы дадамо пазней.

Мы дададзим CSS3 градыент для фону, я забег наперад і стварыў яго з дапамогай GradientApp. Затым мы зменім шрыфт, выкарыстоўваецца і ў дачыненні шрыфт Helvetica Neue і белы колер разам з ценем для тэксту. Заўважце, што тут мы не ўсталёўвалі памер шрыфта. Гэта таму, што наш базавы шрыфт складае 13 пікселяў для кантэйнера, які атрымалі ў спадчыну нашы якара, таму няма неабходнасці дадаць яго.

body {
	font-size: 100%;
}
a {
	text-decoration: none;
}
ul, 
ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#wrapper {	
	width: 220px;
	margin: 100px auto;
	font-size: 0.8125em;
}
.menu {
	width: auto;
	height: auto;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
	background-color: #616975;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
	background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
	border-bottom: 1px solid #33373d;
	-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
	-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
	box-shadow: inset 0px 1px 0px 0px #878e98;
	width: 100%;
	height: 2.75em;
	line-height: 2.75em;
	text-indent: 2.75em;
	display: block;
	position: relative;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: #fff;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}

Выдатна! Зараз усё пачынае выглядаць лепш, і мы таксама атрымалі структуру! Але як наконт таго, каб дадаць колер фону, каб меню атрымалася лепш..

body {
	background:#32373d;
}

Рада: Успамінаем аб EM

З CSS вышэй вы можаце бачыць, што лёгка забыцца, што на самой справе азначаюць вашыя em-адзінкі. Гэта добрая ідэя пакінуць каментары да вашых першапачатковым разліках, так што, калі вы вернецеся да свайго коду ў будучыні, вы зможаце зразумець тое, што адбываецца. Памятаеце формулу: жаданыя px / бацькоўскія px = выніковыя em і выкарыстоўвайце прыблізны сімвал (≈), калі вы акругляецца вынік.

#wrapper {	
	font-size: 0.8125em; 	/* 13/16 = 0.8125*/
}

.menu > li > a {
	height: 2.75em;			/* 36/13 ≈ 2.75*/
	line-height: 2.75em;	/* 36/13 ≈ 2.75*/
	text-indent: 2.75em;	/* 36/13 ≈ 2.75*/
}

Крок 4: CSS для падменю

Час дадаць CSS для белага падменю. Нам трэба дадаць белы фон з шэрымі межамі. Звярніце ўвагу, што апошні элемент не мае ніжняй мяжы, мы наладзім яго з дапамогай псеўда-селектара :last-child. У нас ёсць цёмна-сіняя мяжа, таму мы выдалім шэры, дадаўшы яшчэ адзін сіні.

Наступны крок будзе падобны на папярэдні; мы зноў дадамо вышыню і шырыню, мы зменім фон на белы. На гэты раз нам трэба змяніць памер шрыфта. Мы імкнемся да 12px, таму, выкарыстоўваючы наш разлік жаданых px / бацькоўскіх px = выніковыя em, атрымліваем 0.923em

Давайце таксама зменім колер тэксту на шэры. Звярніце ўвагу, што мы выкарыстоўвалі ўласцівасць display:block. Калі б мы выкарыстоўвалі float:left меню не плаўна анімавалі, таму мы выкарыстоўваем ўласцівасць display: block, каб дапамагчы ім рухацца прыгожа і плаўна. вы таксама заўважылі, што мы дадалі дадатковы стыль; мы ўжываем яго да апошняга элемента ў тэгу ul. Мы зробім гэта, каб змяніць колер границы.

.menu ul li a {
	background: #fff;
	border-bottom: 1px solid #efeff0;
	width: 100%;
	height: 2.75em;
	line-height: 2.75em;
	text-indent: 2.75em;
	display: block;
	position: relative;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.923em;
	font-weight: 400;
	color: #878d95;
}
.menu ul li:last-child a {
	border-bottom: 1px solid #33373d;
}

Теперь усё выглядае вельмі добра!

Крок 5: Навядзенне і актыўны стиль

Мы дададзим стыль для навядзення і актыўнага станаў, гэта асабліва важна калі меню разгорнута! Мы таксама дададзим ніжнюю мяжу ў актыўны меню. Цяпер, калі вы думаеце, "чаму мы не дадалі актыўны клас?». Добра, мой сябар, гэта тое, што мы зробім з дапамогай jQuery крыху пазней.

.menu > li > a:hover, 
.menu > li > a.active {
	background-color: #35afe3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
	background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
	background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
	background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
	background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
	background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
	border-bottom: 1px solid #103c56;
	-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
	-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
	box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
	border-bottom: 1px solid #1a638f;
}

Крок 6: Абразкі галоўнага меню

Мы дададзим абразкі, выкарыстоўваючы псеўда ўласцівасць :before. Спачатку мы звернем увагу на тэгі якароў у спісах, мы выкарыстоўваецца і ў дачыненні фонавы спрайт і усталюем яго ўласцівасць на no-repeat. Мы зададзим памер шрыфта 36px, хоць тэксту тут няма; мы будзем выкарыстоўваць 36px, для таго, каб мы маглі выкарыстоўваць шырыню і вышыню 1em, якая роўная 36px. Затым мы змяшчаем элемент ўніз на 50% і выдаляем .5em водступу зверху, каб цэнтраваць яго.

Выкарыстоўваючы класы для кожнага элемента спісу, мы нададзім ім адпаведную зыходную пазіцыю для спрайт.

Заўвага: Я стварыў гэты спрайт з дапамогай прыкладання SpriteRight, калі вы захочаце пагуляць са спрайтам, я ўключыў малюнкі і файлы праекта ў зыходныя файлы.

.menu > li > a:before {
	content: '';
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	font-size: 36px;
	height: 1em;
  	width: 1em;
	position: absolute;
  	left: 0;
	top: 50%;
	margin: -.5em 0 0 0;
}
.item1 > a:before {
	background-position: 0 0;
}
.item2 > a:before {
	background-position: -38px 0;
}
.item3 > a:before {
	background-position: 0 -38px;
}
.item4 > a:before {
	background-position: -38px -38px;
}
.item5 > a:before {
	background-position: -76px 0;
}

Шаг 7: Нумарацыя галоўнага меню

Окажите, памятаеце тэгі span, якія мы дадалі? Яны будуць лікамі!

Спачатку мы дададзим памер шрыфта 11px (які пераўтворыцца прыкладна ў 0.857em). Мы размесцім іх абсалютна, і зрушыць іх направа на 1em, яшчэ раз узгадаем - em, каб рабіць памер плывучым. Мы зрушым яго ўніз на 50% і выдалім верхні водступ, каб цэнтраваць яго. Фон будзе дададзены разам з ценямі кантэйнера, унутранай і знешняй абводкай.

І зноў, каб зрабіць яго плывучым, мы будзем выкарыстоўваць водступы, каб стварыць шырыню і вышыню. Мы выкарыстоўваем em нават для радыусу межаў; нам трэба гэта для таго, каб, калі тэкст будзе больш, яны могуць стаць непрапарцыйным. Я таксама дадаў яшчэ адзін стыль, пры навядзенні паказальніка і актыўнага класа для спасылкі.

.menu > li > a span {
	font-size: 0.857em; 
	display: inline-block;
	position: absolute;
	right: 1em;
	top: 50%; 
	background: #48515c;
	line-height: 1em;
	height: 1em;
	padding: .4em .6em;
	margin: -.8em 0 0 0; 
	color: #fff;
	text-indent: 0;
	text-align: center;
	-webkit-border-radius: .769em;
	-moz-border-radius: .769em;
	border-radius: .769em;
	-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
	-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);
	font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
	background: #2173a1;
}

Крок 8: Нумары падменю і стрелки

Этот крок падобны на папярэдні, таму я не буду ўдавацца ў падрабязнасці. Асноўныя адрозненні тут у тым, што я выдаліў колер фону, змяніў мяжу і змяніў колер шрыфта. Нам таксама трэба дадаць стрэлку выкарыстоўваючы псеўда ўласцівасць :before. Мы вызначаем шырыню і вышыню і дадаем водступ злева ў em для таго каб ён быў плывучым.

Нарэшце, стан навядзення (дзякуй ўдзельнікам, якія паказалі на яго адсутнасць). Мы проста ўжываем больш цёмны колер (#32373D) да тэгу якара, псеўда-стрэлцы і ліку ў тэгу span.

.menu ul > li > a span {
	font-size: 0.857em; 
	display: inline-block;
	position: absolute;
	right: 1em;
	top: 50%; /
	background: #fff;
	border: 1px solid #d0d0d3;
	line-height: 1em;
	height: 1em;
	padding: .4em .7em;
	margin: -.9em 0 0 0; 
	color: #878d95;
	text-indent: 0;
	text-align: center;
	-webkit-border-radius: .769em;
	-moz-border-radius: 769em;
	border-radius: 769em;
	text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
	content: '▶';
	font-size: 8px;
	color: #bcbcbf;
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0;
	left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
	color: #32373D;
}

Теперь усё выглядае даволі выдатна? Я думаю, што прыйшоў час дадаць некаторыя функцыянальныя магчымасці!

Крок 9: jQuery врэмя

Палагаю, вы даўно чакалі, каб дайци да гэтага падзелу?! Ну, нарэшце, мы падабраліся да jQuery. Спачатку нам трэба будзе ўсталяваць спасылку на бібліятэку jQuery, выкарыстоўваючы адну з іх, размешчаную Google. Апошняя версія - 1.7.1. Дадайце ў падзел загалоўка сваёй HTML-старонкі наступнае:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Зараз дадайце ў ніжнюю частку вашага html-дакумента да закрыцця тэга </body>. Не хвалюйцеся, калі гэта выглядае занадта заблытаным, я растлумачу гэта праз минуту.

<script type="text/javascript">
$(function() {

    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
    
    menu_ul.hide();

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});
</script>

    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');

Для пачатку мы захоўваем тэгі падменю і якароў галоўнага меню ў двух розных зменных, гэта спрашчае зварот да іх пазней.

	    
    menu_ul.hide();

Гэты код схавае ўсе падменю пры загрузцы страницы

	    
    menu_a.click(function(e) {

Для пачатку мы пакажам так, каб ён выканаў каманду, калі мы націскаем на адзін з тэгаў якароў асноўнага меню.

	    
        e.preventDefault();

Тут мы прадухіляем пераход па спасылках якароў або змяненне адрасы ў радку. Напрыклад, калі вы калі-небудзь стварылі тэг якара са спасылкай «#», калі вы яго націснеце, ён не з'явіцца ў адраснай радку. Якара па-змаўчанні адключаныя.

	    
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');

Цяпер мы пакажам, што калі menu_a ўтрымлівае клас 'active', яго трэба выдаліць.

	    
            menu_ul.filter(':visible').slideUp('normal');

Тут мы выкарыстоўваем ўласцівасці '.filter' і ': visible'. Калі меню адкрыта, неабходна выканаць анімацыю ў нармальным рэжыме.

	    
            $(this).addClass('active').next().stop(true,true).slideDown('normal');

Калі меню закрыта, дадаць клас «active» (каб мы маглі атрымаць доступ да афармлення CSS) і выканаць анімацыю ў нармальным рэжыме.

	    
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');

Цяпер мы выкарыстоўваем ELSE як частка нашай умовы. Такім чынам, ELSE выдаляе клас active і перамяшчае меню, каб схаваць яго. Гэта так проста, што мы можам рэалізаваць любы меню, ня перазагружаючы старонку.

Заўвага: Калі вы хочаце змяніць хуткасць анімацыі, зменіце нармальны рэжым на, напрыклад. '500'. Гэта выканае анімацыю за 500 мілісекунд.

Калі вам цікава вывучыць jQuery з нуля, будзе карысна азнаёміцца з бясплатным рэсурсам Изучы jQuery за 30 дзён на tutsplus.com.

Выник

Вось, мы зрабілі гэта да канца! Мы рэалізавалі прыгожае вертыкальнае навігацыйнае меню Ормана, выкарыстоўваючы CSS3 і jQuery! Даведайцеся, як стварыць этоже меню, выкарыстоўваючы толькі CSS3 з дапамогай псеўда селектара :target.

#wrapper {width: 440px; font-size: 1em}

Спадзяюся, вам спадабаўся гэты ўрок, дзякуй за чытанне!