基础菜单Base Menu

<div class="menu base">
    <div><a href="#">Home</a></div>
    <div><a href="#">Clothing</a></div>
    <div><a href="#">Electronics</a></div>
</div>

扩展Extended

可选用激活项class="active",可添加图标及徽章

<div class="menu base">
    <div class="active"><a href="#">Active</a></div>
    <div><a href="#"><i class="flaticon-bag34"></i>Icon</a></div>
    <div><a href="#"><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a></div>
</div>

下拉菜单Drop Menu

<div class="menu drop">
    <div><a href="#">Home</a></div>
    <div><a>Clothing</a>
        <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Long Sleeve Shirts</a></li>
        </ul>
    </div>
    <div><a>Accessories</a>
        <ul>
            <li><a href="#">Watches</a></li>
            <li><a href="#">Hats</a></li>
        </ul>
    </div>
</div>

扩展Extended

可选用激活项class="active",可添加图标及徽章

<div class="menu drop">
    <div class="active"><a>Active</a>
        <ul>
            <li class="active"><a href="#">Active</a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
    <div><a><i class="flaticon-bag34"></i>Icon</a>
        <ul>
            <li><a href="#"><i class="flaticon-bag34"></i>Icon</a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
    <div><a><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a>
        <ul>
            <li><a href="#"><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
</div>

折叠菜单Accordion Menu

<div class="menu accordion">
    <div><a href="#">Home</a></div>
    <div><a>Clothing</a>
        <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Long Sleeve Shirts</a></li>
        </ul>
    </div>
    <div><a>Accessories</a>
        <ul>
            <li><a href="#">Watches</a></li>
            <li><a href="#">Hats</a></li>
        </ul>
    </div>
</div>

扩展Extended

可选用激活项class="active",可添加图标及徽章

<div class="menu accordion">
    <div class="active"><a>Active</a>
        <ul>
            <li class="active"><a href="#">Active</a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
    <div><a><i class="flaticon-bag34"></i>Icon</a>
        <ul>
            <li><a href="#"><i class="flaticon-bag34"></i>Icon</a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
    <div><a><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a>
        <ul>
            <li><a href="#"><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
</div>

滑动菜单Fadeinright Menu

<div class="menu fadeinright">
    <div><a href="#">Home</a></div>
    <div><a>Clothing</a>
        <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Long Sleeve Shirts</a></li>
        </ul>
    </div>
    <div><a>Accessories</a>
        <ul>
            <li><a href="#">Watches</a></li>
            <li><a href="#">Hats</a></li>
        </ul>
    </div>
</div>

扩展Extended

可选用激活项class="active",可添加图标及徽章

<div class="menu fadeinright">
    <div class="active"><a>Active</a>
        <ul>
            <li class="active"><a href="#">Active</a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
    <div><a><i class="flaticon-bag34"></i>Icon</a>
        <ul>
            <li><a href="#"><i class="flaticon-bag34"></i>Icon</a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
    <div><a><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a>
        <ul>
            <li><a href="#"><i class="flaticon-bag34"></i>Icon and Badge<span class="badge bg-red">Hot</span></a></li>
            <li><a href="#">Default</a></li>
        </ul>
    </div>
</div>