How to make a Descriptive menu using CSS lists – 5kb

As we received a good response to our first hands-on experience tutorial on CSS “Create beautiful form fields using CSS and images“, we finally decided to come up with the helpful tips on CSS, JavaScript, HTML, and other programming stuff or design resources in WittySparks.

I am also the one web designer and developer who always search for a simple but effective solution for each and every element of GUI or UI. As nowadays we are having many frameworks for UI and GUI, we always are in confusion to choose the right framework and a big question is why we should choose a framework? for the user interface, we are working on.

Web developers always try to reduce the load on page by using simple programming instead of using frameworks etc.

Here I have come up with a simple snippet but useful and only CSS based Descriptive menu using lists with expand/collapse or show/hide content, with no JavaScript :) and has only 5kb of file size excluding other data in page.

Lets start the tutorial:

1. Create a simple list with a small description within the paragraph of the particular menu item (can even say a product menu item) which needs a little explanation before they go into the right page. Can say another way of displaying tooltips with expand/collapse or show/hide feature. Create the same way as the sample code shown below.

In this anchor tag controls the main link of the item, paragraph content plays the role as expand/collapse or show/hide an item, the content within the small tag plays the role as a key category of the product or menu item and the text right after it is our product name or main menu item. Let’s place this list having class “boxedmenu” within a div which plays the role a base for the menu placement etc. and have the class to it as “baseofmenu”.

2. Here is the simple CSS which renders the above menu list in a fashionable Descriptive collapsible menu using CSS lists

body {
	font-family:Georgia, "Times New Roman", Times, serif;
}
.baseofmenu{
	height:104px;
	background-color:#99CC33;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	width: 760px;
}
.boxedmenu {
	list-style-type:none;
	display:block;
	margin: 0px;
	padding: 0px 5px 0px 5px;
	position: absolute;
	width: 750px;
}
.boxedmenu li{
	display:inline
}

/* Styling A link START */
.boxedmenu li a, .boxedmenu li a:link, .boxedmenu li a:visited{
	display: inline;
	text-decoration:none;
	font-size: 25px;
	background-color: #339966;
	color: #a3e9c6;
	margin: 10px 5px;
	padding: 10px;
	letter-spacing: 3px;
	border: 1px solid #306F4F;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	float:left;
	width: 29%;
}
.boxedmenu li a:hover, .boxedmenu li a:active{
	background-color: #206442;
	border-color: #a3e9c6;
	color: #fff;
}
/* Styling A link END */

/* Styling SMALL text item START */
.boxedmenu small{
	display:block;
	font-size:16px;
	background-color: #206442;
	padding: 0px 10px;
	margin: 0px -10px 5px -10px;
	line-height: 25px;
	color: #339966;
	letter-spacing: 8px;
}
.boxedmenu li a:hover small, .boxedmenu li a:active small{
	background-color: #339966;
	color: #206442;
}
/* Styling SMALL text item END */

/* Styling Paragraph within each menu item START */
.boxedmenu li a p {
	font-size: 11px;
	padding: 5px;
	margin: 0px;
	display: none;
}
.boxedmenu li a:hover p, .boxedmenu li a:active p{
	display: block;
}
/* Styling Paragraph within each menu item END */

Let me explain you the above CSS stylesheet:

.baseofmenu – class plays the role as a base for menu placement etc. which has a specific height, a light green background color with rounded corners and with a specific width, can be changed based on your requirement.

.boxedmenu – which is the main frame work for ul li list based menus which has specific position, padding, width etc.

.boxedmenu li – styling the anchor within the lists which are our menu items

.boxedmenu small – a small text which categorise the menu item

and yeh

.boxedmenu li a p – which plays the main tricky role in our CSS menu with just simple display as block and none

Summary: Hope you like this simple tricky collapse/expand or show/hide the Descriptive menu, then show some love by spreading this resource all over the web.