Вкладки очень удобны для навигации на сайте. С помощью вкладок можно разместить максимум информации на сайте, используя минимум пространства.
Рассмотрим простой пример создания вкладок для сайта с помощью HTML и CSS.
Разметка index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Вкладки CSS</title>
</head>
<body>
<div class="wrapper">
<h1>Простой пример создания вкладок с помощью HTML и CSS</h1>
<hr>
<span><em>Этот код можно использовать для создания одностраничного сайта.</em></span>
<ul class="pages">
<li>
<input type="radio" name="tabs" id="page1" checked>
<label for="page1">Меню1</label>
<div class="content">
<h2>Заголовок Меню1 </h2>
<img src="images/img1.jpg">
<p>Здесь располагается текст контента Меню1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="page2">
<label for="page2">Меню2</label>
<div class="content">
<h2>Заголовок Меню2 </h2>
<img src="images/img2.jpg">
<p>Здесь располагается текст контента Меню2</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="page3">
<label for="page3">Меню3</label>
<div class="content">
<h2>Заголовок Меню3 </h2>
<img src="images/img3.jpg">
<p>Здесь располагается текст контента Меню3</p>
</div>
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Вкладки CSS</title>
</head>
<body>
<div class="wrapper">
<h1>Простой пример создания вкладок с помощью HTML и CSS</h1>
<hr>
<span><em>Этот код можно использовать для создания одностраничного сайта.</em></span>
<ul class="pages">
<li>
<input type="radio" name="tabs" id="page1" checked>
<label for="page1">Меню1</label>
<div class="content">
<h2>Заголовок Меню1 </h2>
<img src="images/img1.jpg">
<p>Здесь располагается текст контента Меню1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="page2">
<label for="page2">Меню2</label>
<div class="content">
<h2>Заголовок Меню2 </h2>
<img src="images/img2.jpg">
<p>Здесь располагается текст контента Меню2</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="page3">
<label for="page3">Меню3</label>
<div class="content">
<h2>Заголовок Меню3 </h2>
<img src="images/img3.jpg">
<p>Здесь располагается текст контента Меню3</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Файл стилей style.css.
html, body {
height: 100%;
background: #000 url(images/fon.jpg) fixed;
}
.wrapper {
margin: 0 auto;
width: 900px;
height: 100%;
bottom: 0px;
overflow: hidden;
background: rgba(165,165,185,0.8);
}
h1 {
margin: 20px 50px;
font-size: 36px;
text-align: center;
}
span {
margin: 50px;
font-size: 24px;
}
label {
font-size: 18px;
}
p {
float: right;
padding: 20px;
}
.pages {
list-style: none;
position: relative;
}
.pages:after {
content: "";
clear: both;
display: block;
}
.pages li {
float: left;
background: #fff000;
}
.pages li > input {
display: none;
}
.pages li > label {
display: inline-block;
height: 30px;
width: 70px;
border-left: 5px solid #a5a5b9;
padding: 5px 20px;
cursor: pointer;
}
.pages li:first-child > label {
border-left: none;
}
.pages .content {
display: none;
position: absolute;
left: 0;
padding: 20px;
background: #ccc;
margin: 20px 40px;
width: 750px;
height: 350px;
}
.pages li > input:checked + label {
background: #4d20cd;
}
.pages li > input:checked ~ .content {
display: block;
}
height: 100%;
background: #000 url(images/fon.jpg) fixed;
}
.wrapper {
margin: 0 auto;
width: 900px;
height: 100%;
bottom: 0px;
overflow: hidden;
background: rgba(165,165,185,0.8);
}
h1 {
margin: 20px 50px;
font-size: 36px;
text-align: center;
}
span {
margin: 50px;
font-size: 24px;
}
label {
font-size: 18px;
}
p {
float: right;
padding: 20px;
}
.pages {
list-style: none;
position: relative;
}
.pages:after {
content: "";
clear: both;
display: block;
}
.pages li {
float: left;
background: #fff000;
}
.pages li > input {
display: none;
}
.pages li > label {
display: inline-block;
height: 30px;
width: 70px;
border-left: 5px solid #a5a5b9;
padding: 5px 20px;
cursor: pointer;
}
.pages li:first-child > label {
border-left: none;
}
.pages .content {
display: none;
position: absolute;
left: 0;
padding: 20px;
background: #ccc;
margin: 20px 40px;
width: 750px;
height: 350px;
}
.pages li > input:checked + label {
background: #4d20cd;
}
.pages li > input:checked ~ .content {
display: block;
}
Скачать исходники.