垦荒学园

English

简体中文

English

简体中文

Toggle theme

Foundation Lists ​

Foundation provides multiple list styles for creating navigation menus, content lists, and more. This chapter will introduce various uses of Foundation lists.

Basic Menu ​

Use the .menu class to create a basic menu:

html
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Vertical Menu ​

Use the .vertical class to create a vertical menu:

html
<ul class="vertical menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Center Aligned ​

html
<ul class="menu align-center">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
</ul>

Right Aligned ​

html
<ul class="menu align-right">
    <li><a href="#">Login</a></li>
    <li><a href="#">Register</a></li>
</ul>

Expanded ​

html
<ul class="menu expanded">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Active State ​

Use .is-active to mark the current item:

html
<ul class="menu">
    <li class="is-active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Nested Menu ​

Create multi-level nested menus:

html
<ul class="vertical menu">
    <li>
        <a href="#">Products</a>
        <ul class="nested vertical menu">
            <li><a href="#">Product A</a></li>
            <li><a href="#">Product B</a></li>
            <li>
                <a href="#">Product C</a>
                <ul class="nested vertical menu">
                    <li><a href="#">C-1</a></li>
                    <li><a href="#">C-2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
</ul>

Combine with icons:

html
<ul class="vertical menu">
    <li><a href="#"><i class="fi-home"></i> Home</a></li>
    <li><a href="#"><i class="fi-torso"></i> Profile</a></li>
    <li><a href="#"><i class="fi-widget"></i> Settings</a></li>
    <li><a href="#"><i class="fi-mail"></i> Messages</a></li>
    <li><a href="#"><i class="fi-power"></i> Logout</a></li>
</ul>

Icon-Only Menu ​

html
<ul class="menu icons icon-top">
    <li><a href="#"><i class="fi-home"></i><span>Home</span></a></li>
    <li><a href="#"><i class="fi-torso"></i><span>User</span></a></li>
    <li><a href="#"><i class="fi-widget"></i><span>Settings</span></a></li>
</ul>

Simple Menu ​

Use the .simple class to create a clean menu:

html
<ul class="menu simple">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

Menu Text ​

Use .menu-text to add non-link text:

html
<ul class="menu">
    <li class="menu-text">Website Name</li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
</ul>

Responsive Menu ​

Change direction based on screen size:

html
<ul class="vertical medium-horizontal menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Drilldown Menu ​

Multi-level drilldown menu:

html
<ul class="vertical menu" data-drilldown>
    <li>
        <a href="#">Products</a>
        <ul class="vertical menu">
            <li>
                <a href="#">Electronics</a>
                <ul class="vertical menu">
                    <li><a href="#">Phones</a></li>
                    <li><a href="#">Computers</a></li>
                </ul>
            </li>
            <li><a href="#">Home Goods</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul class="vertical menu">
            <li><a href="#">Consulting</a></li>
            <li><a href="#">Technical Support</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
</ul>

Definition Lists ​

Basic Definition List ​

html
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, used to create web page structure.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used to style web pages.</dd>

    <dt>JavaScript</dt>
    <dd>Scripting language used to implement web page interactions.</dd>
</dl>

Horizontal Definition List ​

html
<style>
    .horizontal-dl {
        display: flex;
        flex-wrap: wrap;
    }
    .horizontal-dl dt {
        flex: 0 0 30%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .horizontal-dl dd {
        flex: 0 0 70%;
        margin-bottom: 10px;
        margin-left: 0;
    }
</style>

<dl class="horizontal-dl">
    <dt>Product Name</dt>
    <dd>Foundation Framework</dd>
    <dt>Version</dt>
    <dd>6.7.5</dd>
    <dt>Developer</dt>
    <dd>ZURB</dd>
</dl>

Unordered List Styles ​

Bulletless List ​

html
<ul class="no-bullet">
    <li>List item without bullets</li>
    <li>List item without bullets</li>
    <li>List item without bullets</li>
</ul>

Custom Bullets ​

html
<style>
    ul.custom-bullet li::before {
        content: "→ ";
        color: #1779ba;
    }
    ul.custom-bullet {
        list-style: none;
        padding-left: 0;
    }
</style>

<ul class="custom-bullet">
    <li>Custom bullet list</li>
    <li>Using arrows as bullets</li>
    <li>More visually appealing</li>
</ul>

Lists with Cards ​

html
<ul class="no-bullet">
    <li class="card" style="margin-bottom: 10px;">
        <div class="card-section">
            <h5>List Item Title 1</h5>
            <p>List item description content...</p>
        </div>
    </li>
    <li class="card" style="margin-bottom: 10px;">
        <div class="card-section">
            <h5>List Item Title 2</h5>
            <p>List item description content...</p>
        </div>
    </li>
</ul>

Media List ​

html
<style>
    .media-list {
        list-style: none;
        padding: 0;
    }
    .media-list li {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }
    .media-list .media-image {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        margin-right: 15px;
    }
    .media-list .media-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .media-list .media-body h5 {
        margin-bottom: 5px;
    }
    .media-list .media-body p {
        color: #666;
        margin: 0;
    }
</style>

<ul class="media-list">
    <li>
        <div class="media-image">
            <img src="https://via.placeholder.com/80" alt="Article Image">
        </div>
        <div class="media-body">
            <h5>Article Title</h5>
            <p>This is a brief description of the article, introducing its main content...</p>
            <small class="text-muted">2024-01-15</small>
        </div>
    </li>
    <li>
        <div class="media-image">
            <img src="https://via.placeholder.com/80" alt="Article Image">
        </div>
        <div class="media-body">
            <h5>Another Article</h5>
            <p>This is another brief article description...</p>
            <small class="text-muted">2024-01-14</small>
        </div>
    </li>
</ul>

Complete Example ​

html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Lists Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        .menu a i { margin-right: 8px; }

        .media-list { list-style: none; padding: 0; }
        .media-list li {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #eee;
            background: white;
        }
        .media-list .media-image {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            margin-right: 15px;
        }
        .media-list .media-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }
        .media-list .media-body h5 { margin-bottom: 5px; }
        .media-list .media-body p { color: #666; margin: 0; font-size: 14px; }

        ul.custom-bullet { list-style: none; padding-left: 0; }
        ul.custom-bullet li::before {
            content: "✓ ";
            color: #3adb76;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Lists Showcase</h1>

        <div class="demo-section">
            <h3>Horizontal Menu</h3>
            <ul class="menu">
                <li class="is-active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Menu Alignment</h3>
            <p>Center Aligned:</p>
            <ul class="menu align-center">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <p>Right Aligned:</p>
            <ul class="menu align-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">Register</a></li>
            </ul>
            <p>Expanded:</p>
            <ul class="menu expanded">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Vertical Menu</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li class="is-active"><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li><a href="#"><i class="fi-home"></i> Home</a></li>
                        <li><a href="#"><i class="fi-torso"></i> Profile</a></li>
                        <li><a href="#"><i class="fi-widget"></i> Settings</a></li>
                        <li><a href="#"><i class="fi-mail"></i> Messages</a></li>
                        <li><a href="#"><i class="fi-power"></i> Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Nested Menu</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li>
                            <a href="#">Product Categories</a>
                            <ul class="nested vertical menu">
                                <li><a href="#">Electronics</a></li>
                                <li><a href="#">Home Goods</a></li>
                                <li>
                                    <a href="#">Apparel</a>
                                    <ul class="nested vertical menu">
                                        <li><a href="#">Men</a></li>
                                        <li><a href="#">Women</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Simple Menu</h3>
            <ul class="menu simple">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Menu with Text</h3>
            <ul class="menu">
                <li class="menu-text">Website Name</li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Bulletless List</h3>
            <ul class="no-bullet">
                <li>Bulletless list item 1</li>
                <li>Bulletless list item 2</li>
                <li>Bulletless list item 3</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Custom Bullet List</h3>
            <ul class="custom-bullet">
                <li>Custom bullet list item 1</li>
                <li>Custom bullet list item 2</li>
                <li>Custom bullet list item 3</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Definition List</h3>
            <dl>
                <dt>HTML</dt>
                <dd>HyperText Markup Language, used to create web page structure.</dd>
                <dt>CSS</dt>
                <dd>Cascading Style Sheets, used to style web pages.</dd>
                <dt>JavaScript</dt>
                <dd>Scripting language used to implement web page interactions.</dd>
            </dl>
        </div>

        <div class="demo-section">
            <h3>Media List</h3>
            <ul class="media-list">
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="Image">
                    </div>
                    <div class="media-body">
                        <h5>Foundation 6 Release</h5>
                        <p>Foundation 6 brings new features and improvements...</p>
                        <small class="text-muted">2024-01-15</small>
                    </div>
                </li>
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="Image">
                    </div>
                    <div class="media-body">
                        <h5>Responsive Design Best Practices</h5>
                        <p>Learn how to create responsive websites with Foundation...</p>
                        <small class="text-muted">2024-01-14</small>
                    </div>
                </li>
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="Image">
                    </div>
                    <div class="media-body">
                        <h5>CSS Grid vs Flexbox</h5>
                        <p>Understanding the pros and cons of both layout methods...</p>
                        <small class="text-muted">2024-01-13</small>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Drilldown Menu</h3>
            <div style="max-width: 300px;">
                <ul class="vertical menu" data-drilldown style="max-width: 300px;">
                    <li>
                        <a href="#">Products</a>
                        <ul class="vertical menu">
                            <li>
                                <a href="#">Electronics</a>
                                <ul class="vertical menu">
                                    <li><a href="#">Phones</a></li>
                                    <li><a href="#">Computers</a></li>
                                    <li><a href="#">Tablets</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Home Goods</a></li>
                            <li><a href="#">Apparel</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Services</a>
                        <ul class="vertical menu">
                            <li><a href="#">Consulting</a></li>
                            <li><a href="#">Technical Support</a></li>
                        </ul>
                    </li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

List Best Practices ​

  1. Semantic: Use appropriate list elements (ul, ol, dl)
  2. Accessibility: Ensure navigation menus can be operated via keyboard
  3. Responsiveness: Consider display effects on different screen sizes
  4. State Feedback: Use .is-active to mark current state
  5. Consistency: Maintain consistent list styles

Summary ​

In this chapter, we learned:

  • Horizontal and vertical menus
  • Menu alignment and active states
  • Nested menus and Drilldown menus
  • Menus with icons
  • Unordered lists and definition lists
  • Media lists

Next chapter, we will learn Foundation Tabs.

Tip: Lists are one of the most commonly used elements in web pages. Using Foundation's menu classes wisely can help you quickly create beautiful navigation.

Content is for learning and research only.

Copyright 2026 Kenhuang Academy. All Rights Reserved. About