Create a Stylish Vertical Navigation – a Comprehensive Guide
The Navigation should be designed so that both users and search engines can easily find the most important pages of the website. Navigations exist in all shapes and colors. The vertical navigation is a menu in which the links are shown as a vertical list. This type of navigation provides a clear presentation of the menu items and ensures easy user guidance on the website.
Vertical navigation has some advantages over horizontal navigation. This is especially true for complex websites that consist of a large number of categories and pages.
Basics of the Vertical Navigation
The vertical navigation bar is often displayed as the left or right sidebar on the website.
A navigation consists of a list of links. That means, the unordered list is semantically correct to build the vertical navigation bar. Thus, we have three nested HTML elements that can be styled using CSS to create an attractive navigation.
There are two main types of navigation, each suitable for different types of websites and devices:
-
The global navigation is the same on each page of the website. It contains links to the most important pages and provides the user with a consistent way to access sub-pages.
-
The hierarchical navigation is context-related. It changes depending on the page on which it is displayed. This type of navigation is particularly recommended for websites with many pages and a large amount of categories.
Fundamental Styling Techniques for the Vertical Navigation
An unordered list has a specific style by default. The list has a vertical spacing of 1em (Margin) at the top and bottom, and an indent of 40px on the left side (Padding). A bullet point is inserted as a marker in front of each list item.
The default properties of UL are not suitable for a navigation. They have to be changed:
Default Settings of UL for the Navigation
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
By default, the LI element is a block element. Each list item starts on a new line.
Make Links Become Buttons
We use Custom Properties to design the layout of the navigation. It is common practice to define Custom Properties for the :root pseudo-class so that they can be referenced globally. They are always prefixed by --. This makes it particularly easy to customize the navigation menu. The CSS function var(…) is used to access Custom Properties.
To make the link work as a button, it is converted to a block element. The main advantage of this is that the entire rectangular area can be clicked or tapped, not only the link itself.
Create buttons for the navigation so that the entire area reacts like a button, but without graphics.
Display Links as Clickable Buttons
:root {
--vNavBG: #90ee90;
--vNavFG: #000000;
--vNavHoverBG: #90bb90;
--vNavHoverFG: #ffffff;
}
nav li a {
display: block;
padding: 0.5em 1em;
font-weight: bold;
text-decoration: none;
background: var(--vNavBG);
color: var(--vNavFG);
}
nav li a:hover {
background: var(--vNavHoverBG);
color: var(--vNavHoverFG);
}
Style the Vertical Navigation
The design of the vertical navigation is of central importance for the user-friendliness of a website. A well-designed navigation should be easy to understand and have a logical structure. It must be easy to read and intuitive to use. The graphic representation using background and font colors as well as the arrangement of the elements and the spacing between them are the key factors here.
Style the Vertical Navigation with CSS Buttons
/* Style Vertical Navigation */
:root {
--vNavWidth: 12em;
--vNavBG: #cccccc;
--vNavFG: #000000;
--vNavHoverBG: #999999;
--vNavHoverFG: #ffffff;
--vNavLineColor: #ffffff;
--vNavBorderColor: #000000;
--vNavBorderWidth: 1px;
}
nav {
margin: 0 0 0.5em 0;
width: var(--vNavWidth);
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
border: var(--vNavBorderWidth) solid var(--vNavBorderColor);
}
nav ul li {
margin: 0;
padding: 0;
border-bottom: var(--vNavBorderWidth) solid var(--vNavLineColor);
}
nav ul li:last-child {
border-bottom: none;
}
nav a {
display: block;
margin: 0;
padding: 0.5em 1em;
text-decoration: none;
background: var(--vNavBG);
color: var(--vNavFG);
}
nav a:hover {
background: var(--vNavHoverBG);
color: var(--vNavHoverFG);
}
/* Dummy Text Styles */
#mainContent {
margin-left: calc(var(--vNavWidth) + 1em);
}
#mainContent h2 {
margin: 0 0 0.83em 0;
padding: 0;
font-size: 1.25em;
color: #990000;
}
#mainContent p {
color: #990099;
}
Create the Vertical Navigation
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Service</a></li>
<li><a href="#">Promos and Deals</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="mainContent">
<h2>Main Content of the Page</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum zzril delenit augue.</p>
<p>ad minim veniam, quis nostrud exerci tation ullamcorper nis laboris ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate.</p>
</div>
Vertical Navigation with CSS Buttons
Create a Vertical Full-Height Sidebar
Horizontal navigation is the standard in web design today. However, not that long ago, the vertical navigation was the preferred type of navigation. The vertical navigation has a number of advantages over the horizontal navigation. Today, it is usually found as a fixed navigation in the left or right sidebar.
Basis for the fixed vertical navigation is the CSS declaration position: fixed.
The following CSS code is used to fix the navigation in the left column of the layout:
Basic Styles for the Fixed Vertical Navigation
/* Fixed Navigation Properties */
:root {
--sideNavWidth: 12em;
--sideNavBG: #cccccc;
--sideNavFG: #000000;
}
nav {
position: fixed;
width: var(--sideNavWidth);
height: 100%;
top: 0;
left: 0;
overflow-y: auto;
}
/* Standard Styles for the Main Content (Right Column) */
#mainContent {
margin-left: calc(var(--sideNavWidth) + 1em);
}
What Must Be Considered When Using the Fixed Vertical Navigation?
-
A width must be specified for the fixed navigation.
-
The right-hand main column must be indented with
margin-leftas far as the fixed navigation is wide. Otherwise the navigation would overlap a part of the content. Extra white space should be added to create space between the two columns. -
With
overflow-y: visible, the navigation remains usable even if the height of the navigation bar is greater than the screen height.
The following sample code will show you how to create a fixed vertical navigation:
Styles for the Fixed Vertical Navigation with CSS Buttons
/* Style the Fixed Vertical Navigation */
:root {
--sideNavWidth: 12em;
--sideNavBG: #cccccc;
--sideNavFG: #000000;
--sideNavHoverBG: #999999;
--sideNavHoverFG: #ffffff;
--sideNavActiveBG: #04aa6d;
--sideNavActiveFG: #ffffff;
--sideNavLineColor: #ffffff;
--sideNavBorderColor: #000000;
--sideNavBorderWidth: 1px;
}
nav {
position: fixed;
margin: 0 0 0.5em 0;
width: var(--sideNavWidth);
height: 100%;
top: 0;
left: 0;
background: var(--sideNavBG);
border: var(--sideNavBorderWidth) solid var(--sideNavBorderColor);
overflow-y: auto;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
margin: 0;
padding: 0;
border-bottom: var(--sideNavBorderWidth) solid var(--sideNavLineColor);
}
nav ul li:last-child {
border-bottom: none;
}
nav a {
display: block;
margin: 0;
padding: 0.5em 1em;
text-decoration: none;
color: var(--sideNavFG);
}
nav a:hover:not(.active) {
background: var(--sideNavHoverBG);
color: var(--sideNavHoverFG);
}
nav li a.active {
background: var(--sideNavActiveBG);
color: var(--sideNavActiveFG);
}
/* Styles for the Dummy Text */
#mainContent {
margin-left: calc(var(--sideNavWidth) + 1em);
}
#mainContent h2 {
margin: 0 0 0.83em 0;
padding: 0;
font-size: 1.25em;
color: #990000;
}
#mainContent p {
color: #990099;
}
Create the Fixed Vertical Navigation
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Service</a></li>
<li><a href="#">Promos and Deals</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="mainContent">
<h2>Main Content of the Page</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum zzril delenit augue.</p>
<p>ad minim veniam, quis nostrud exerci tation ullamcorper nis laboris ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate.</p>
</div>
Fixed Vertical Navigation with Buttons
Resize the browser window to see what happens when the right column has more content and requires scrolling.
An element with position: fixed is taken out of the regular text flow and positioned relative to the viewport. The values of the top, right, bottom, and left properties determine the position of the element. When the page is scrolled, the element positioned in this way remains at its position in the viewport.
If the Sidebar from the last example is supposed to be fixed relative to a DIV instead of relative to the viewport, the CSS code must be changed as follows:The changes that need to be made in the CSS are highlighted by the background .
Styles for the Fixed Vertical Navigation Relative to a DIV
/* Styling the Fixed Sidebar */
:root {
--sideNavWidth: 12em;
--sideNavHeight: 20em;
--sideNavBG: #cccccc;
--sideNavFG: #000000;
--sideNavHoverBG: #999999;
--sideNavHoverFG: #ffffff;
--sideNavActiveBG: #04aa6d;
--sideNavActiveFG: #ffffff;
--sideNavLineColor: #ffffff;
--sideNavBorderColor: #000000;
--sideNavBorderWidth: 1px;
}
nav {
display: block;
margin: 0 0 0.5em 0;
width: var(--sideNavWidth);
height: var(--sideNavHeight);
background: var(--sideNavBG);
float: left;
border: var(--sideNavBorderWidth) solid var(--sideNavBorderColor);
overflow-y: auto;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
margin: 0;
padding: 0;
border-bottom: var(--sideNavBorderWidth) solid var(--sideNavLineColor);
}
nav ul li:last-child {
border-bottom: none;
}
nav a {
display: block;
margin: 0;
padding: 0.5em 1em;
text-decoration: none;
color: var(--sideNavFG);
}
nav a:hover:not(.active) {
background: var(--sideNavHoverBG);
color: var(--sideNavHoverFG);
}
nav li a.active {
background: var(--sideNavActiveBG);
color: var(--sideNavActiveFG);
}
/* Styles für den Dummy-Text */
#mainContent {
margin-left: calc(var(--sideNavWidth) + 1em);
max-height: var(--sideNavHeight);
overflow: auto;
}
#mainContent h2 {
margin: 0 0 0.83em 0;
padding: 0;
font-size: 1.25em;
color: #990000;
}
#mainContent p {
color: #990099;
}