Приложение 1: Аккордион

Вертикальный аккордеон.

Рассмотрим реализацию аккордеона на CSS. Его можно применять для создания вертикального меню, которое раскрывается вниз.

CSS
<style type="text/css">
.menu15 {width: 500px;}

.menu15 li {list-style: none;}

.menu15 li > input[type="radio"], .menu15 li > input[type="radio"] ~ div {display: none;}

.menu15 li > label {
  cursor: pointer;
  background: #e1e1e1;
  box-shadow: 0 0 4px #ABC inset;
}

.menu15 li > label, .menu15 li > input[type="radio"]:checked ~ div {
  display: block;
  padding: 5px;
  outline: 1px solid #fff;}

.menu15 li > input[type="radio"]:checked ~ div {background: #fff; font: 13px normal helvetica, sans-serif;}
</style>
HTML
<ul class="menu15">
<li><input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><div>вкладка 1</div></li>
<li><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><div>вкладка 2</div></li>
<li><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Blogger</label><div>вкладка 3</div></li>
</ul>
Пояснения
Раскрытие вкладок можно сделать постепенными, но тогда нужно использовать фиксированную высоту. Посмотреть стиль и пример
<style type="text/css">
.menu15 {width: 500px;}

.menu15 li {list-style:none;}

.menu15 li > input[type="radio"] {display:none;}

.menu15 li > label {
  cursor: pointer;
  box-shadow: 0 0 4px #ABC inset;
  display: block;
  padding: 5px;
  border: 1px solid #ABC;
}

.menu15 li > input[type="radio"] ~ div {
  -webkit-transition: 2s;-moz-transition: 2s;-o-transition: 2s;transition: 2s;
  height:0px;
  overflow: hidden;
  padding: 0 5px 0 5px;
  border: solid #ABC;
  border-width: 0px 1px 1px 1px;
}

.menu15 li > input[type="radio"]:checked ~ div {height:100px;}
</style>
- CSS
  вкладка 1
- HTML
  вкладка 2
- Blogger
  вкладка 3

CSS
<style type="text/css">
.menu5 {
height: 336px;
overflow: hidden;
width: 500px;}

.menu5 li {
margin: 0px !important;
list-style:none;
-webkit-transition: 2s;-moz-transition: 2s;-o-transition: 2s;transition: 2s;
height:43px;
background: #fff;
overflow: hidden;}

.menu5 li:hover, .menu5 li:first-child, .menu5:hover li:first-child:hover, .menu5:hover li:last-child {height:250px;}

.menu5:hover li:first-child {height:43px;}

.menu5 li > strong {
display: block;
text-indent: 5px; padding: 5px;
cursor: pointer;
line-height: 33px;
background: #dbdee2;
box-shadow: 0 0 3px #456 inset;
}

.menu5 li > div {
height:200px;
overflow: auto;
padding: 5px;
font: 13px normal helvetica, sans-serif;}
</style>
HTML
<ul class="menu5">
<li><strong>CSS</strong><div>вкладка 1</div></li>
<li><strong>HTML</strong><div>вкладка 2</div></li>
<li><strong>Автор</strong><div>вкладка 2</div></li>
</ul>
Автор
Основа этого варианта была взята с www.cssplay.co.uk.

Упрощённо можно представить так (только для изображений).

<style type="text/css">
.gallery {width: 480px; line-height: 0px;} 

.gallery img, .gallery:hover img:first-child {height: 30px; width: 480px;} 

.gallery img:hover, .gallery img:first-child, .gallery:hover img:first-child:hover {height: 333px;} 
</style>

<div class="gallery">
<img alt="" src="URL_изо"/>
<img alt="" src="URL_изо"/>
<img alt="" src="URL_изо"/>
<img alt="" src="URL_изо"/>
</div>

CSS
<style type="text/css">
#tab1, #tab2, #tab3 {display:none; position:fixed;}

.menu6 {width: 500px;}

.menu6, .menu6 li {padding: 0; margin: 0; list-style: none;}

.menu6 li > a {
background: #e1e1e1;
box-shadow: 0 0 4px #ABC inset;
display: block;
text-decoration: none;
}

.menu6 li > a, .menu6 li > div {
outline: 1px solid #fff;
padding: 5px;}

.menu6 li > div,
#tab2:target ~ .menu6 li:nth-child(1) > div,
#tab3:target ~ .menu6 li:nth-child(1) > div {display: none; background: #fff;}

.menu6 li:nth-child(1) > div,
#tab2:target ~ .menu6 li:nth-child(2) > div,
#tab3:target ~ .menu6 li:nth-child(3) > div {display: block;}
HTML
<br id="tab2"/><br id="tab3"/>
<ul class="menu6">
<li><a href="#tab1">CSS</a><div>вкладка 1</div></li>
<li><a href="#tab2">HTML</a><div>вкладка 2</div></li>
<li><a href="#tab3">Автор</a><div>вкладка 3</div></li>
</ul>
Пояснения
Реализуется с помощью :target. Идея www.cssplay.co.uk.

Горизонтальный аккордеон.

Далее по аналогии.

<style type="text/css">
.galleryh {width: 490px;} 

.galleryh img, .galleryh:hover img:first-child {height: 333px; width: 30px; padding: 0px; outline: groove #9a3425;} 

.galleryh img:hover, .galleryh img:first-child, .galleryh:hover img:first-child:hover {width: 400px;} 
</style>

<div class="galleryh">
<img alt="" src="URL_изо"/><img alt="" src="URL_изо"/><img alt="" src="URL_изо"/><img alt="" src="URL_изо"/></div>

HTML
<ul class="horizontalaccordion1">
<li id="raz1"><a href="#raz1">HTML</a><div>Информация первого слайда.</div></li>
<li id="dva1"><a href="#dva1">CSS</a><div>Информация второго слайда.</div></li>
<li id="tri1"><a href="#tri1">Автор</a><div>Информация третьего слайда.</div></li>
</ul>
CSS
<style type="text/css">
.horizontalaccordion1 {
  margin: 0; padding: 0;
  height: 300px;
}

.horizontalaccordion1>li {
  overflow: hidden;
  float:left;
  margin: 0; padding: 0;
  list-style:none;
  width:40px;
  height: 300px;
  background:#f0f0f0;
  transition: width 0.3s; -moz-transition: width 0.3s; -webkit-transition: width 0.3s; -o-transition: width 0.3s;
}

.horizontalaccordion1>li>a {
  display: inline-block;
  margin: 0; padding: 10px;
  height: 19px;
  width: 280px;
  border-left:#f0f0f0 1px solid;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #000;
  background: #ccc;
  white-space:nowrap;
  background: -moz-linear-gradient(#999999, #cccccc);
  background: -ms-linear-gradient(#999999, #cccccc);
  background: -o-linear-gradient(#999999, #cccccc);
  background: -webkit-linear-gradient(#999999, #cccccc);
  -moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
  -moz-transform-origin: 0 100%;
  -o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
  -o-transform-origin: 0 100%;
  -webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
  -webkit-transform-origin: 0 100%;
  transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
  transform-origin: 0 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
          progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
              "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
}

.horizontalaccordion1>li>div {
  display: inline-block;
  overflow: auto;
  position:relative; top:-40px; left:40px;
  *top:0px; *left:0px; /* IE7 Hack */
  margin:0;
  width:320px;
  height:280px;
  padding:10px;
}

.horizontalaccordion1>li:target {
  overflow: hidden;
  width: 380px;
}

.horizontalaccordion1>li:target>a {
  color:#fff;
  background: #000;
  background: -moz-linear-gradient(#454545, #000000);
  background: -ms-linear-gradient(#454545, #000000);
  background: -o-linear-gradient(#454545, #000000);
  background: -webkit-linear-gradient(#454545, #000000);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
  "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}
</style>
Автор
См. ниже, только немного подкорректирован.

HTML
<ul class="horizontalaccordion">
<li><strong>HTML</strong><div>Информация первого слайда.</div></li>
<li><strong>CSS</strong><div>Информация второго слайда.</div></li>
<li><strong>Автор</strong><div>Информация третьего слайда.</div></li>
</ul>
CSS
<style type="text/css">
.horizontalaccordion {
  margin: 0; padding: 0;
  height: 300px; width:460px;
}

.horizontalaccordion>li, .horizontalaccordion:hover>li:last-child {
  overflow: hidden;
  float:left;
  margin: 0; padding: 0;
  list-style:none;
  width:40px;
  height: 300px;
  background:#f0f0f0;
  transition: width 0.3s; -moz-transition: width 0.3s; -webkit-transition: width 0.3s; -o-transition: width 0.3s;
}

.horizontalaccordion>li>strong, .horizontalaccordion:hover>li:last-child>strong {
  display: inline-block;
  margin: 0; padding: 10px;
  height: 19px;
  width: 280px;
  border-left:#f0f0f0 1px solid;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #000;
  background: #ccc;
  white-space:nowrap;
  background: -moz-linear-gradient(#999999, #cccccc);
  background: -ms-linear-gradient(#999999, #cccccc);
  background: -o-linear-gradient(#999999, #cccccc);
  background: -webkit-linear-gradient(#999999, #cccccc);
  -moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
  -moz-transform-origin: 0 100%;
  -o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
  -o-transform-origin: 0 100%;
  -webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
  -webkit-transform-origin: 0 100%;
  transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
  transform-origin: 0 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
          progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
              "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
}

.horizontalaccordion>li>div, .horizontalaccordion:hover>li:last-child>div {
  font: 13px normal helvetica, sans-serif;
  display:none;
  overflow: auto;
  position:relative; top:-40px; left:40px;
  *top:0px; *left:0px; /* IE7 Hack */
  margin:0;
  width:320px;
  height:280px;
  padding:10px;
}

.horizontalaccordion>li:hover, .horizontalaccordion>li:last-child, .horizontalaccordion:hover>li:last-child:hover {
  overflow: hidden;
  width: 380px;
}

.horizontalaccordion:hover>li:hover>div, .horizontalaccordion>li:last-child>div, .horizontalaccordion:hover>li:last-child:hover>div {
  display: inline-block;
}

.horizontalaccordion:hover>li:hover>strong, .horizontalaccordion>li:last-child>strong, .horizontalaccordion:hover>li:last-child:hover>strong {
  color:#fff;
  background: #000;
  background: -moz-linear-gradient(#454545, #000000);
  background: -ms-linear-gradient(#454545, #000000);
  background: -o-linear-gradient(#454545, #000000);
  background: -webkit-linear-gradient(#454545, #000000);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
  "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}

.horizontalaccordion>li>strong:hover {
  cursor:pointer;
}
</style>
Автор
Автор.