Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu


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: Output
LOGO
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!
Advertisements
Try Out Code2care Dev Tools:

Advertisements



#Android #Java #Linux #Microsoft #Google #Python #MacOS #Notepad++ #Microsoft Teams #CSS #PHP #SharePoint #Html #Linux #C-Program #Bootstrap #jQuery #Sublime #Android-Studio #Facebook #Eclipse #WhatsApp #News #MySQL #Json #HowTos #JavaScript #FTP #S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency