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!
More Posts related to CSS,
- How to make jsfiddle bootstrap ready
- Horizontally Center Align tag in HTML using CSS
- reCAPTCHA Implementation Tutorial
- How to Center Align Image in Bootstrap
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- align image at middle of div element
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to place two div elements next to each other
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to set CSS background-Image Property
More Posts:- How to Gzip a file directory on Mac OS X using Terminal Command - Mac-OS-X
- [Solved] Mic not working on iPhone 7 after iOS 14 upgrade - Apple
- Setting up Cloud feature with Notepad++ - NotepadPlusPlus
- Find Mac version using terminal command - MacOS
- Unable to connect to the Internet : Google Chrome - Chrome
- Enable Spellcheck in eclipse workspace - Eclipse
- ls command sort by file size [Linix/UNIX/macOS/bash] - Linux
- How to enable line numbers in IntelliJ - HowTos