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!
