Print Page | Close Window

[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: Feb 27 2024 at 7:05pm
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



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net