Javascript Code: Easy Single Page Design with Right Menu

Single page designing is a novel web design method to include all of your site contents in one page. In order to have successful and attractive design, you have to include all materials in various sections of this one page. Usually, this is done by the aid of the menus. Like our following example which lets you have four sections and show each one by clicking on its related menu button at left.

<!-- this script got from www.javascriptfreecode.com coded by: Kerixa Inc. -->
<script src="https://kit.fontawesome.com/d5fba335cd.js" crossorigin="anonymous"></script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
--primary-color: #D96AA7;
--secondary-color: #422C73;
--complimentary-color: #88BFB5;
--contrast-color: #F2E527;
--light-color: #D2A9D9;
}

.container {
  background: #191919;
  min-height: 100vh;
  font-family: Montserrat, sans-serif;
}

nav a {
    font-size: 40px;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    text-align: center;
}

nav {
    position: fixed;
    left: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    height: 100vh;
    background: var(--secondary-color);
}

section {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 0;
    opacity: 0;
    transition: all ease-in .5s;
    display: flex;
    justify-content: center;
    align-items: center;
} 

section h1 {
    color: #fff;
    font-size: 50px;
    text-transform: uppercase;
    opacity: 0;
}

/* Styles applied on trigger */
section:target {
    opacity: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

section:target h1 {
    opacity: 0;
    animation: 2s fadeIn forwards .5s;
}

#first {
  background:var(--primary-color);
}
#second {
    background: var(--complimentary-color);
}

#third {
    background: var(--contrast-color);
}

#fourth {
    background: var(--light-color);
}

@keyframes fadeIn {
    100% { opacity:1 }
}
.pirimary{
	font-size:50pt;
	text-align:center;
	vertical-align:center;
	width:100%;
	position: absolute;
	color:white;
	padding-top:50px
}
</style>

<nav>
<a href="#first"><i class="far fa-user"></i></a>
<a href="#second"><i class="fas fa-briefcase"></i></a>
<a href="#third"><i class="far fa-file"></i></a>
<a href="#fourth"><i class="far fa-address-card"></i></a>
</nav>
<div class="container">
<div class="pirimary">Primary</div>
<section id="first">
<h1>First</h1>
</section>
<section id="second">
<h1>Second</h1>
</section>
<section id="third">
<h1>Third</h1>
</section>
<section id="fourth">
<h1>Fourth</h1>
</section>
</div><a target='_blank' href='http://www.javascriptfreecode.com/' style='font-size: 8pt; text-decoration: none'>JavaScript Codes</a>

If you don't know how to use this code or need more information Click here!

Javascript Best Codes

Javascript Code: Easy Single Page Design with Right Menu

Review

Links