openElement

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

Hi, this is a tutorial to explain how to create your own responsive menu

You will find it in this YouTube playlist: https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo

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

openElement

[Tutorial] Create_your_Own_Responsive_Menu