JQuery hash nav plugin

Developer
Brian
Size
5,306 Kb
Views
14,168
  1. JQuery hash nav plugin Previews
  2. JQuery hash nav plugin HTML Codes
  3. JQuery hash nav plugin CSS Codes
  4. JQuery hash nav plugin JS Codes

How do I make an jquery hash nav plugin?

This is a simple hash navigation plugin. It updates content via hashchange events. Allowing the state of a simple single-page site to be bookmarked. forwarded, and enables the use of the back / forward buttons. . What is a jquery hash nav plugin? How do you make a jquery hash nav plugin? This script and codes were developed by Brian on 22 November 2022, Tuesday.

JQuery hash nav plugin Previews
IQ Test

JQuery hash nav plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery hash nav plugin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <nav> <ul class="hash-nav"> <li ><a href="#/default">default</a></li> <li class="red"><a href="#/red">red</a></li> <li class="orange"><a href="#/orange">orange</a></li> <li class="green"><a href="#/green">green</a></li> <li class="blue"><a href="#/blue">blue</a></li> </ul> </nav> <main> <section class="default"> <p>The way codepen works visually hides the hash from the url bar, but you should be able to copy and paste the code elsewhere and see it working (assuming jQuery was loaded). The functionality works fine other than that.</p> <p>The plugin is very simple, just click on the color tabs above. To use you just call it on the nav ul element, and it listens for the 'hashgange' event. Then it loads the corresponding section (if it exists). If there is no hash it switches to a default view. You can pass an object to it changing the defaults, such as setting a home hash which it will automatically load.</p> </section> <section class="red"> <h1>This is the Red section</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non expedita dolor magni assumenda impedit perspiciatis odio. Quidem laudantium dicta voluptas quas voluptates est numquam accusamus eveniet. Similique libero at aliquid eveniet repellat doloremque vero. Quas consequatur explicabo nemo dolorem earum minus vitae dignissimos voluptatum pariatur ipsa assumenda ducimus cum non.</p> </section> <section class="orange"> <h1>This is the Orange section</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic placeat similique cumque illo iure porro blanditiis libero laboriosam tempore ad cupiditate ratione. Vero nisi itaque necessitatibus consequuntur voluptate ducimus suscipit. Harum ad culpa sequi nobis illum voluptatem dolorum quasi assumenda ut sit ducimus architecto quo aliquam tempore alias aliquid atque.</p> </section> <section class="green"> <h1>This is the Green section</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur incidunt illum assumenda officia voluptas veritatis obcaecati libero pariatur quis porro sed necessitatibus doloribus eligendi rem facilis esse quas quo blanditiis vel iusto. Officia consectetur corporis quis tempore quaerat quae ipsa reprehenderit assumenda ducimus eos. Inventore eaque aut accusamus omnis est.</p> </section> <section class="blue"> <h1>This is the Blue section</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum obcaecati porro quos voluptates non similique atque doloribus et delectus dolore molestiae ipsam incidunt vitae iusto accusamus illum fuga nulla error ipsum. Saepe nulla id ex voluptate asperiores ut nemo tempore optio qui quasi ab dignissimos. Accusantium et sunt voluptatibus.</p> </section> </main>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery hash nav plugin - Script Codes CSS Codes

html,
body { height: 100%;
}
body { font-family: arial, helvetica, sans-serif; background: gray;
}
a { color: #383838; text-decoration: none;
}
h1 { font-size: 2em;
}
.wrapper { min-width: 450px; width: 60%; height: 100%; margin: 0 auto; padding: 0 20px; background: white; box-shadow: 0px 15px 25px 0 rgba(0, 0, 0, 0.5);
}
nav { width: 100%; height: 30px; padding-top: 10px;
}
nav .hash-nav { width: 100%; text-align: center;
}
nav .hash-nav li { width: 20%; float: left; text-transform: uppercase; font-weight: 800; text-decoration: none;
}
nav .hash-nav li a { display: block; width: 100%; background: lightgray; padding: 5px 0; border: 1px solid darkgray;
}
nav .hash-nav li:hover a { background: #EBEBEB;
}
nav .hash-nav .active a { height: 30px; background: white; border-color: white;
}
nav .hash-nav .active a:hover { background: white;
}
nav .hash-nav .active a[href*=red] { color: red;
}
nav .hash-nav .active a[href*=orange] { color: orange;
}
nav .hash-nav .active a[href*=green] { color: green;
}
nav .hash-nav .active a[href*=blue] { color: blue;
}
main { position: relative;
}
main section { display: none; position: absolute; top: 0; left: 0; padding: 20px; border: 2px solid lightgray;
}
main section h1,
main section p { margin-bottom: 15px;
}
.red { background: red;
}
.red:not(section):hover a { color: red;
}
.orange { background: orange;
}
.orange:not(section):hover a { color: orange;
}
.green { background: green;
}
.green:not(section):hover a { color: green;
}
.blue { background: blue;
}
.blue:not(section):hover a { color: blue;
}

JQuery hash nav plugin - Script Codes JS Codes

////
// **HASH NAV PLUGIN**
////
;(function ($) { $.fn.hashNav = function(options){ // global plugin values var vars = $.extend({}, $.fn.hashNav.defaults, options), $nav = $(this), $content = $(vars.selector); //private methods methods = { init: function(){ methods.bindings(); methods.hashCheck(); }, bindings: function (){ $(window).bind('hashchange', function(){ methods.hashCheck(); }); }, //this defaults to the 1st element in both the nav and content sections defaultView: function(){ $content.hide().removeClass('active').eq(0).show().addClass('active'); $nav.find('.active').removeClass('active').end() .find('li').eq(0).addClass('active'); vars.hash = undefined; }, //shows the correct content and adds the active state to the nav updateContent: function(hash){ if (vars.transition === 'fade'){ $content.fadeOut(vars.fadeDuration).removeClass('active').end() .find('.'+hash).fadeIn(vars.fadeDuration).addClass('active'); } else { $content.hide().removeClass('active') .find('.'+hash).show().addClass('active'); } $nav.find('li').removeClass('active') .find('a[href*='+hash+']').parent().addClass('active'); }, //checks the new hash against the old and loads the correct section hashCheck: function(){ var newHash = window.location.hash.substring(2); if (window.location.hash){ if (newHash !== vars.hash && $('.' + newHash).length) { methods.updateContent(newHash); vars.hash = newHash; } else { if (vars.hash === undefined){ if (vars.homeHash !== undefined){ window.location.hash = vars.homeHash; } else { methods.defaultView(); } } } } else { if (vars.homeHash !== undefined){ window.location.hash = vars.homeHash; } else { methods.defaultView(); } } } }; // initial check methods.init(); }; // default settings $.fn.hashNav.defaults = { selector: 'main > section', // String: must keep the simple pattern {wrapper} > {content sections} homeHash: undefined, // String: defaults to undefined, this specifies which section to initially display, it also adds a hash to the url automatically. transition: 'fade', // String: sets the transition between sections, set to either "fade" or "none" fadeDuration: 300 // Integer: sets the time it takes to fade-in new content };
}(jQuery));
// On dom ready events, would usually be in a separate js file
$(document).ready(function() {	$('.hash-nav').hashNav();
});
JQuery hash nav plugin - Script Codes
JQuery hash nav plugin - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 5,306 Kb
Views 14,168
Do you need developer help for JQuery hash nav plugin?

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!

Brian (brian-baum) Script Codes
Name
Smooth Scrolling in ReactJS
ReactJS Accessible Accordion Panel
JQuery countdown plugin
JQuery exercise
ReactJS Image Carousel
AngularJS contact list
CSS dropdowns
Responsive demo page
Create amazing sales emails with AI!

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!