Для удобного размещения страниц в меню, было использовано выпадающее меню с помощью стилей CSS (рис. 9.1 и 9.2).
Рис. 9.1
Рис. 9.2
Ниже показан код CSS выпадающего меню:
/*------------ВЫПАДАЮЩЕЕ МЕНЮ--------------*/
#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
padding: 0px 10px 0px 100px;
}
#nav li{
float:left; /* Расположение менюшки справа */
margin-right:30px;
position:relative;
display:block;
}
#nav li a{
display:block;
padding:5px;
color:#fff;
background-color:#000;
text-decoration:none;
}
#nav li a:hover{
color:#fff;
background:#FFD800;
text-decoration:underline;
}
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
}
#nav ul li{
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
float:none;
}
#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
left:0; /* Приносим его обратно на экран, когда нужно */
opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
background:#000;
text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
background:#FFD800;
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}
Код HTML:
<ul id="nav">
<li>
<a href="index.html" title=
"Вернуться на главную страницу">Главная</a>
</li>
<li>
<a href="menu.html" title="Посмотреть меню">Меню</a>
<ul>
<li>
<a href="sushi.html">Суши</a>
</li>
<li>
<a href="lapsha.html">Лапша</a>
</li>
<li>
<a href="supy.html">Супы</a>
</li>
<li>
<a href="deserty.html">Десерты</a>
</li>
</ul>
</li>
<li>
<a href="skidki.html" title=
"Как получить скидку">Скидки</a>
</li>
<li>
<a href="otzyvy.html" title=
"Прочесть отзывы клиентов">Отзывы</a>
</li>
<li>
<a href="kontakty.html" title=
"Как с нами связаться">Контакты</a>
</li>
<li>
<a href="#" title=
"Авторизация на сайт">Авторизация</a>
<ul>
<li>
<a href="login.html">Вход</a>
</li>
<li>
<a href="register.html">Регистрация</a>
</li>
</ul>
</li>
</ul>
Создание Слайдера
На главную страницу сайта был размещен слайдер (рис. 10.1).
Рис. 10.1 – Слайдер на главной странице
Код HTML:
| <div class="wrapper"> | |
| <input type="radio" name="point" id="slide1" checked> | |
| <input type="radio" name="point" id="slide2"> | |
| <input type="radio" name="point" id="slide3"> | |
| <input type="radio" name="point" id="slide4"> | |
| <input type="radio" name="point" id="slide5"> | |
| <div class="slider"> | |
| <div class="slides slide1"></div> | |
| <div class="slides slide2"></div> | |
| <div class="slides slide3"></div> | |
| <div class="slides slide4"></div> | |
| <div class="slides slide5"></div> | |
| </div> | |
| <div class="controls"> | |
| <label for="slide1"></label> | |
| <label for="slide2"></label> | |
| <label for="slide3"></label> | |
| <label for="slide4"></label> | |
| <label for="slide5"></label> | |
| </div> |
Код CSS:
.wrapper {
height: 350px;
margin: 0 auto;
position: relative;
width: 600px;
}
.slider {
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0,.5);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0,.5);
-o-box-shadow: 0 0 20px rgba(0, 0, 0,.5);
box-shadow: 0 0 20px rgba(0, 0, 0,.5);
}
.slides {
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform ease-in-out.5s, opacity ease-in-out.5s;
-moz-transition: transform ease-in-out.5s, opacity ease-in-out.5s;
-o-transition: transform ease-in-out.5s, opacity ease-in-out.5s;
transition: transform ease-in-out.5s, opacity ease-in-out.5s;
}
.slide1 { background-image: url(pics/reklama/reklama1.gif); }
.slide2 { background-image: url(pics/reklama/reklama2.gif); }
.slide3 { background-image: url(pics/reklama/reklama3.gif); }
.slide4 { background-image: url(pics/reklama/reklama4.gif); }
.slide5 { background-image: url(pics/reklama/reklama5.gif); }
#slide1:checked ~.slider >.slide1,
#slide2:checked ~.slider >.slide2,
#slide3:checked ~.slider >.slide3,
#slide4:checked ~.slider >.slide4,
#slide5:checked ~.slider >.slide5 {
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.wrapper > input {
display: none;
}
.wrapper.controls {
left: 50%;
margin-left: -98px;
position: absolute;
}
.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out.5s;
-moz-transition: background ease-in-out.5s;
-o-transition: background ease-in-out.5s;
transition: background ease-in-out.5s;
}
.wrapper label:hover,
#slide1:checked ~.controls label:nth-of-type(1),
#slide2:checked ~.controls label:nth-of-type(2),
#slide3:checked ~.controls label:nth-of-type(3),
#slide4:checked ~.controls label:nth-of-type(4),
#slide5:checked ~.controls label:nth-of-type(5) {
background: #ddd;
}
.wrapper label:after {
border: 2px solid #ddd;
content: " ";
display: block;
height: 12px;
left: -4px;
position: absolute;
top: -4px;
width: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}