Highlighted

how to add different layers to index.html file?

Explorer ,
Nov 27, 2018

Copy link to clipboard

Copied

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

layout.jpg

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>

<meta charset="UTF-8">

<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>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script>

$(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 class="hamburger"><i class="fa fa-bars"></i></div>

<section class="content_wrapper">

<div class="home">

<h2>Home</h2>

</div>

<!-- home -->

<div id="layer_1" class="close_all">

<div class="layer_1_content">

<h2>Layer 1</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_1 -->

<div id="layer_2" class="close_all">

<div class="layer_2_content">

<h2>Layer 2</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_2 -->

<div id="layer_3" class="close_all">

<div class="layer_3_content">

<h2>Layer 3</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_3 -->

</section>

<!-- end content_wrapper -->

</body>

</html>

Views

464

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

how to add different layers to index.html file?

Explorer ,
Nov 27, 2018

Copy link to clipboard

Copied

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

layout.jpg

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>

<meta charset="UTF-8">

<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>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script>

$(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 class="hamburger"><i class="fa fa-bars"></i></div>

<section class="content_wrapper">

<div class="home">

<h2>Home</h2>

</div>

<!-- home -->

<div id="layer_1" class="close_all">

<div class="layer_1_content">

<h2>Layer 1</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_1 -->

<div id="layer_2" class="close_all">

<div class="layer_2_content">

<h2>Layer 2</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_2 -->

<div id="layer_3" class="close_all">

<div class="layer_3_content">

<h2>Layer 3</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_3 -->

</section>

<!-- end content_wrapper -->

</body>

</html>

Views

465

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 27, 2018 0
LEGEND ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 1
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 1
LEGEND ,
Nov 27, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8">

<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>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script>

$(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 class="hamburger"><i class="fa fa-bars"></i></div>

<section class="content_wrapper">

<div class="home">

<h2>Home</h2>

</div>

<!-- home -->

<div id="layer_1" class="close_all">

<div class="layer_1_content">

<h2>Layer 1</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_1 -->

<div id="layer_2" class="close_all">

<div class="layer_2_content">

<h2>Layer 2</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_2 -->

<div id="layer_3" class="close_all">

<div class="layer_3_content">

<h2>Layer 3</h2>

</div>

<div class="content_nav">

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

</div>

</div>

<!-- layer_3 -->

</section>

<!-- end content_wrapper -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Explorer ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 1
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
LEGEND ,
Nov 27, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

ALsp  a écrit

And totally confused by Birnou's comment

what confused you exactly ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

Your entire response.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
LEGEND ,
Nov 27, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

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...!!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

osgood_  a écrit

as per your suggestion.

you mean create an hyperlink...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0