У меня есть сайт с простой PHP-навигацией (с использованием $ _GET-Variables).
HTML-код для ссылок навигации (они всплывают справа):
<a href="index.php?main=test1" class="menuelement">Test 1</a>
<a href="index.php?main=test2" class="menuelement">Test 2</a>
<a href="index.php?main=test2" class="menuelement">Test 3</a>
Простой PHP-кодовый блок для включения страниц:
if(!isset($_GET['main'])) {
$page = "home";
} else {
$page = $_GET['main'];
}
include($page.".php");
Оба кодовых блока находятся на index.php.
Элементы меню анимированы с помощью jQuerys .animate () следующим образом (код между $ (document) .ready):
$('.menuelement').hover(function () {
if ($(this).hasClass('clicked') == false) {
$(this).stop(true, false).animate({
'padding-right': '80px'
}, 900, 'easeOutBounce');
}
},
function () {
if ($(this).hasClass('clicked') == false) {
$(this).stop(true, false).animate({
'padding-right': '0px'
}, 900, 'easeOutBounce');
}
}
).click(function() {
if ($(this).hasClass('clicked') == true) {
//Don't do anything.
} else {
$('a.clicked').animate({
'padding-right': '0px'
}, 900, 'easeOutBounce');
$('a.clicked').removeClass('clicked');
$(this).addClass('clicked');
$(this).stop(true, false).animate({
'padding-right': '80px'
}, 900, 'easeOutBounce');
}
});
То, что происходит, - то, что скрытый меню скользит влево (помните: он плавает вправо), при наведении мыши он скользит назад. При щелчке он остается там, где он есть, и получает класс, чтобы отметить, что он нажал. Если вы щелкнете по другому элементу меню, тот, который был выбран ранее, сдвинется назад, а новый останется выдвинутым. Все это делается с помощью addClass, removeClass и некоторых операторов if-else ... довольно просто. Если a-Tags ссылок не имеет никаких ссылок, e. г. только знак хеша () все отлично работает.
Но как только ссылки имеют цель (например,), анимация jQuery запускается снова при нажатии на элемент меню, потому что index.php является своего рода перезагрузкой. В результате выбранный элемент не останется выдвинутым.
Я знаю, что мог (и я уже сделал) загрузить некоторый контент с помощью e. г. .load () в div. Но я не хочу делать это в отношении SEO и некоторых других аспектов.
Можно ли использовать фантастическую PHP-навигацию и jQuerys .animate () без «перезагрузки» анимации при каждом нажатии ссылки? Может быть, есть некоторые подсказки PHP или jQuery, которые я не знаю.
Спасибо за любую помощь!