One Page CSS Navigation | One Page Scroll Navigation Css







One Page CSS Navigation | One Page Scroll Navigation Css

Welcome🎉 to Code With Random blog. In this blog, we learn how to create  One Page CSS Navigation. We use HTML & CSS  for  One Page CSS Navigation. Hope you enjoy our blog so let’s start with a basic HTML structure for the  One Page CSS Navigation. 

HTML code

 <div class="ct" id="t1">  
<div class="ct" id="t2">
<div class="ct" id="t3">
<div class="ct" id="t4">
<section>
<ul>
<a href="#t1"><li class="icon fa fa-home" id="uno"></li></a>
<a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a>
<a href="#t3"><li class="icon fa fa-coffee" id="tres"></li></a>
<a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a>
</ul>
<div class="page" id="p1">
<li class="icon fa fa-home"><span class="title">Home</span><span class="hint">Like this pen to see the magic!...<br/> Just kidding, it won't happen anything but I'll be really happy If you do so.</span></li>
</div>
<div class="page" id="p2">
<li class="icon fa fa-keyboard-o"><span class="title">Type</span></li>
</div>
<div class="page" id="p3">
<li class="icon fa fa-coffee"><span class="title">Coffee</span></li>
</div>
<div class="page" id="p4">
<li class="icon fa fa-dribbble"><span class="title">Dribbble</span><span class="hint"><a href="https://dribbble.com/rupok" target="_blank">Follow me on Dribbble</span></li>
</div>
</section>
</div>
</div>
</div>
</div>

There is all HTML code for the CSS Timer. Now, you can see output without CSS, then we write CSS for the  One Page CSS Navigation.

Output

One Page CSS Navigation | One Page Scroll Navigation Css

CSS code

 * {  
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
}
html, body, section, .page {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
transition: all 1s cubic-bezier(.5, -0.005, 0.2, 1) !important;
-webkit-transition: all 1s cubic-bezier(.5, -0.005, 0.2, 1) !important;
color: #fff;
background: #374046;
overflow: hidden;
}
section {
width:400%;
}
.page {
position: absolute;
}
#p1 {
left: 0;
}
#p2 {
left: 100%;
background: #FF5722;
}
#p3 {
left: 200%;
background: #593C1F;
}
#p4 {
left: 300%;
background: deeppink;
}
ul {
position: fixed;
z-index: 1;
}
#t1:target .page#p1 {
transform: translateX(0);
}
#t2:target .page#p2 {
transform: translateX(-90%);
}
#t3:target .page#p3 {
transform: translateX(-190%);
}
#t4:target .page#p4 {
transform: translateX(-290%);
}
#t2:target .page#p1,
#t3:target .page#p1,
#t4:target .page#p1 {
background: black;
}
#t2:target .page#p1 .icon,
#t3:target .page#p1 .icon,
#t4:target .page#p1 .icon {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.icon {
color: #fff;
font-size: 32px;
display: block;
}
ul .icon:hover {
opacity: 0.6;
}
#p1 .icon .title {
margin-bottom: 20px;
}
#t2:target ul .icon,
#t3:target ul .icon,
#t4:target ul .icon {
transform: scale(.6);
transition-delay: .25s;
}
#t2:target #dos {
transform: scale(1.2) !important;
}
#t3:target #tres {
transform: scale(1.2) !important;
}
#t4:target #cuatro {
transform: scale(1.2) !important;
}
ul {
position: fixed;
top: 0;
bottom: 0;
left: 0;
/*right: 0;*/
margin: auto;
height: 280px;
width: 10%;
padding: 0;
text-align: center;
}
ul li {
margin: 30px 0;
}
a {
text-decoration: none;
font-family: open sans, sans-serif;
}
.title, .hint {
font-family: open sans, sans-serif;
display: block;
}
.title {
font-size: 38px;
}
.hint {
font-size: 13px;
}
.hint a {
color: #EFFF06;
transition: all 250ms easet-out;
}
.hint a:hover {
color: #FFF;
}
.page .icon {
position: absolute;
top: 0;
bottom: 0;
right: 10%;
left: 0;
width: 270px;
height: 170px;
margin: auto;
text-align: center;
font-size: 80px;
transform: translateX(360%);
line-height: 1.3;
}
.page#p1 .icon {
height: 220px;
}
.page#p1 .icon {
transform: translateX(0) !important;
}
#t2:target .page#p2 .icon {
transform: translateX(0) !important;
transition-delay: 1s;
}
#t3:target .page#p3 .icon {
transform: translateX(0) !important;
transition-delay: 1s;
}
#t4:target .page#p4 .icon {
transform: translateX(0) !important;
transition-delay: 1s;
}
.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 10px;
}
.credit a {
color: #fff
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

One Page CSS Navigation | One Page Scroll Navigation Css

Codepen by – Nazmul Hasan Rupok

Check out more…..

Share on:

Leave a Comment