BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> User Tutorials
  New Posts New Posts RSS Feed - [Tutorial] Create_your_Own_Responsive_Menu
  FAQ FAQ  Forum Search   Register Register  Login Login

[Tutorial] Create_your_Own_Responsive_Menu

 Post Reply Post Reply
Author
Message
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (2) Thanks(2)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Topic: [Tutorial] Create_your_Own_Responsive_Menu
    Posted: Oct 19 2020 at 12:57pm
Hi, this is a tutorial to explain how to create your own responsive menu




To follow these instructions, you will need the tree following code blocs:

HTML code
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">


CSS code
@media only screen and (min-width:768px){
.MenuBarBG{
background-color:rgba(0,0,0,.5);
}
}

.MenuBar{
z-index:30000 !important;
position: fixed !important;
}

html {
scroll-behavior: smooth;
}


Javascript code
$('.Hamburger').click(
function(){
$('.MenuButton').toggle();
$('.Hamburger').toggle();
$('.MenuBar').toggleClass('MenuBarBG');
}
);

$('.MenuButton').click(
function(){
if (window.matchMedia("(max-width: 767px)").matches) {
$('.Hamburger').toggle();
$('.MenuButton').toggle();
$('.MenuBar').toggleClass('MenuBarBG');
}
);



Edited by Hobby001 - Jun 11 2021 at 7:00pm
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.047 seconds.