Pure CSS One Page Vertical Navigation

Pure CSS One Page Vertical Navigation
Code Snippet:Pure CSS One page vertical navigation
Author: Hrtzt
Published: January 27, 2024
Last Updated: February 3, 2024
Downloads: 300
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a stylish one-page vertical navigation menu using pure CSS. No JavaScript is needed, making it lightweight and efficient. Navigate seamlessly using keyboard controls, and easily add pages by updating the HTML and CSS editors. Explore additional features like a lateral menu and autogeneration of pages. The vibrant design, coupled with easy customization, makes this CSS navigation menu a valuable addition to your web projects.

How to Create Pure CSS One-Page Vertical Navigation

1. First of all, load the Reset CSS and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<!--Please leave this meta tag untouched-->
 <meta name="web_author" content="Alberto Hartzet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

2. Use the HTML structure inside the <div class="contenedor"> to create your one-page navigation. Customize the input fields with titles and adjust the content in each label. Modify the content inside each label to represent your page content. Add links, text, or any other elements as needed.

<div class="contenedor">
  <form>
    <input type="radio" id="Slide1" name="slider" titulo="Home" autofocus="autofocus" checked="checked"/>
    <input type="radio" id="Slide2" name="slider" titulo="Features"/>
    <input type="radio" id="Slide3" name="slider" titulo="Adding pages to this template"/>
    <input type="radio" id="Slide4" name="slider" titulo="+More"/>
    <input type="radio" id="Slide5" name="slider" titulo="About"/>
    <input type="radio" id="Slide6" name="slider" titulo="Dummy page"/>
    <input type="radio" id="Slide7" name="slider" titulo="Dummy page"/>
    <div class="labels">
      <label class="Slide" for="Slide1" id="Slide1">
        <div class="content">
          <h1><strong>Pure CSS</strong> one page vertical navigation</h1>
        </div>
        <div class="icon"><span><i class="fa fa-keyboard-o"></i></span><span>Use keyboard</span></div>
      </label>
      <label class="Slide" for="Slide2" id="Slide2">
        <div class="content">
          <h1>Features</h1>
          <div class="block"><span> <i class="fa fa-hashtag"></i><br/><strong>No JS</strong><br/>CSS Rules!</span><span> <i class="fa fa-keyboard-o"></i><br/><strong>Pure CSS keyboard navigation</strong><br/>Yep, no kidding</span><span><i class="fa fa-bars"></i><br/><strong>Lateral menu</strong></span><span><i class="fa fa-codepen"></i><br/><strong>Autogenerate pages</strong><br/>Using Jade & SASS</span></div>
        </div>
      </label>
      <label class="Slide" for="Slide3" id="Slide3">
        <div class="content">
          <h1>Adding pages to this template</h1>
          <div class="block">
            <ol>
              <li>Add the pages title in the pageTitle array in the HTML editor to generate pages</li>
              <li>Add the number of pages in the $npages variable in the CSS editor</li>
            </ol>
          </div>
        </div>
      </label>
      <label class="Slide" for="Slide4" id="Slide4">
        <div class="content">
          <h1>+More</h1>
          <div class="block"><span><a href="https://codepen.io/hrtzt/pen/NPZKRN" target="_blank">One Page Navigation CSS Menu</a></span><span><a href="https://codepen.io/hrtzt/pen/YPoeWd" target="_blank">The simplest CSS switch</a></span><span><a href="https://codepen.io/hrtzt/pen/JdYaEZ" target="_blank">Animated cube slider CSS only</a></span><span><a href="https://codepen.io/hrtzt/pen/vGqEJO" target="_blank">Google photos album view with only CSS</a></span></div>
        </div>
      </label>
      <label class="Slide" for="Slide5" id="Slide5">
        <div class="content">
          <h1>About</h1>
          <div class="block"><span><a href="https://dribbble.com/hrtzt" target="_blank"><i class="fa fa-dribbble"> </i>Dribbble me</a></span><span><a href="https://twitter.com/hrtzt" target="_blank"><i class="fa fa-twitter"></i>Tweet me</a></span></div>
        </div>
      </label>
      <label for="Slide6" id="Slide6">
        <div class="content">
          <h1>Dummy page</h1>
          <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis</div>
        </div>
      </label>
      <label for="Slide7" id="Slide7">
        <div class="content">
          <h1>Dummy page</h1>
          <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis</div>
        </div>
      </label>
    </div>
  </form>
</div>

3. Adjust the CSS in the <style> section to match your project’s style. Modify colors, fonts, and other styles to suit your design preferences.

/* The basic stuff to make it work */
.contenedor {
  width: 100vw;
  height: 100vh;
  background: deeppink;
  position: relative;
  display: flex;
  align-items: center;
}
.contenedor form {
  box-sizing: border-box;
  text-align: center;
  padding: 22px;
  display: inline-flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  justify-content: center;
}
.contenedor form input {
  height: 0;
  margin: 12px 0;
  z-index: 1;
}
.contenedor form input:checked {
  outline: 0;
  border: 0;
}
.contenedor form input:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.81);
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.25s linear;
}
.contenedor form input:checked:before {
  background-color: white;
}
.contenedor form input:after {
  content: "" attr(titulo) "";
  position: relative;
  left: 30px;
  opacity: 0;
  color: white;
  font-size: 9px;
  display: block;
  min-width: 80px;
  transition: all 0.25s linear;
}
.contenedor form input:checked:after {
  opacity: 1;
  left: 20px;
}
.contenedor form input:hover:after:not(label) {
  opacity: 1;
}
.contenedor form input:nth-of-type(1):checked ~ .labels label {
  transform: translateY(-0%);
}
.contenedor form input:nth-of-type(2):checked ~ .labels label {
  transform: translateY(-100%);
}
.contenedor form input:nth-of-type(3):checked ~ .labels label {
  transform: translateY(-200%);
}
.contenedor form input:nth-of-type(4):checked ~ .labels label {
  transform: translateY(-300%);
}
.contenedor form input:nth-of-type(5):checked ~ .labels label {
  transform: translateY(-400%);
}
.contenedor form input:nth-of-type(6):checked ~ .labels label {
  transform: translateY(-500%);
}
.contenedor form input:nth-of-type(7):checked ~ .labels label {
  transform: translateY(-600%);
}
.contenedor form .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.contenedor form .labels label {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2B2B38;
  z-index: 0;
  transition: all 0.75s cubic-bezier(0.75, 0.25, 0, 1.05);
}
.contenedor form .labels label:nth-child(odd) {
  background-color: #F5004F;
  color: white !important;
}

/* Fancy style */
body {
  font-family: "Open sans", sans-serif;
  font-size: 16px;
  font-weight: 100;
  color: white;
}

.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 110px;
}
.content .block {
  width: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  margin: 42px 0;
  display: flex;
  justify-content: center;
}
.content .block span, .content .block span i {
  margin: 0 42px;
}
.content .block span i {
  margin-bottom: 22px;
}
.content .block span i:before {
  font-size: 30px;
}

.Slide:nth-child(even) .content .block {
  color: #717171;
}

.icon {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  font-size: 11px;
  text-align: center;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
.icon i {
  font-size: 22px;
}

#Slide5 .content .block {
  flex-direction: column;
}
#Slide5 .content .block i {
  margin: 0 12px;
  vertical-align: middle;
}

strong {
  font-weight: 400;
}

h1 {
  text-transform: uppercase;
}

ol {
  text-align: left;
  list-style-type: decimal;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.25s linear;
}
a:hover {
  color: rebeccapurple;
}

4. Follow the author’s instructions while using this snippet in your project.

/*
@author Alberto Hartzet 
*
*I wouldn't mind if you use this piece of code in your project as long 
as you give credit with a link to my site. www.albertohartzet.com
*
Licence (CC BY-NC-SA 4.0) http://creativecommons.org/licenses/by-nc-sa/4.0/
*/

That’s all! hopefully, you have successfully created a one-page vertical navigation on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X