• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
WittySparks / Technology / Programming / How to make a Descriptive menu using CSS lists – 5kb
CSS List Based Menu

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

Programming Updated: January 29, 2022 by Sravan K

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 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 pages 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 on the 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.

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”.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.

    EntertainmentCeleb Gossip
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.

    TechnologySoftwares
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.

    SportsLive Cricket
 

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 to 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 framework for ul li list-based menus which has a specific position, padding, width, etc.

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

.boxedmenu small – a small text which categorises 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.

Previous Post: « 15 Creative and Professional Portfolio Inspiration – Part 2
Next Post: A new popular font browser Flipping Typical »
Profile picture for Sravan K

About Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
  • Latest Java Technologies & Trends for 2020
  • Facts about React Native you are still unaware of!
  • Top JavaScript trends for 2020

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Footer

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest