Показать сообщение отдельно
  #1 (permalink)  
Старый 29.04.2016, 16:22
Новичок на форуме
Отправить личное сообщение для ЕгорКА Посмотреть профиль Найти все сообщения от ЕгорКА
 
Регистрация: 29.04.2016
Сообщений: 3

Как сделать навигацию со сменой фона на весь экран
Нашел урок на сайте 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 но не смог корректно вывести фоновое изображение (надо чтобы изображение подстраивалось не под размер блока в котором оно находится, а под размер экрана).
Прошу, помогите!
Ответить с цитированием