Hi everyone.

I want to create a simple single-paged website, where it is still possible to have a navigation menu. but all text and info is in one site, where when you click a link in the navigation bar, it is just the text that changes " or the page within the page" if you understand. Sort of like a flash-site - but without the fancy flash - just simple.

is it possible to use HTML to code such a site, or maybe even find a template? Or does that specific style have a name?

 

Thanks,

Anna

Purely in HTML? No, not without using frames, which is generally considered to be a bad way to do it (and you'd need several files anyway). You're going to have to use some Javascript, PHP or similar. The good news is you wouldn't need to do all that much, there's some pretty quick and simple ways to do it.

 

If you want lots of nice animation effects and so on then look into jQuery and jQuery-UI, they're a Javascript based system to do exactly what you want from the sounds of it.

Edited August 27, 201214 yr by T-G

Hi everyone.

I want to create a simple single-paged website, where it is still possible to have a navigation menu. but all text and info is in one site, where when you click a link in the navigation bar, it is just the text that changes " or the page within the page" if you understand. Sort of like a flash-site - but without the fancy flash - just simple.

is it possible to use HTML to code such a site, or maybe even find a template? Or does that specific style have a name?

 

Thanks,

Anna

 

I don't know if such a site type has a name, but there are a variety of ways you could achieve that, though it will definitely require CSS, and probably a Javascript command to do it properly. If I was trying to do it, I would make however many div's were necessary for the fake "pages" I wanted to have, and I'd use Javascript's "onclick" function to add/remove a "display: none;" rule in the CSS for the relevant fake "page" div.

 

Looking online, there does seem to be a guy who has developed of using a CSS only version of Javascripts onclick function, although I haven't looked at it in any detail: http://bonrouge.com/...ssonclickswitch

 

Is there a particular reason you want all of your information on a single page? You could just copy the html/css over to each new page you make and it'll appear as if it's on the same page?

 

Eoin

you could parallax scrolling to keep it to a single page, a good example is http://www.bagigia.com/

 

It is especially good if you are trying to lead the user on a journey, very effective way of keeping them on your website.

 

Hope this helps.

 

Stevo!

Is there a particular reason you want all of your information on a single page? You could just copy the html/css over to each new page you make and it'll appear as if it's on the same page?

 

Eoin

 

It's generally much easier to update/adapt a site with a template approach (that's the closest term I can think of that matches). Keeping content and layout separate is almost always a good idea.

It's generally much easier to update/adapt a site with a template approach (that's the closest term I can think of that matches). Keeping content and layout separate is almost always a good idea.

 

Sure, that's a fair point. I'm just trying to wrap my head around the workflow. If we were talking about doing it in PHP I see the attraction, carting as much stuff as possible into an includes.php file. But if one were actually going to do this using CSS (& maybe Javascript) to make parts of a page invisible until a navlink is clicked, all the HTML and content for the entire site would be in the one massive HTML file. I'm trying to weigh up in my mind what that would look like, and what the SEO implications would be...

I'd imagine search engines will pick up on stuff even if it isn't visible to the user by default. I don't think I'd go for a single file option simply because maintaining one big file is more unwieldy than a nice structure of index, header, footer and includes, but I see no reason why it wouldn't work. The big advantage is that once you've downloaded the "first page" no further downloads are needed, it'll be very quick, especially for users on a slow connection (assuming you can keep the "first page" down to a sensible size).

What about using 'tabs'...

 

i made a site a while back where the whole page was a tab and the content of each was pure text...

 

Heres a demo of a quick search which is done with jquery: http://www.netmagazine.com/files/tutorials/demos/2011/03/create-a-jquery-tab-system/demo/demo.html