Let's create a very simple Lightweight Pure CSS based Vertical Navigation Menu. We will not be using any jQuery or JavaScript.
First let us create a simple unordered list <ul> with list items <li> that will be our navigation bar options/links
Step 1 : CodeLanguage : HTML<ul class="nav">
<li class="nav-logo">LOGO</li>
<li class="nav-option">JAVA</li>
<li class="nav-option">PHP</li>
<li class="nav-option">CSS</li>
<li class="nav-option">JavaScript</li>
<li class="nav-option">SharePoint</li>
<li class="nav-option">Android</li>
</ul>
If you see the output of this on a web browser you would see all the elements as an unordered list with bullets (we need to add CSS right?).
STEP 1: OutputLOGO
JAVA
PHP
CSS
JavaScript
SharePoint
Android
Now let's add CSS properties to nav class: It's important to set the width to be 100% set margin and padding as 0.
Step 2.nav {
width:100%;
background:#e8e8e8;
margin: 0;
padding: 0;
border-top:1px solid #cfcfcf;
border-bottom:1px solid #cfcfcf;
}
Step 2: Output
To display list items next to each other we need to use property display:inline
Step 3.nav li {
display: inline;
line-height: 37px;
padding:10px;
display:inline;
}
CSS Menu Output Step 3
Step 3 Output: Nav Options now displayed next to each other.
We are almost done, let's remove anchor tag text-decoration and add some hover effects.
Step 4 : CodeLanguage : CSS.nav-logo {
background:#d8d8d8;
border-right:1px solid #b8b8b8;
border-left:1px solid #ccc;
}
.nav-logo a {
text-decoration:none;
color:#222;
font-size:18px;
}
.nav-option a {
text-decoration:none;
color:#111;
font-size:18px;
}
.nav-option {
background:#e8e8e8;
}
.nav-option:hover {
background:#ddd;
}
Final Demo
Demo on JSFiddle: https://jsfiddle.net/code2care/ax578793
Note: This is not a responsive design navigation menu.
Have Questions? Post them here!
- How to make jsfiddle bootstrap ready
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to hide toolbar on Notepad++ - NotepadPlusPlus
- Notepad++ display files on tab bar as horizontal instead of vertical - NotepadPlusPlus
- Error: Failed to validate the signature of the actionable message card - Power Automate Flow - PowerAutomate
- How to enable more encoding support in Mac Terminal - MacOS
- [Maven] Multiple annotations found at this line pom.xml CoreException, ArtifactResolutionException - Java
- Turn off Startup Sound on Mac running on macOS Ventura - MacOS
- Enable macOS Stage Manager - MacOS
- Error:The SDK Build Tools revision (XX.X.X) is too low for project. Minimum required is XX.X.X - Android