Javascript.RU

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не понимаю JavaScript. Как сделать ожидание события загрузки данных? xintrea AJAX и COMET 7 01.06.2013 17:18
как сделать чтобы в popup окне показывалось картинка? sarik Общие вопросы Javascript 31 15.03.2013 13:12
как сделать так чтобы в popup окне принимался css стили,? sarik Общие вопросы Javascript 2 12.03.2013 10:24
GRID во весь экран burashka ExtJS 6 09.09.2010 13:05
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19