Плавная навигация по меню

Я сейчас в разгаре разработки сайта. Текущий макет довольно простой.Плавная навигация по меню

Существует горизонтальная навигация по меню сверху, и под меню, содержащим остальную часть HTML-кода и информации, имеется главный центр с центром и т. Д.

Теперь, когда пользователь нажимает на элемент в горизонтальном меню, страница перезагружается, чтобы отобразить новую страницу с новым HTML как следует. Однако на каждой странице мне нужно скопировать HTML-код меню. Это кажется излишним и ненужным. Поэтому я думал об этом и думал об этом ...

Через javascript я получаю html-страницу и показываю на основном информационном div. Как и так ...

$.get("newpage.html", function(data) { 
    $("#content-div").html(data); 
});

Все скрипты, css и html и теперь загружаются на главную страницу оригинала. Я могу два немедленные преимущества ...

страница имеет цельный, плавный переход, когда дело доходит до отображения новой страницы
не имеет избыточную HTML, когда дело доходит до меню

Насколько это оптимально? Является ли хорошей практикой использовать вызов $.get(); для загрузки новой страницы HTML в качестве основного метода навигации по страницам? Есть ли лучшие альтернативы?

Я рассмотрел вкладки JQuery, но для этого требуется, чтобы весь HTML-код был загружен заранее, о чем я не решался.

источник

2014-01-20 prawn

Ответ в том, что это зависит.

Если есть несколько страниц, имеющих похожие макеты и простые элементы, то да, метод $.get(); будет работать, но может быть еще быстрее и плавнее.

Когда я сталкиваюсь с этим соединением, я бы предпочел просто сохранить существующие элементы HTML и просто загрузить в них новый контент.

Опять же, у меня нет полного кода, поэтому я могу показать вам (и всем, кто это видит), что я имею в виду, если вы поделились, но это зависит от вас.

Теперь, если на некоторых страницах были более сложные элементы, вы должны перемещаться путем перезагрузки.

В этом пространстве согласованность является ключевым.

Чтобы не быть избыточным с кодом, вам просто нужно сделать свой сайт как шаблон.

Например, у вас может быть три страницы (верхний колонтитул, нижний колонтитул и сама страница) и использовать PHP для загрузки верхнего и нижнего колонтитулов, только когда код будет написан один раз.

header.html

<html> 
<head> 
Fill with meta info, title, etc. 
</head> 

<body> 
<div class="nav"> 
Put the nav here. 
</div>

index.php

<?php include_once "header.html"; ?> 
<div class="main"> 
Just fill it with all the page's content. 
</div> 
<?php include_once "footer.html"; ?>

сноска.HTML

<div class="footer"> 
Footer info here. 
</div> 
</body> 
</html>

Что это позволяет это, помимо редактирования сразу, делать везде, нерезервированный HTML, а также для CSS редактирует быть сохранена по всему сайту, до тех пор, как в каждой отдельной странице в <div> «s находится в тот же класс

Опять же, как я уже сказал, все зависит.

Если у вас есть простой контент и не учитывайте код спагетти, вам лучше всего просто заменить информацию о div непосредственно при каждом использовании навигации.

Но этот метод, по крайней мере, из того, что я испытал, более распространен и универсален, поэтому я бы рекомендовал метод шаблона-esque с загружаемым PHP.

источник

2014-01-20 18:10:54 copilot0910

Плавная навигация по меню

ответ

Смежные вопросы