Jquery single page menu
How do I make an jquery single page menu?
A jequery menu navigates through pages, all in one html. When one page is open, others are hidden.. What is a jquery single page menu? How do you make a jquery single page menu? This script and codes were developed by Reinis on 06 December 2022, Tuesday.
Jquery single page menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jquery single page menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="top"><img src="http://www.ropejumping.lv/!/menu.png" class="mbtn"/></div>
<div class="left"> <a class="mitem" id="p1" href="#page1" onclick="">Page 1</a> <a class="mitem" id="p2" href="#page2" onclick="">Page 2</a> <a class="mitem" id="p3" href="#page3" onclick="">Page 3</a> <a class="mitem" id="p4" href="#page4" onclick="">Page 4</a> </div> <div class="pages"> <div id="page1" class="page"> </div><!-- page 1 ends --> <div id="page2" class="page dn"> <iframe width="100%" height="315" src="https://www.youtube.com/embed/sSfD56yGlY8" frameborder="0" allowfullscreen></iframe> <!-- ?rel=0&autoplay=1 --> </div><!-- page 2 ends --> <div id="page3" class="page dn"> </div><!-- page 3 ends --> <div id="page4" class="page dn"> </div><!-- page 4 ends --> </div> </div> <!-- container ends --> <script src="js/index.js"></script>
</body>
</html>
Jquery single page menu - Script Codes CSS Codes
body {margin:0;}
.top {background-color:red; height:40px; width:100%; background-image:url('http://www.ropejumping.lv/!/logo2.png');background-size:auto 90%;background-position:center;background-repeat:no-repeat;}
.mbtn {height:30px;position:absolute;top:5px;left:5px;}
.ttop {line-height:40px;margin-left:20px;}
.left {background-color:green; height:100%; width:80px;position:absolute;padding:20px;}
.pages {background-color:blue; height:100%; width:100%;position:absolute;top:0; z-index:-1;}
.dn {display:none;}
div.left a {color:grey;font-size:20px;display:block;}
.mitem {}
.page {width:100%;height:100%;background-size:100% auto;background-position:center 40px;padding:40px 0px 0px 0px;}
#page1 {background-image:url('http://www.ropejumping.lv/!/slides/1.jpg');}
#page2 {background-image:url('http://www.ropejumping.lv/!/slides/2.jpg');}
#page3 {background-image:url('http://www.ropejumping.lv/!/slides/3.jpg');}
#page4 {background-image:url('http://www.ropejumping.lv/!/slides/4.jpg');}
.blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px);
}
Jquery single page menu - Script Codes JS Codes
$('.mbtn').click(function(){ if($('.left:visible').length > 0) {$('.left').addClass("dn");$('.pages').removeClass("blur");} else {$('.left').removeClass("dn");$('.pages').addClass("blur");}
});
$('.pages').click(function(){ $('.left').addClass("dn");$('.pages').removeClass("blur");
});
$('#p1').click(function(){ $('#page1').removeClass("dn");
$('#page2,#page3,#page4').addClass("dn");
});
$('#p2').click(function(){ $('#page2').removeClass("dn");
$('#page1,#page3,#page4').addClass("dn");
});
$('#p3').click(function(){ $('#page3').removeClass("dn");
$('#page1,#page2,#page4').addClass("dn");
});
$('#p4').click(function(){ $('#page4').removeClass("dn");
$('#page1,#page2,#page3').addClass("dn");
});
Developer | Reinis |
Username | 72 |
Uploaded | December 06, 2022 |
Rating | 3 |
Size | 2,423 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Jquery dropdown | 1,652 Kb |
Working hours | 2,258 Kb |
Stretching page based on tables and percentage | 4,491 Kb |
Vimeo video in background | 1,718 Kb |
Clickable table cell 2 | 1,716 Kb |
Stretchy fragile div classes grid frame | 1,669 Kb |
Spongebobs | 1,784 Kb |
Jquery menu dropdown | 1,691 Kb |
Simple html js slideshow | 1,692 Kb |
Fullscreen audio play button | 2,148 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Form Labels | Bartuc | 2,717 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Weather App | Kw7oe | 3,162 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!