Opening a responsive side menu when resizing window
0
I have been coding a side menu that seems to work fine...but has a bug.
The side menu hides with a media query when window less than 660 px. Then a burger icon appears and the sidebar dissappear.
If you click the burguer, then the menu appears again.
If you click the "X" to close de bar the menu dissappears again.
Until here, all its ok.
Now if you resize to normal size, the sidemenu has completely dissapeared.
I need to open it on resize greater than 660px, but struggling to make it work.
Here is a messy code (I don't have remove some intents to make it work).
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
} else {
window width is less than 660px
}
}
Here is a codepen with the full code.
Thanks for your help.
javascript html css menu responsive
asked Nov 15 '18 at 7:37
XavierXavier
12
add a comment |
0
I have been coding a side menu that seems to work fine...but has a bug.
The side menu hides with a media query when window less than 660 px. Then a burger icon appears and the sidebar dissappear.
If you click the burguer, then the menu appears again.
If you click the "X" to close de bar the menu dissappears again.
Until here, all its ok.
Now if you resize to normal size, the sidemenu has completely dissapeared.
I need to open it on resize greater than 660px, but struggling to make it work.
Here is a messy code (I don't have remove some intents to make it work).
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
} else {
window width is less than 660px
}
}
Here is a codepen with the full code.
Thanks for your help.
javascript html css menu responsive
asked Nov 15 '18 at 7:37
XavierXavier
12
add a comment |
0
0
0
I have been coding a side menu that seems to work fine...but has a bug.
The side menu hides with a media query when window less than 660 px. Then a burger icon appears and the sidebar dissappear.
If you click the burguer, then the menu appears again.
If you click the "X" to close de bar the menu dissappears again.
Until here, all its ok.
Now if you resize to normal size, the sidemenu has completely dissapeared.
I need to open it on resize greater than 660px, but struggling to make it work.
Here is a messy code (I don't have remove some intents to make it work).
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
} else {
window width is less than 660px
}
}
Here is a codepen with the full code.
Thanks for your help.
javascript html css menu responsive
asked Nov 15 '18 at 7:37
XavierXavier
12
I have been coding a side menu that seems to work fine...but has a bug.
The side menu hides with a media query when window less than 660 px. Then a burger icon appears and the sidebar dissappear.
If you click the burguer, then the menu appears again.
If you click the "X" to close de bar the menu dissappears again.
Until here, all its ok.
Now if you resize to normal size, the sidemenu has completely dissapeared.
I need to open it on resize greater than 660px, but struggling to make it work.
Here is a messy code (I don't have remove some intents to make it work).
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
} else {
window width is less than 660px
}
}
Here is a codepen with the full code.
Thanks for your help.
javascript html css menu responsive
javascript html css menu responsive
asked Nov 15 '18 at 7:37
XavierXavier
12
asked Nov 15 '18 at 7:37
XavierXavier
12
asked Nov 15 '18 at 7:37
XavierXavier
12
asked Nov 15 '18 at 7:37
XavierXavier
12
asked Nov 15 '18 at 7:37
XavierXavier
12
12
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
add a comment |
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53314482%2fopening-a-responsive-side-menu-when-resizing-window%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
add a comment |
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
add a comment |
0
0
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
document.getElementById('sidemenu').style.display='block'
} else {
// window width is less than 660px
document.getElementById('sidemenu').style.display='none';
var btn=document.getElementById('burguer-menu');
if(isHidden(btn)){
btn.style.display='inline';
}
}
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
answered Nov 15 '18 at 7:58
AJAY MAURYAAJAY MAURYA
46839
46839
add a comment |
add a comment |
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
add a comment |
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
add a comment |
0
0
0
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
}
else {
}
}/*
COLOR PALETTE
light green #67f494 (103,244,148)
green #5cc59e (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267 (76,82,103)
middle grey #363a51 (54,58,81)
dark grey #1a2b42 (26,43,66)
FONTS
font-family: 'Open Sans', sans-serif;
*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/* NAV SECTION */
aside {
display:inline;
flex: 1;
background-color: #1a2b42;
min-width:280px;
/* top:0;
bottom:0;
width: 20%;
height: 100%; */
}
.aside-logo {
display:flex;
flex-direction: column;
color: white;
font-size: 2rem;
padding: 20px;
width: 100%;
}
.aside-logo p {
font-size: 12px;
}
#aside-logo-mb {
display: none;
}
.aside-logo a {
text-decoration: none;
color: white;
font-size: 3rem;
}
aside hr {
border-color: #4c5267;
margin:0;
padding:0;
}
.menu-link {
color:#98A4CE;
padding:20px 3px 20px 20px;
display:block;
text-decoration: none;
}
.menu-link:hover{
color: white;
border-left:solid 3px #363a51;
background-color:#363a51;
padding:20px 30px 20px 40px;
display:block;
}
.menu-link:active {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.active-menu-link {
color: #67f494;
border-left:solid 3px #67f494;
background-color:#363a51;
padding:20px 30px 20px 17px;
display:block;
}
.far {
color:#67f494;
padding-right:15px;
}
.fas {
color:#67f494;
padding-right:15px;
}
/* MAIN SECTION */
main {
display: flex;
flex-direction: column;
flex: 5;
background-color:#98A4CE;
}
/*HEADER SECTION*/
header {
display: flex;
min-height: 50px;
background-color: white;
}
.top-nav_right {
display:flex;
flex:1;
flex-direction: row;
justify-content: flex-end;
margin-right: 30px;
}
.top-nav_left {
display:none;
flex: 1;
flex-direction: row;
}
.top-nav_right-sm {
display: none;
}
#burguer-menu {
color:#67f494;
padding-right:15px;
}
.content{
flex: 4;
}
footer {
display: flex;
min-height: 50px;
background-color:#4C5267;
}
footer p {
padding: 0 0 0 30px;
color:#98A4CE;
}
@media(max-width:660px) {
aside {
display:none;
}
.aside-logo{
display:none;
}
#aside-logo-mb{
display: block;
}
header{background-color:#1a2b42;}
.top-nav_left {
display:flex;
flex: 1;
flex-direction: row;
color: white;
padding: 0 0 0 20px;
}
.top-nav_right-sm {
display: flex;
}
.top-nav_right {
display: none;
}
}
@media (min-width: 660px) {
aside {
display: inline !important;
}
}<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
<div class="aside-logo" id="aside-logo">
LOGO
<p>Your slogan </p>
</div>
<div class="aside-logo" id="aside-logo-mb">
<a href="#">×</a>
</div>
<hr>
<a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
<a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
<a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
<a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
<a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
<a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
<a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
<a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
</aside>
<main>
<header>
<div class="top-nav_left">
<p>LOGO</p>
</div>
<div class="top-nav_right">
<a href="#"><i class="fas fa-user-circle"></i>Profile</a>
<a href="#"><i class="fas fa-cog"></i>Settings</a>
</div>
<div class="top-nav_right-sm">
<a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
</div>
</header>
<div class="content">
</div>
<footer>
<p>Copyright 2018</p>
<p>Terms & Conditions</p>
</footer>
</main>answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
answered Nov 15 '18 at 8:27
Joykal InfotechJoykal Infotech
927112
927112
add a comment |
add a comment |
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.
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%2f53314482%2fopening-a-responsive-side-menu-when-resizing-window%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
