Inspiring

Answered

how to add different layers to index.html file?

Forum|Forum|7 years ago
November 27, 2018
4 replies
1667 views

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

This topic has been closed for replies.

Correct answer osgood_

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>

ALsp

Legend

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.

O

osgood_

Legend

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.

B i r n o u

Legend

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.

osgood_ a écrit
as per your suggestion.

you mean create an hyperlink...

O

osgood_Correct answer

Legend

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>

T

tim crossAuthor

Inspiring

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

B i r n o u

Legend

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

pziecina

Legend

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded