Как сделать навигацию со сменой фона на весь экран
:help: Нашел урок на сайте ruseller.com и решил использовать подобное меню на главной странице. Но хотелось чтобы подобное меню было на весь экран. Прошу помогите кому не трудно.
В попытках решить проблему сделал все в таблице (всего 4 страницы):
Код:
<table id="menuWrapper" class="menuWrapper bg1">
<tr class="menu" id="menu">
<td class="bg1" style="background-position:0 0;"><a id="bg1" href="#">Тенис</a></td>
<td class="bg1" style="background-position:25% 0;"><a id="bg2" href="#">Тай-Бо</a></td>
<td class="bg1" style="background-position:50% 0;"><a id="bg3" href="#">Танцы</a></td>
<td class="bg1" style="background-position:75% 0;"><a id="bg4" href="#">Баня</a></td>
</tr>
</table>
Таблица стилей:
Код:
body{
margin:0;
padding:0;
}
.menuWrapper{
position:fixed;
bottom:0;
height:100%;
width:100%;
border-collapse:collapse;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
tr.menu{
margin:0;
padding:0;
}
tr.menu > td{
margin:0;
padding:0;
vertical-align:bottom;
width:25%;
border-right:1px solid #777;
}
tr.menu > td.last{
border:none;
}
tr.menu > td > a{
padding:0;
margin-bottom:50px;
float:left;
width:100%;
height:50px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
.bg1{
background-image: url(../img/bg-tenis.jpg);
background-size:cover;
}
.bg2{
background-image: url(../img/bg-taybo.jpg);
background-size:cover;
}
.bg3{
background-image: url(../img/bg-dance.jpg);
background-size:cover;
}
.bg4{
background-image: url(../img/bg-banya.jpg);
background-size:cover;
}
Из-за 4-ех элементов не смог адаптировать JS - анимация работает криво. Ставил вместо "-266px" "25%", "-532px" "50%" и т. д. ничего не помогло.:(
Также всячески экспериментировал с background-size но не смог корректно вывести фоновое изображение (надо чтобы изображение подстраивалось не под размер блока в котором оно находится, а под размер экрана).
Прошу, помогите! |