Simple Side Navigation

INFORMATION & CODE

Simple Side Navigation

What It Does

This code provides the foundational structure and styling for a retro-themed, two-column webpage layout featuring a vertical side navigation bar. At a glance, the HTML and CSS create a centered container divided into two distinct vertical sections: a dark-themed left column (.col-left) that houses a set of retro-styled text links (Home, About, Services, and Contact), and a right column (.col-right) meant to serve as the main content area. The aesthetic is heavily inspired by classic arcade games or early digital interfaces, utilizing pixel-art style Google Fonts ("Press Start 2P" and "VT323") and a bright green-on-dark-gray color scheme that changes to white when focused.

How It Works

The functionality of this snippet relies on a combination of semantic HTML5 structure and foundational CSS layout properties. In the HTML document, external resources such as a custom favicon, Google Fonts, and FontAwesome icons are loaded in the <head> to establish the visual theme. The body contains an outer wrapper holding a header box (.link_box) and a main container (.outer_page) split into left and right columns.

The CSS uses a global box-sizing: border-box rule to ensure padding and borders are included in element width and height calculations. The body is configured using Flexbox to center the entire interface vertically and horizontally within the browser window with a light gray background. The two columns utilize traditional float: left positioning, where the left column takes up 15% of the layout’s width with a dark gray background (#333), and the right column takes up the remaining 85% with a solid border. The navigation links (a.nav) are styled as block elements with custom positioning, a line-height that spaces them out vertically, and a vibrant green color (#0f0) that shifts to pure white (#fff) when the user tabs to or clicks on them.

How to Use It

To use this code, simply copy the HTML portion into a .html file (for example, index.html) and the CSS portion into a separate stylesheet (such as style.css), ensuring the stylesheet is linked in the HTML <head> if separated. Alternatively, you can place the CSS inside a <style> tag directly within the HTML document's head.

Once set up, you can customize the layout to fit your project:

Add Content: Insert your main text, images, or components inside the <div class="col-right"> to populate the primary content area of the page.
Update Links: Replace the href="#" placeholders in the navigation anchor tags with actual URLs or internal page anchors (e.g., #about, #contact).
Modify Styling: Adjust the width percentages of .col-left and .col-right if you want a wider or narrower side navigation, or change the color hex codes in the CSS to match your preferred color palette.

HTML


                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Side Navigation</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>

  </head>
  <body>
    
    <div class="link_box">
      <h3>Simple Side Navigation »</h3>
          
    </div>
    <div class="outer_page">
      <div class="col-left">
        <a href="#" class="nav" target="_blank">HOME</a>
        <a href="#" class="nav" target="_blank">ABOUT</a>
        <a href="#" class="nav" target="_blank">SERVICES</a>
        <a href="#" class="nav" target="_blank">CONTACT</a>
      </div>
      <div class="col-right">
        
      </div>
    </div>
  </body>
</html>

CSS


                * {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-size: 16px;
  line-height: 1.5;
}

.col-left {
  float: left;
  width: 15%;
  height: 81.5vh;
  background-color: #333;
}
                  
.col-right {
  float: left;
  width: 85%;
  height: 81.5vh;
  border: 1px solid #333
}
                  
a.nav {
  position: relative;
  top: 30px;
  left: 20px;
  display: block;
  line-height: 3;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #0f0;
  font-size: 18px;
  font-weight: 700;
}
                  
a.nav:focus {
  color: #fff;
}

MENU

INFORMATION & CODE