Smooth menu navigation

Question

I'm currently in the midst of developing a site. The current layout is pretty basic.

There's a horizontal menu navigation across the top, and there is a main centered div beneath the menu that holds the rest of the HTML and information and so on.

Now, when a user clicks on an item in the horizontal menu, the page reloads to display the new page with the new HTML as it should. However, on each page I have to copy the menu HTML to it. This seems redundant and unnecessary. So I was thinking about it and thought of this way...

Through javascript, I get the html page and display on the main content div. Like so...

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

All scripts, css, and html and now loaded onto the main original page. I can two immediate benefits...

The page has a seamless, smooth transition when it comes to displaying a new page
I do not have redundant HTML when it comes to the menu

Is this optimal though? Is it a good practice to use a $.get(); call to load a new HTML page as the main method of page navigation? Are there better alternatives?

I've considered Jquery Tabs but this requires all of the HTML to be loaded beforehand, which I was hesitant about.

Answer 1

The answer is that it depends.

If there are multiple pages that have similar layouts and simple elements, then yes, the $.get(); method would work, but could be even faster and smoother.

When I come across this junction, I would rather just keep the existing HTML elements and just load new content into them.

Again, I don't have the full code, so I could show you (and anyone else who sees this) what I mean if you shared, but that's up to you.

Now, if some of the pages had more complex elements, you should navigate by reloading.

In that space, consistency is key.

To not be redundant with your code, you just need to make your site like a template.

For example, you could have three pages (header, footer, and the page itself) and use PHP to load the header and footer in while only writing the code once.

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"; ?>

footer.html

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

What this allows is, aside from edit once, do everywhere, non-redundant HTML and also for CSS edits to be preserved across the site, as long as in each individual page the <div> 's are in the same class

Again, as I first said, it all depends.

If you have simple content and don't mind spaghetti code, you would be better suited to just replace the div info directly on each navigation use.

But, this method is, at least from what I've experienced, more widespread and versatile, so I'd recommend the template-esque method with PHP being loaded in.

Smooth menu navigation

Question

1 answers

solution1
0 2014-01-20 18:10:54

Smooth menu navigation

Question

1 answers

solution1 0 2014-01-20 18:10:54

solution1
0 2014-01-20 18:10:54