Блог web-разработчика | HTML+CSS, PHP, MySQL, JavaScript/jQuery

Авг/10

26

Правильное меню “Вкладки” на HTML+CSS (без JScript)

9 коммент. » | Автор admin, рубрики Верстка

В дебрях интернет можно встретить множество разнообразных меню – от простых списков и до различного рода сложноструктурированных flash-меню. Быстрыми темпами сокращается количество браузеров не соблюдающие стандарты w3c (да-да, Я про IE6), браузеры становятся более безопасными, тем самым всё меньшее количество пользователей отключают JavaScript в своих браузерах. Благодаря этому, чуть ли не каждый веб-разработчик старается “нашпиговать” своё меню JavaScript’овыми анимациями, а некоторые даже забывают, что данное можно было реализовать на чистом HTML+CSS, не нагружаю страницу лишним программным кодом. В этом посте хочу описать процесс создания меню аля “Вкладки”, без JavaScripta на чистом HTML+CSS. Вот такой результат получился к концу данной публикации:


Встреча с “вкладками”

Так сложилось, что Я всё-таки переехал в Москву и устроился на работу HTML-верстальщиком. Буквально в первую же неделю понадобилось переверстывать горизонтальное меню навигации, которое было оформленно в виде вкладок (табов). Предыдущая реализация была “неуклюжей”, разметка этого меню не знала про слово “семантика”. Подсветка пункта меню при наведении на него курсора меняла бэкграунд не у текущего пункта, а фон всего меню, и делалось это с помощью JavaScript’а.

Я не буду показывать, что там было, но хочу показать один из способов правильного создания вкладок для меню, который Я применяю. Возможно Я не первый, кто применяет данный подход.

Меню на вкладках: Суть

Как многие знают: дизайнер придумывает дизайн и рисует макет страницы, верстальщик должен сверстать по макету HTML-страницу.

А теперь представте, что дизайнер придумал сделать меню на вкладках, нарисовал и отправил макет верстальщику. Верстальщик получает этот макет и начинает думать: “как сверстать?”. Тут есть два варианта: отказаться от подсветки при наведении мыши и просто нарезать данный макет как на картинке:

Вкладки

То есть просто найти середину между вкладками и задать бэкграунд для элементов списка.

Либо же сделать нормальные, правильные вкладки. Суть правильной вкладки в том, что доведя курсор до последнего пиксела вкладки, он(курсор) должен быть еще на этой же вкладке, а не на соседней. При чем левая(кому нравится можно правую) часть вкладки должна частично скрываться за вкладкой, которая находится левее, а при наведении на эту вкладку, она должна полностью выходить на передний план. В прочем, всё это хорошо продемонстрировано в примере из шапки данного поста.

HTML для вкладок

В HTML-разметке ничего сложного: стандартный ненумированный список и пару блоков для оформления.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Beautyfull Tabs from Belyash</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
	<div id="wrap">
		<ul id="lineTabs">
			<li><a href="#">4rd Tab</a></li>
			<li><a href="#">Third Tab</a></li>
			<li><a href="#" class="active">Second Tab</a></li>
			<li><a href="#">First Tab</a></li>
		</ul>
		<div id="content">
			<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard 	McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
		</div>
	</div>
</body>
</html>

Если Вы заметили, в разметке список начинается с последнего элемента и заканчивается первым – это из-за того, что в CSS я прописал обтекание по правому краю (float:right;).

Секреты CSS для вкладок

Сначала пойдем тем же путем, котором обычно пользуемся при созданиии горизонтальных меню: элементам списка задаем обтекание. Но как Я уже заметил, здесь необходимо задать обтекание справа (float:right;). Это первый секрет:

1. Обтекание справа для элементов списка – дает нам возможность производить наложение элементов справа-налево.

1
2
3

#lineTabs li{
	float:right;
}

2. Общую ширину (width+padding) вложенных тегов a в тег li делаем больше, чем у родительского элемента li.

1
2
3
4
5
6
7
8
9
10

#lineTabs li{
	margin:0px;
	padding:0px;
	width:110px;
}
#lineTabs li a{
	margin:0px;
	padding:7px 20px;
	width:90px;
}

3. Отрицательные отступы с краёв – благодаря этому наши табы будут наезжать друг на друга.

1
2
3

#lineTabs li a{
	margin:0px -10px;
}

4. Задаем относительное позиционирование на случай для IE6.

1
2
3

#lineTabs li a{
	position:relative;
}

5. “Подымаем” вкладку под курсором над остальными, за счет z-index.

1
2
3

#lineTabs li a:hover{
	z-index:30;
}

Пожалуй это основные моменты для создания меню на вкладках. Всё остальноё оформляется подобно горизонтальным меню. Далее привожу полный CSS-код, который использовал Я для примера из шапки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

html, body{
	background:#eee;
	margin:0px;
	padding:0px;
}
#wrap{
	margin:30px auto;
	width:480px;
}
#lineTabs{
	height:30px;
	list-style:none;
	margin:0px auto;
	padding:0px;
	padding-right:30px;
	padding-left:10px;
	width:440px;
}
#lineTabs li{
	display:block;
	float:right;
	margin:0px;
	padding:0px;
	position:relative;
	overflow:visible;
	text-align:center;
	width:110px;
}
#lineTabs li a{
	background:url(images/tab.png);
	color:#dbdbdb;
	display:block;
	font:normal 14px arial;
	height:16px;
	margin:0px -10px;
	padding:7px 20px;
	position:relative;
	text-decoration:none;
	width:90px;
}
#lineTabs li a.active{
	background:url(images/tab_act.png);
	color:white;
	z-index:50;
}
#lineTabs li a:hover{
	background:url(images/tab_act.png);
	color:white;
	z-index:30;
}
#content{
	background:white;
	border:1px solid #4c9ac3;
	margin:0px;
	padding:10px;
	text-align:justify;
}

О кроссбраузерности и валидации

Правильный CSS!Valid XHTML 1.0 Strict

В коде ничего сложного, код без хаков и костылей, благодаря чему проходит валидацию и должне одинаково отображатся во всех браузерах. Лично проверять не стал. Единственный момент – это прозрачность png24 в IE6, но если уж на то пошло то можно воспользоваться pngfix или еще каким-нибудь аналогом.

Немного слов в конце

Я мог бы нарисовать красивые табы в фотошопе, нарисовать бэкграунд для странички, но Я не дизайнер, Я – верстальщик. И суть этого поста была показать как сделать правильные табы, а не как их красиво нарисовать. Зачастую люди оценивают способности верстальщика по “красивости” внешнего вида страницы, а него его исходного кода(разметки). Это не правильно и многие к сожалению этого не понимают.

Профессия верстальщика почему-то напоминает мне профессию видеооператора. Видеооператор, всё время что-то снимает, но в результате всё равно он за кадром, редко когда его можно увидить в кадре. У верстальщика что-то похожее. Всё отображение страницы в браузере держится на работе верстальщика, но мало кто рассматривает исходный код.

, ,

RSS Feed

Есть 9 коммент. к Правильное меню “Вкладки” на HTML+CSS (без JScript)

Roman | 18 Февраль 2011 | 21:36

реально помог мне сэкономить пару часов, пасибо чувак!

Evgeny | 25 Март 2011 | 15:39

Интересный способ отображения скошенных вкладок. Только код примера не работает до конца т.к. создав html и css, я не получил эти скосы… их просто нет.

Vlad | 26 Март 2011 | 14:36

При нажатии на один из элементов ему не присваивается класс “active”. Это очень печально. На JS не хочется писать.

admin | 27 Март 2011 | 14:17

Evgeny, всё правильно, для вкладок рисуется фоновая картинка, например в фотошопе, со скошенными углами. Соответственно, Вы можете нарисовать любые скосы, скругления или на что еще хватит фантазии.

admin | 27 Март 2011 | 14:24

Vlad, нажатие кнопкой мыши – это событие JavaScript(в данном случае click). Этот же пример лишь показывает один из примеров правильной верстки “вкладок”. Если Вам нужен пример реализации с “щелчками по вкладкам”, то вот здесь я это подробно описал: переключение табов при помощи jQuery

Сергей | 9 Июль 2011 | 20:48

Огромное спасибо! Именно то, что нужно

Андрей | 25 Октябрь 2011 | 22:43

Я только начинаю первые шаги в создании сайтов, но кое что наработал уже… пусть многим покажется детским то что я создал, ну и пусть это моё детище…! Очень понравилась статья, думаю попробовать при наличии времени…

admin | 26 Октябрь 2011 | 20:17

Спасибо. Успехов в начинания.

Joliat | 2 Ноябрь 2011 | 15:03

Жесть! Я тут пытаюсь изображениями прикрутить, а тут так просто! Вкладки получились!

Написать комментарий

«

»

Найти!

Дизайн devolux
Наверх

Публикация материлов с сайта только с указанием активной ссылки на источник. web4develop.ru. 2010 год.