[Tutorial] Create_your_Own_Responsive_Menu

Printed From: openElement Website
Category:

openElement

Forum Name: User Tutorials
Forum Description: Browse or create a tutorial to get the most out of the openElement software.
Please do not post support questions in this section.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1756
Printed Date: Apr 18 2024 at 6:56am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: [Tutorial] Create_your_Own_Responsive_Menu

Posted By: Hobby001
Subject: [Tutorial] Create_your_Own_Responsive_Menu
Date Posted: Oct 19 2020 at 12:57pm

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

https://zupimages.net/viewer.php?id=20/42/bzdg.jpg" rel="nofollow">

You will find it in this YouTube playlist: https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - 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');
}
} 
);

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video