how to add different layers to index.html file?

Report · Nov 27, 2018

I wonder if you can help, please? I am trying to create a home page which has a hamburger style button that loads up different pages on the same index.html page

I have attached an image to try to explain what I’m trying to achieve.

I used to use layers, but that's not available in Dreamweaver cc (I have not used dreamweaver for a few years) so not sure the best way to do it now?

Hope you can help

Thanks

Tim

Report · Nov 27, 2018

Layers, (or a.p. Divs as they where known) are no longer a good way to change content on a page, (if they ever were). The best method to use now is known as 'ajax' which loads the new content into the page, without refreshing the entire page.

See -

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Report · Nov 27, 2018

what you are asking for is just a different display of the TABS philosophy

https://jqueryui.com/tabs/

well you can do that different way in DW CC

using the included JS behavior (playing with LAYER (which in fact are just plain full container DIV, SECTION, ...) visibility and located one over the other... you can also play with the z-index and being sure to have an opaque container background
using the jQuery UI library (most of the code is accessible from the link above)
using the included BS library

concerning the hamburger menu

Hamburger Menu - HTML, CSS & jQuery

Report · Nov 27, 2018

If you havent got too many 'layers' maybe use something like below. It would become complex to manage though if you have more 'layers'. Myself I'd probably use ajax or vue but this solution is probably easier for you to initially manage.

<!DOCTYPE>

<html>

<head>

<title>Layers</title>

<style>

body {

margin: 0;

}

* {

box-sizing: border-box;

}

.hamburger {

position: fixed;

top: 0;

width: 80%;

margin: 0 10%;

text-align: right;

background-color: #fff;

padding: 15px 30px;

z-index: 100;

}

.content_wrapper {

width: 80%;

margin: 0 auto 0 auto;

height: 100vh;

}

.home {

padding: 80px 30px 30px 30px;

background-color: #f2f2f2;

height: 100vh;

}

#layer_1, #layer_2, #layer_3 {

position: relative;

display: none;

height: 100vh;

z-index: 99;

cursor: pointer;

}

.layer_1_content, .layer_2_content, .layer_3_content {

padding: 80px 30px 30px 30px;

background-color: #f2f2f2;

height: 100vh;

}

.content_nav {

position: absolute;

bottom: 0;

width: 100%;

text-align: center;

padding: 20px;

}

h2 {

margin: 0;

padding: 0;

}

.display_none {

display: none;

}

</style>

$(document).ready(function(){

$('.hamburger').css('cursor','pointer').click(function() {

var status = $('.home').attr('class');

if(status === "home") {

$('#layer_1').show();

$('.home').addClass('display_none');

}

if(status === "home display_none") {

$('#layer_1 , #layer_2 , #layer_3').hide();

$('.home').removeClass('display_none');

}

});

$('.show_layer_1').click(function() {

$('.close_all').hide();

$('#layer_1').show();

});

$('.show_layer_2').click(function() {

$('.close_all').hide();

$('#layer_2').show();

});

$('.show_layer_3').click(function() {

$('.close_all').hide();

$('#layer_3').show();

});

</script>

</head>

<body>

</div>

<h2>Layer 1</h2>

</div>

<a href="#" class="show_layer_2">Go to layer 2</a> | <a href="#" class="show_layer_3">Go to layer 3</a>

</div>

<h2>Layer 2</h2>

</div>

<a href="#" class="show_layer_1">Go to layer 1</a> | <a href="#" class="show_layer_3">Go to layer 3</a>

</div>

<h2>Layer 3</h2>

</div>

<a href="#" class="show_layer_1">Go to layer 1</a> | <a href="#" class="show_layer_2">Go to layer 2</a>

</div>

</section>

</body>

</html>

Report · Nov 27, 2018

Thank You, Yes that is what I was needed. I just want to be able to click on the hamburger icon and it load different sections within the index page at a certain size.

Will have a look a Ajax load to see if its a better option for me or not!

Thanks

Tim

Report · Nov 27, 2018

Just a different perspective for you to consider...

In the days of dial-up connections and tables it was sometimes advantageous to show and hide content on the same page. In the modern web is pretty much irrelevant. Using a hamburger-driven menu to simply change actual pages might be your best and simplest solution.

Report · Nov 27, 2018

Paula already propose as a firt proposal, an AJAX approach, so those one (TABS based) was already an alternative

Report · Nov 27, 2018

Its a bit of a mystery approach as the OP is infering they only want to use the hambuger for showing layer 1 and the homepage, why I don't know.........links at the foot of layer 1, layer 2, etc according to the sketch provided, do the rest.

Report · Nov 27, 2018

osgood_ wrote
Its a bit of a mystery approach as the OP is infering they only want to use the hambuger for showing layer 1 and the homepage, why I don't know.........links at the foot of layer 1, layer 2, etc according to the sketch provided, do the rest.

Yeah. Kind of like a paginator. Not sure either exactly about the whats and whys. And totally confused by Birnou's comment

Report · Nov 27, 2018

ALsp a écrit
And totally confused by Birnou's comment

what confused you exactly ?

Report · Nov 27, 2018

Your entire response.

Report · Nov 27, 2018

ALsp wrote
And totally confused by Birnou's comment

I think Kermit was just saying you can use ajax load to call each seperate page/layer into the same container, sort of like keeping the pages seperate, as per your suggestion. Probably as good approach as any, amongst many. Still need to somehow check if the home page or layer 1 is loaded when clicking the hambuger, but you could use a count click method to determine that.

Report · Nov 27, 2018

osgood_ a écrit
I think Kermit was just saying you can use ajax load to call each seperate page/layer into the same container, sort of like keeping the pages seperate,

No I was suppose to be Kermit... ... Paula wasn't suppose to be Kermit... but being aside you in the balcony... arf arf...!!!!

Report · Nov 27, 2018

osgood_ a écrit
as per your suggestion.

you mean create an hyperlink...

Adobe Community

how to add different layers to index.html file?

1 Correct answer