Skip to content
Bots!
Bots!
  • About
    • Myself
    • আমার দোয়া
  • Bookmarks
    • Bookmarks
    • My OCI Bookmarks
    • Useful Proxmox Commands & Links
    • Learning Nano
    • Useful Sites
    • Useful Virtualbox Command
    • Useful MySQL Command
    • Useful Linux Command
    • BTT-CAS
  • Resources
    • Webinar on Cloud Adoption for Project Managers
  • Photos
  • Videos
  • Downloads
Bots!

Vertical CSS menu

Rumi, August 16, 2009

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML /and CSS. Our menus are actually HTML unordered list elements <ul> styled using CSS, giving them background color, margin, padding and other CSS attributives.
The process of creating this menus can be separated in two main directives:

The HTML file
Create the HTML document containing main directives like HTML HEAD BODY and also including your menu mock up made up with a list like this example:

<div id=”menu1″>
<ul>
<li><a href=”item-one.html” id=”current”>Menu item one</a></li>
<li><a href=”menu-item-two.html”>Menu item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

What the above code those is it creates a box element entitled a DIV identified by its ID=”menu” witch in turn contains an unordered list <ul> of elements <li>.
Every list element is considered a menu item that contains a link to a page on your website <a href=”contact.html”>Contact</a>.

The CSS styling
Now that we have our basic HTML file containing our menu we need to style that menu so it can fit with our website.

This is the CSS code used for styling the first menu:

In this portion we style the main DIV containing the menu, everything that represents our menu resides in this box.
For the purpose of this tutorial we are floating the menus left so they can stay aligned next to each other.

#menu1 {
width: 200px;
float:left;
}

In this portion we style the actual list, containing the list items. This is the place were we decide on our font-type, size, margin, padding and of course the list style. We are using list-style-type:none; so our list items wont display anything in front of them.

#menu1 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}

In this portion we apply a CSS property to our List elements that makes our menu look the same on Internet Explorer and other browsers.

#menu1 li
{
display: inline;
/* for IE5 and IE6 */
}

In this portion we style the LINK that is reside inside the list element. The reason we are not styling the LI element is that by styling the LINK (a href) we can make the clickable menu area spread along the whole list element, using display: block;

#menu1 a
{
color: #fff;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #686C7A;
border-bottom: 1px solid #eee;
}

In this portion we style visited and active state of our links (menu items, a href).

#menu1 a:link, #menu1 a:visited
{
color: #EEE;
text-decoration: none;
}

In this portion we style the hover state of our links (menu items). The attributes we use here are applied to the a menu item when we move our mouse cursor over it.

#menu1 a:hover
{
background-color: #00BEE4;
color: #fff;
}

In this portion we style the current state of our link (menu item). If we click the Contact menu item (link) and are now browsing the contact page, we need our menu to always highlight the page we are currently browsing. This attributes are applied to the a href containing the additional id=”current”
<a href=”item-one.html” id=”current”>

#menu1 li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}

All you need to do now is append the desired CSS styling to your own website CSS files and insert the HTML menu code in your HTML files.

Scripts

Post navigation

Previous post
Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Myself…

Hi, I am Hasan T. Emdad Rumi, an IT Project Manager & Consultant, Virtualization & Cloud Savvyfrom Dhaka, Bangladesh. I have prior experience in managing numerous local and international projects in the area of Telco VAS & NMC, National Data Center & PKI Naitonal Root and CA Infrastructure. Also engaged with several Offshore Software Development Team.

Worked with Orascom Telecom-Banglalink, Network Elites as VAS partner, BTRC, BTT (Turkey) , Mango Teleservices Limited and Access to Informaiton (A2I-UNDP)

Currently working at Oracle Corporation as Principal Technology Solution and Cloud Architect.

You can reach me [h.t.emdad at gmail.com] and I will be delighted to exchange my views.

Tags

Apache Bind Cacti CentOS CentOS 6 CentOS 7 Debain Debian Debian 10 Debian 11 Debian 12 DKIM Docker endian icinga iptables Jitsi LAMP Letsencrypt Linux Munin MySQL Nagios Nextcloud NFS nginx pfsense php Postfix powerdns Proxmox RDP squid SSH SSL Ubuntu Ubuntu 16 Ubuntu 18 Ubuntu 20 Varnish virtualbox vpn Webmin XCP-NG zimbra

Topics

Recent Posts

  • Install Jitsi on Ubuntu 22.04 / 22.10 April 30, 2025
  • Key Lessons in life April 26, 2025
  • Create Proxmox Backup Server (PBS) on Debian 12 April 19, 2025
  • Add Physical Drive in Proxmox VM Guest April 19, 2025
  • Mount a drive permanently with fstab in Linux April 16, 2025
  • Proxmox 1:1 NAT routing March 30, 2025
  • Installation steps of WSL – Windows Subsystem for Linux March 8, 2025
  • Enabling Nested Virtualization In Proxmox March 8, 2025
  • How to Modify/Change console/SSH login banner for Proxmox Virtual Environment (Proxmox VE / PVE) March 3, 2025
  • Install Proxmox Backup Server on Debian 12 February 12, 2025

Archives

Top Posts & Pages

  • Install Jitsi on Ubuntu 22.04 / 22.10
©2025 Bots! | WordPress Theme by SuperbThemes