BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5211
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Topic: [Tutorial] Create_your_Own_Responsive_Menu
    Posted: 19 Oct 2020 at 13:57
Hi, this is a tutorial to explain how to create your own responsive menu




Or directly at this address: https://youtu.be/yCJxzgHuuuc

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 - 20 Oct 2020 at 01:18
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.