Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWeb Page and Site Features

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Expandable Menu Items Without JavaScript

Sometimes, menu items are expanded to reveal sub-items to tap on. Generally, the functionality is maintained with JavaScript.

JavaScript is unnecessary when the HTML details tag is used.

Below is an example navigation menu. It contains 2 expandable menu items.

The example is constructed with only HTML and content. No CSS. No JavaScript.

Tap the "Opportunities" item or the "Products & Services" item to see how it works.

Home
Opportunities
Bottle Washer (great pay)
Commissioned Sales
Products & Services
Red, Gold-Flecked Whirligig
Trip to Space
Lunch with Will Bontrager
Contact
About Us

Because no CSS is used in the example, the details tag is rendered according to the browser's defaults. Browsers tend to do a pretty good job using their default styles.

You may add CSS for your special design, of course.

How the details Tag Is Constructed

Let's look at the HTML for the "Opportunities" item by itself to see how the details tag is constructed.

<details>
   <summary>Opportunities</summary>
   <div style="margin-left:2em;">
       <a href="https://example.com/bottle-washer.html">Bottle Washer (great pay)</a>
       <br><a href="https://example.com/commissioned-sales.html">Commissioned Sales</a>
   </div>
</details>

The first and last lines of the above source code are the begin and end details tag. The content is between those two tags.

The blue colored section is the summary tag with text. The text in the summary tag is published when the page is first loaded.

The red colored section contains the text that is revealed when the blue summary text is tapped. The red content is composed of HTML markup and text for positioning and for navigation menu links.

Now, here is the code for the entire example that is located near the beginning of this article.

<div><a href="https://example.com/">Home</a></div>

<details>
   <summary>Opportunities</summary>
   <div style="margin-left:2em;">
       <a href="https://example.com/bottle-washer.html">Bottle Washer (great pay)</a>
       <br><a href="https://example.com/commissioned-sales.html">Commissioned Sales</a>
   </div>
</details>

<details>
   <summary>Products & Services</summary>
   <div style="margin-left:2em;">
       <a href="https://example.com/red-whirligig.html">Red, Gold-Flecked Whirligig</a>
       <br><a href="https://example.com/space-trip.html">Trip to Space</a>
       <br><a href="https://example.com/lunch-with-will.html">Lunch with Will Bontrager</a>
   </div>
</details>

<div><a href="https://example.com/contact.html">Contact</a></div>

<div><a href="https://example.com/about-us.html">About Us</a></div>

For easier differentiation, only the content of the details tag are color coded in the above source code.

For a quick manual installation, this expandable navigation menu generally is faster to implement than anything that uses JavaScript to expand/collapse menu items.

It's easy to remember, too:

  1. Type the <details></details> tag into the web page source code.

  2. Stick in the <summary>Visible Text</summary> tag.

  3. Any other content you stick into the <details></details> tag is displayed when the summary text is tapped.

The technique can be used for functionality other than navigation menu links, too. A Frequently Asked Questions page, for example, where the question is tapped and the answer appears immediately below the question.

And a bonus: Because it does not rely on JavaScript, this expandable menu technique can be used in HTML emails.

(This article first appeared in Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

Support Area – Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC