Menu List

Menu List is an extension of List View. Menu List unlike usual links list is designed to indicate currently active screen (or section) of your app. Think about it like a Tabbar but in a form of a list.

Let's look at layout structure of menu lists in your list views:

<div class="list menu-list">
  <ul>
    <li>
      <a href="#" class="item-content item-link item-selected">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>

Where

Example

menu-list.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">返回</span>
          </a>
        </div>
        <div class="title">菜单列表</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>菜单列表 unlike 通常的链接列表，设计用于表示您的应用程序当前活动屏幕（或部分）的状态。
          可以将其看作是一个带有图标和文本标签的列表</p>
      </div>
      <div class="list list-strong-ios list-outline-ios menu-list">
        <ul>
          <li>
            <a class="item-content item-link ${selected === 'home' ? 'item-selected' : ''}" @click=${()=>
              setItem('home')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">home</i>
                <i class="icon f7-icons if-not-md">house</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Home</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selected === 'profile' ? 'item-selected' : ''}" @click=${()=>
              setItem('profile')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">person</i>
                <i class="icon f7-icons if-not-md">person_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Profile</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selected === 'settings' ? 'item-selected' : ''}" @click=${()=>
              setItem('settings')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">settings</i>
                <i class="icon f7-icons if-not-md">gear_alt_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Settings</div>
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="list list-strong-ios list-outline-ios media-list menu-list">
        <ul>
          <li>
            <a class="item-content item-link ${selectedMedia === 'home' ? 'item-selected' : ''}" @click=${()=>
              setItemMedia('home')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">home</i>
                <i class="icon f7-icons if-not-md">house</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Home</div>
                </div>
                <div class="item-subtitle">Home subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selectedMedia === 'profile' ? 'item-selected' : ''}" @click=${()=>
              setItemMedia('profile')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">person</i>
                <i class="icon f7-icons if-not-md">person_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Profile</div>
                </div>
                <div class="item-subtitle">Profile subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selectedMedia === 'settings' ? 'item-selected' : ''}" @click=${()=>
              setItemMedia('settings')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">settings</i>
                <i class="icon f7-icons if-not-md">gear_alt_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Settings</div>
                </div>
                <div class="item-subtitle">Settings subtitle</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let selected = 'home';
    let selectedMedia = 'home';

    const setItem = (newItem) => {
      selected = newItem;
      $update();
    }
    const setItemMedia = (newItem) => {
      selectedMedia = newItem;
      $update();
    }
    return $render;
  }
</script>
Improve this Doc
On this page