Friday, May 29FreeJQuery

Tag: navigation

Pagemap : Mini map for web pages
Core Java Script, maps, Menus

Pagemap : Mini map for web pages

Pagemap for web pages a sort of navigation system which uses mini map for single page website or any other lengthy web page with JavaScript and html5 canvas.pagemap, a mini map navigation for web pages Posted by Bramus! August 28, 2019 Leave a comment on pagemapMany text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages:To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } pagemap(document.querySelector('#map'), { viewport: null, styles: { 'header,footer,section,article': rgba...
Horizontal Navigation Bar with jQuery Dropdown Menus
CSS, CSS2 / CSS3.0, Menus

Horizontal Navigation Bar with jQuery Dropdown Menus

In this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.Read More | Demo | Download -----------------------
Circular Navigation Menu Adding Java Script & CSS
Core Java Script

Circular Navigation Menu Adding Java Script & CSS

Circular Navigation Menu This tutorial helps you to show how you can create a circular navigation menu adding CSS transforms. It's all about some mathematical tricks, tips, and techniques which are not difficult but you need to focus on a good result. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.Read More | Demo | Download-----------------------