Навигация по одностраничному сайту
Всем добрый вечер)
Попробывал реализовать навигацию по одностраничному сайту, делал все в фф и как следствие там все хорошо. После того как протестировал других браузерах, понял что все не очень хорошо. Где-то не реагирует на нажатие по ссылке, где-то все скочет... Ссылка на страничку - http://boooms.ru/test_js/ var navigation = new Array();
navigation.clientHeight = 0.92 * document.documentElement.clientHeight;
navigation.thisPage = window.location.hash.substring(1);
navigation.tonamePage = false;
navigation.scrollPosition = '0';
function select(id) {
switch(id) {
case 'cover':
navigation.scrollPosition = '0';
navigation.namePage = ''; break;
case 'about':
navigation.scrollPosition = navigation.clientHeight;
navigation.namePage = 'About Us'; break;
case 'freedom':
navigation.scrollPosition = 2 * navigation.clientHeight;
navigation.namePage = 'Freedom for Ideas'; break;
case 'thinking':
navigation.scrollPosition = 3 * navigation.clientHeight;
navigation.namePage = 'Thinking'; break;
case 'projects':
navigation.scrollPosition = 4 * navigation.clientHeight;
navigation.namePage = 'Projects'; break;
default:
navigation.scrollPosition = '0';
navigation.namePage = ''; break;
}
navigation.colorElement = 'rgb(0,0,0)';
}
function set() {
window.location.hash = navigation.thisPage;
document.title = 'o_O // ' + navigation.namePage;
document.getElementById(navigation.tonamePage).style.backgroundColor = 'rgb(255,255,255)';
document.getElementById(navigation.thisPage).style.backgroundColor = navigation.colorElement;
}
function scrollPage() {
if (navigator.appName == "Microsoft Internet Explorer") {
navigation.scrollPosition = document.documentElement.scrollTop;
} else {
navigation.scrollPosition = window.pageYOffset;
}
if (navigation.tonamePage == false) {
if (navigation.thisPage == false) {
navigation.thisPage = 'cover';
}
select(navigation.thisPage);
document.getElementById(navigation.thisPage).style.backgroundColor = navigation.colorElement;
document.documentElement.scrollTop = navigation.scrollPosition;
} else {
/* Определяем текущее положение */
if (navigation.scrollPosition >= 0 && navigation.scrollPosition <= 0.5 * navigation.clientHeight) {
navigation.thisPage = 'cover';
}
if (navigation.scrollPosition > 0.5 * navigation.clientHeight && navigation.scrollPosition <= 1.5 * navigation.clientHeight) {
navigation.thisPage = 'about';
}
if (navigation.scrollPosition > 1.5 * navigation.clientHeight && navigation.scrollPosition <= 2.5 * navigation.clientHeight) {
navigation.thisPage = 'freedom';
}
if (navigation.scrollPosition > 2.5 * navigation.clientHeight && navigation.scrollPosition <= 3.5 * navigation.clientHeight) {
navigation.thisPage = 'thinking';
}
if (navigation.scrollPosition > 3.5 * navigation.clientHeight) {
navigation.thisPage = 'projects';
}
if (navigation.thisPage != navigation.tonamePage) {
select(navigation.thisPage);
set();
}
}
navigation.tonamePage = navigation.thisPage;
}
function clickMenu(element) {
select(element);
if (navigator.appName == "Microsoft Internet Explorer") {
window.pageYOffset = navigation.scrollPosition;
} else {
document.documentElement.scrollTop = navigation.scrollPosition;
}
}
<!doctype html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<title>Test JS</title>
<link rel="stylesheet" href="css/style.css" />
<script src='js/navigation.js'></script>
</head>
<body onload="setInterval('scrollPage();', 100)">
<header>
<nav id="nav">
<a id="cover" onclick="clickMenu(this.id)">1</a>
<a id="about" onclick="clickMenu(this.id)">2</a>
<a id="freedom" onclick="clickMenu(this.id)">3</a>
<a id="thinking" onclick="clickMenu(this.id)">4</a>
<a id="projects" onclick="clickMenu(this.id)">5</a>
</nav><!-- /nav -->
</header>
<article class="cover"></article>
<article class="about"></article>
<article class="thinking"></article>
<article class="freedom"></article>
<article class="projects"></article>
</body>
</html>
Надеюсь поможете доковырять его до более менее работоспособного состояния, у самого знаний не хватат, так как практически с этого примера и начал изучать. Заранее спасибо за помощь. |
Это можно сделать используя лишь HTML+CSS. http://dl.dropbox.com/u/6001712/examples/index.html
|
Да, якоря конечно штука полезная) Но в полном объеме не получиться все реализовать. При нажатии на ссылку, можно сделать ту же реакцию без использования js, за исключением изменения данных в теге title все будет. А вот если делать еще скроллинг то чисто на html+css не получиться. Когда страничка прокручивается до определенного положения, то происходт смена 3-х вещей: title, в адресе меняется префикс и в меню происходит выделение следующего пункта. Magneto, согласен ваш вариант близок, но немного не то.
|
Цитата:
глобальные список страниц для перехода-ничего не мешает указывать там и полный адрес страницы,для тех у кого js не подключен,для поисковиков.. зачем менять якоря для страницы если можно поставить адрес в нормальном виде? Соответственно исходя из этого и архитектура не верная |
На самом деле это делаю небольшой сайт для себя, а не какой то проект с комерческой целью. Поэтому о поисковых системах не думаю вообще, по этой же причине там будет css3, хотя далеко не везде все это будет работать. Тут нет цели хорошей индексации и полной кроссбраузерности.
dmitriymar, без js сейчас практически никто не сидит, а кто не юзает, его проблемы. А вот как поставить адрес в нормальном виде пока недодумал. От '#' было бы неплохо избавиться, но незнаю как..... |
|
спасибо за ссылку, поизучаю.
|
| Часовой пояс GMT +3, время: 03:10. |