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: