Open In App

How to design navigation map for web pages using pagemap plugin ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads