Невозможно «загрузить» страницу слева направо, но вы можете сделать следующее:
На странице услуг
создайте "div-обертку" вокруг содержимого вашей страницы, а
сместите содержимое внутри div-обертки за крайний правый угол страницы, затем
использовать jQuery / javascript при загрузке страницы (т. Е. Внутри функции $(document).ready(), чтобы оживить содержимое до нормальной позиции.
Итак, что-то вроде этого (не проверено):
<body>
<div id="wrapper">
<div id="inner-wrap">
//page content goes here
//Actually, I might create an inner div here and off-set/animate that one...
</div>
</div>
</body>
CSS:
#inner-wrap{position:relative;margin-left:100vw;}
jQuery:
$(document).ready(function(
//use jQuery .animate() method to slide the marginLeft param back to 0.
){});
Обратите внимание, что метод анимации jQuery не использует margin-left - скорее, он использует marginLeft. Вот так.
Пример:
Анимация marginLeft с помощью jQuery
Обновление:
Вы можете использовать ту же идею, которая была предложена выше, но вам нужен только один файл (например, index.html) для всего сайта, а «страницы» - это просто DIV, и вы можете использовать jQuery / javascript для «изменения страниц».
Например:
<body>
<div id="wrapper">
<div id="page1" class="pagex">
//page ONE content goes here
</div><!-- .pagex -->
<div id="page2" class="pagex">
//page TWO content goes here
</div><!-- .pagex -->
<div id="page3" class="pagex">
//page THREE content goes here
</div><!-- .pagex -->
</div>
</body>
CSS:
#wrapper{position:relative;}
.pagex{position:absolute;top:0;left:100vw;}
Понятия, которые вам необходимо понять:
a) z-index - позволяет расположить один div поверх другого
b) position:absolute - удаляет div из HTMLпоток и позволяет вам расположить его в любом месте на экране, даже поверх других div