In this article, we will learn how to design a mini-map for navigation system with single page website using pagemap plugin. This plugin is totally a HTML, JavaScript and CSS based tool.
Please download the pre-compiled library files for code implementation.
The developer can fix the position of the map on the screen by the following CSS code. Add in the style part of the above HTML code.
#map {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
z-index: 100;
}
Initialization and styling of mini-map is handled in the script part of the code. The following code snippet is just provided as an example for developers, they can change it as per one’s need.
pagemap(document.querySelector('#map'), {
/* Another HTML container ID */
viewport: document.querySelector('#container'),
styles: {
'h1,a': 'rgba(0,0,0,0.10)',
'h2,h3,h4': 'rgba(0,0,0,0.08)'
},
back: 'rgba(0,0,0,0.02)',
view: 'rgba(0,0,0,0.05)',
drag: 'rgba(0,0,0,0.10)',
interval: 50
});
Example: The following code demonstrates a mini-map for navigating the web page in the top-right corner of the web page. Add a canvas tag to your HTML page.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <style> p { width: 650px; } </style> </head> <body id="bodyID"> <main> <section> <h1>HTML</h1> <p> HTML stands for HyperText Markup Language.<br/> It is used to design web pages using a markup language. <br/> HTML is the combination of Hypertext and Markup language. </p> <p> Hypertext defines the link between the web pages.<br/> A markup language is used to define the text document <br/> within tag which defines the structure of web pages. </p> <p> HTML is a markup language that is used by <br/> the browser to manipulate text,images, <br/> and other content to display it in the required format. </p> </section><br/> <section> <h1>PHP</h1> <p> The term PHP is an acronym for PHP: Hypertext Preprocessor.<br/> PHP is a server-side scripting language designed specifically<br/> for web development. </p> <p> PHP can be easily embedded in HTML files and HTML codes<br/> can also be written in a PHP file. </p> <p> The thing that differentiates PHP with client-side <br/> language like HTML is,PHP codes are executed on the<br/> server whereas HTML codes are directly rendered on the browser. </p> <p> The term PHP is an acronym for PHP: Hypertext Preprocessor.<br/> PHP is a server-side scripting language designed specifically<br/> for web development. </p> <p> PHP can be easily embedded in HTML files and HTML codes can<br/> also be written in a PHP file. </p> <p> The thing that differentiates PHP with client-side language<br/> like HTML is,PHP codes are executed on the server <br/> whereas HTML codes are directly rendered on the browser. </p> </section><br/> <section> <h1>CSS</h1> <p> Cascading Style Sheets, fondly referred to as CSS,<br/> is a simply designed language intended to simplify <br/> the process of making web pages presentable. </p> <p> CSS allows you to apply styles to web pages. </p> <p> More importantly, CSS enables you to do this independent<br/> of the HTML that makes up each web page. </p> <p> Cascading Style Sheets, fondly referred to as CSS,<br/> is a simply designed language intended to simplify <br/> the process of making web pages presentable. </p> <p> CSS allows you to apply styles to web pages. </p> <p> More importantly, CSS enables you to do this<br/> independent of the HTML that makes up each web page. </p> <p> CSS allows you to apply styles to web pages. </p> <p> More importantly, CSS enables you to do this <br/> independent of the HTML that makes up each web page. </p> </section><br/> <section> <h1>JavaScript</h1> <p> JavaScript is a lightweight, cross- platform and<br/> interpreted scripting language. </p> <p> It is well-known for the development of web pages,<br/> many non-browser environments also use it. </p> <p> JavaScript can be used for Client-side developments <br/> as well as Server-side developments. </p> <p> JavaScript is a lightweight, cross- platform and<br/> interpreted scripting language. </p> <p> It is well-known for the development of web pages,<br/> many non-browser environments also use it. </p> <p> JavaScript can be used for Client-side developments <br/> as well as Server- side developments. </p> </section><br/> <section> <h1>Python</h1> <p> Python is a high-level, general-purpose and a<br/> very popular programming language. </p> <p> Python programming language (latest Python 3) is<br/> being used in web development, Machine Learning applications, <br/> along with all cutting edge technology in Software Industry. </p> <p> Python Programming Language is very well suited <br/> for Beginners, also for experienced programmers with <br/> other programming languages like C++ and Java. </p> </section> </main> <canvas id="map"></canvas> <script src="pagemap.min.js"></script> <script> /* mini-map initialization */ pagemap(document.querySelector('#map')); </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
