Toggle sideBar(iFrame) using Media Queries
up vote
1
down vote
favorite
1
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks, Tom
html css
edited Nov 20 at 9:00
Ramesh
1,263319
asked Nov 19 at 10:31
user10341225
336
add a comment |
up vote
1
down vote
favorite
1
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks, Tom
html css
edited Nov 20 at 9:00
Ramesh
1,263319
asked Nov 19 at 10:31
user10341225
336
2
codepen.io/deyand/pen/pvmyjw
– Ramesh
Nov 19 at 10:39
Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
Nov 19 at 10:50
Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
Nov 19 at 11:32
add a comment |
up vote
1
down vote
favorite
1
up vote
1
down vote
favorite
1
1
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks, Tom
html css
edited Nov 20 at 9:00
Ramesh
1,263319
asked Nov 19 at 10:31
user10341225
336
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>Thanks, Tom
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
@media (max-width: 768px) {
.sideBar {
display: none !important;
}
}<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>html css
html css
edited Nov 20 at 9:00
Ramesh
1,263319
asked Nov 19 at 10:31
user10341225
336
edited Nov 20 at 9:00
Ramesh
1,263319
asked Nov 19 at 10:31
user10341225
336
edited Nov 20 at 9:00
Ramesh
1,263319
edited Nov 20 at 9:00
Ramesh
1,263319
edited Nov 20 at 9:00
Ramesh
1,263319
1,263319
asked Nov 19 at 10:31
user10341225
336
asked Nov 19 at 10:31
user10341225
336
asked Nov 19 at 10:31
user10341225
336
336
2
codepen.io/deyand/pen/pvmyjw
– Ramesh
Nov 19 at 10:39
Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
Nov 19 at 10:50
Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
Nov 19 at 11:32
add a comment |
2
codepen.io/deyand/pen/pvmyjw
– Ramesh
Nov 19 at 10:39
Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
Nov 19 at 10:50
Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
Nov 19 at 11:32
2
2
codepen.io/deyand/pen/pvmyjw
– Ramesh
Nov 19 at 10:39
codepen.io/deyand/pen/pvmyjw
– Ramesh
Nov 19 at 10:39
Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
Nov 19 at 10:50
Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
Nov 19 at 10:50
Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
Nov 19 at 11:32
Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
Nov 19 at 11:32
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>answered Nov 19 at 11:48
Ramesh
1,263319
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
1
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
Ok thanks for that
– user10341225
Nov 20 at 9:01
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
|
show 3 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>answered Nov 19 at 11:48
Ramesh
1,263319
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
1
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
Ok thanks for that
– user10341225
Nov 20 at 9:01
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
|
show 3 more comments
up vote
1
down vote
accepted
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>answered Nov 19 at 11:48
Ramesh
1,263319
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
1
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
Ok thanks for that
– user10341225
Nov 20 at 9:01
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
|
show 3 more comments
up vote
1
down vote
accepted
up vote
1
down vote
accepted
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>answered Nov 19 at 11:48
Ramesh
1,263319
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});.mobile-menu-icon i.close {
display: none;
}
@media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
@media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>answered Nov 19 at 11:48
Ramesh
1,263319
answered Nov 19 at 11:48
Ramesh
1,263319
answered Nov 19 at 11:48
Ramesh
1,263319
answered Nov 19 at 11:48
Ramesh
1,263319
1,263319
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
1
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
Ok thanks for that
– user10341225
Nov 20 at 9:01
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
|
show 3 more comments
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
1
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
Ok thanks for that
– user10341225
Nov 20 at 9:01
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Thanks, the hamburger icon doesn't appear when I test run the website.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
Do you need to add a z-index to show the hamburger icon.
– user10341225
Nov 20 at 8:06
1
1
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
@user10341225 I just used the hamburger icon to demonstrate here. You need to style the icon and positions relative to your website.
– Ramesh
Nov 20 at 8:49
Ok thanks for that
– user10341225
Nov 20 at 9:01
Ok thanks for that
– user10341225
Nov 20 at 9:01
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
Happy to help, If it's working for you mark this answer as a correct one
– Ramesh
Nov 20 at 9:02
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372658%2ftoggle-sidebariframe-using-media-queries%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
codepen.io/deyand/pen/pvmyjw
– Ramesh
Nov 19 at 10:39
Thanks for that. I am still a bit confused as that example is good but it doesn't work in my situation.
– user10341225
Nov 19 at 10:50
Your snippet contains unrelated codes to your question. Please provide only the relevant code.
– Ramesh
Nov 19 at 11:32