快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

菜单 Menu

概述

菜单按照应用场景划分为Web菜单和Mobile菜单

Web 菜单

用法:设置类j-menu。如:

<div class="j-docker" bg="white" style="border-top:3px solid #2db755">
    <header class="j-header j-container">
        <div class="j-logo">
            <a href="#">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="j-menu">
            <ul>
                <li class="current-menu-item"><a href="">首页</a></li>
                <li><a href="">解决方案</a></li>
                <li class="menu-item-has-children"><a href="">产品中心</a>
                    <ul class="sub-menu">
                        <li class="current-menu-item"><a href="">1啊风点景</a></li>
                        <li><a href="">1啊撒地</a></li>
                        <li>啊啊啊</li>
                    </ul>
                </li>
                <li><a href="">接入指引</a></li>
                <li><a href="">积木学院</a></li>
            </ul>
        </div>
        <div class="j-user-entry">
            <a href="" class="j-badge">
                <i class="j-user-entry-i iconfont icon_cart"></i>
                <sup class="j-badge-content j-is-fixed j-type-danger">9</sup>
            </a>
            <a href="" class="j-badge">
                文本
                <sup class="j-badge-content j-is-fixed j-type-danger j-is-dot"></sup>
            </a>
            <span class="j-badge">
                <button class="user-entry-avator" style="background-image:url('images/avatar.png');"></button>
                <sup class="j-badge-content j-is-fixed j-type-danger j-is-dot"></sup>
            </span>
            <span class="j-badge">
                <button type="success">登录</button>
                <sup class="j-badge-content j-is-fixed j-type-danger j-is-dot"></sup>
            </span>
        </div>
    </header>
</div>
Mobile 菜单

用法:设置类j-m-menu。DEMO如底栏:

<div class="j-m-menu">
    <ul class="m-menu-box">
        <li class="m-menu-item">
            <a href="">
                <span><i class="iconfont icon_home_fill"></i>首页</span>
            </a>
        </li>
        <li class="m-menu-item">
            <a href="">
                <span><i class="iconfont icon_home_fill"></i>首页</span>
            </a>
            <ul class="j-none">
                <li><a href="">测试子分类</a></li>
                <li><a href="">测试子分类</a></li>
                <li><a href="">测试子分类</a></li>
            </ul>
        </li>
        <li class="m-menu-item">
            <a href="">
                <span><i class="iconfont icon_home_fill"></i>首页</span>
            </a>
            <ul class="j-none">
                <li><a href="">测试子分类</a></li>
                <li><a href="">测试子分类</a></li>
                <li><a href="">测试子分类</a></li>
            </ul>
        </li>
        <li class="m-menu-item m-menu-selected">
            <a href="">
                <span class="j-badge">
                    <i class="iconfont icon_cart_fill"></i>购物车
                    <sup class="j-badge-content j-is-fixed j-type-danger">99+</sup>
                </span>
            </a>
        </li>
        <li class="m-menu-item m-menu-selected">
            <a href="">
                <span><i class="iconfont icon_user_fill"></i>我的</span>
            </a>
            <ul class="j-block">
                <li><a href="">测试子分类</a></li>
                <li><a href="">测试子分类</a></li>
                <li><a href="">测试子分类</a></li>
            </ul>
        </li>
    </ul>
</div>
 
上一章:表格 Table
下一章:面包屑 Breadcrumb