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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://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='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300