标签：导航栏
效果
<div class="header-bottom fix-hb">
<div class="container">
<div class="quick-access">
<div class="row">
<div class="col-md-2 visible-lg visible-md">
<div class="navleft-container visible-lg visible-md">
<div id="html_megamenu" class="html_megamenu">
<div class="title-vmega-menu">
<h2><spring:message code="web.page.all.category"/></h2>
</div>
<div class="category-vmega_toggle">
<div class="html_menu first">
<div class="row offset-0">
<div class="mcd-menu-content">
<div class="menu-1">
<ul class="mcd-menu">
<c:if test="${not empty categoryJsons}">
<c:forEach items="${categoryJsons.categoryJsonList}"
var="category">
<li data-categoryId="${category.id}">
<a href="/products/search?categoryId=${category.id}">
<strong>${category.categoryDisplayName.name}</strong>
</a>
</li>
</c:forEach>
</c:if>
</ul>
</div>
<div class="menu-2">
<c:if test="${not empty categoryJsons}">
<c:forEach items="${categoryJsons.categoryJsonList}"
var="category">
<c:if test="${not empty category.childCategory}">
<ul class="mcd-menu hidden" data-parentId="${category.id}">
<c:forEach items="${category.childCategory}"
var="childCategory">
<li data-categoryId="${childCategory.id}">
<a href="/products/search?categoryId=${childCategory.id}">
<strong>${childCategory.categoryDisplayName.name}</strong>
</a>
</li>
</c:forEach>
</ul>
</c:if>
</c:forEach>
</c:if>
</div>
<div class="menu-3">
<c:if test="${not empty categoryJsons}">
<c:forEach items="${categoryJsons.categoryJsonList}"
var="category">
<c:if test="${not empty category.childCategory}">
<c:forEach items="${category.childCategory}"
var="childCategory">
<c:if test="${not empty childCategory.childCategory}">
<ul class="mcd-menu hidden" data-parentId="${childCategory.id}">
<c:forEach
items="${childCategory.childCategory}"
var="childzzCategory">
<li data-categoryId="${childzzCategory.id}">
<a href="/products/search?categoryId=${childzzCategory.id}">
<strong>${childzzCategory.categoryDisplayName.name}</strong>
</a>
</li>
</c:forEach>
</ul>
</c:if>
</c:forEach>
</c:if>
</c:forEach>
</c:if>
</div>
</div>
</div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-12">
<div class="nav-mobile-container visible-xs nav-mobile-wi">
<div class="navbar">
<nav id="navbar-inner" class="navbar-inner">
<div class="menu-mobile ">
<a class="btn btn-navbar navbar-toggle">
<span class="icon-bar">icon1</span>
<span class="icon-bar">icon2</span>
<span class="icon-bar">icon3</span>
</a>
<div class="brand navbar-brand">
<div class=" center-block">
<a href="/">
<img src="/image/logo/mobile-top-logo.png" width="36">
ZGOMART</a>
</div>
</div>
<div class="mobile-cart navbar-toggle">
<a href="javascript:void(0)">
<span class="mobile-cart-qty cart-animate-to">${empty cart?"0":cart.totalQuantity}</span>
<span class="glyphicon glyphicon-shopping-cart "></span>
</a>
</div>
</div>
<div class="mobile-cart-content nav-collapse collapse" id="mobile-cart-content" style="display: none;">
<div class="mobile-top-cart-title">
<a href="/shop/shoppingCart/shoppingCart" class="text-left">
<span><spring:message code="web.page.title.shopping.cart"/></span>
</a>
</div>
<ol class="mobile-mini-products-list cart-content" id="mobile-cart-sidebar">
<c:if test="${not empty cart and not empty cart.cartItems}">
<c:forEach items="${cart.cartItems}" var="cartItem">
<li class="item odd">
<div class="product-content">
<a class="product-image"
title="${cartItem.product.productDisplayName.name}"
href="/shop/product/${cartItem.product.id}">
<img width="50" height="50"
alt="Nunc facilisis"
src="${imageHost}${cartItem.product.productDisplayImage.thumbUrl}">
</a>
<div class="product-details des-container">
<c:if test="${not empty cartItem.product.brand}">
<p class="product-brand">
<a href="javascript:void(0)">
${cartItem.product.brand.brandDisplayName.name}
</a>
</p>
</c:if>
<p class="product-name">
<a href="/shop/product/${cartItem.product.id}">
${cartItem.product.productDisplayName.name}
</a>
</p>
</div>
</div>
<div class="product-edit">
<a class="delete-product removeFormCart"
href="javascript:void(0);">
<spring:message code="web.page.address.addresses.button.delete"/></a>
<div class="product-quantity">
<input type="hidden" class="productId"
value="${cartItem.product.id}">
<span class="sub glyphicon glyphicon-minus"></span>
<span class="qty-button">${cartItem.quantity}</span>
<span class="add glyphicon glyphicon-plus"></span>
</div>
<div class="product-total">
${currency.symbol} ${cartItem.subTotal}
</div>
</div>
</li>
</c:forEach>
</c:if>
</ol>
<div class="top-subtotal"><spring:message
code="web.page.order.total.amount"/> <span class="price">
<c:choose>
<c:when test="${not empty cart.cartTotal and cart.cartTotal gt 0}">
${currency.symbol} ${cart.cartTotal}
</c:when>
<c:otherwise>
${currency.symbol} 0.00
</c:otherwise>
</c:choose>
</span>
</div>
<div class="actions">
<a href="/shop/shoppingCart/shoppingCart">
<button class="btn btn-default btn100" title="Checkout" role="button">
<span><span>
<spring:message code="web.page.title.shopping.cart"/>
</span></span>
</button>
</a>
</div>
</div>
<ul id="mobilemenu" class="mobilemenu nav-collapse collapse">
<sec:authorize access="isAnonymous()">
<li class=" nav-1 level-top">
<a href="/shop/account/signIn/signIn" class="level-top">
<span><spring:message code="web.page.sign.login"/></span>
<span class="pull-right"></span>
</a>
</li>
</sec:authorize>
<sec:authorize access="isAuthenticated()">
<li class=" nav-1 level-top">
<a href="/loginOut" class="level-top">
<span> <spring:message code="web.header.top.loginOut"/></span>
</a>
</li>
</sec:authorize>
<c:if test="${not empty categoryJsons}">
<c:forEach items="${categoryJsons.categoryJsonList}" var="category">
<li class=" nav-1 level-top first parent">
<a href="/products/search?categoryId=${category.id}" class="level-top">
<span>${category.categoryDisplayName.name}</span>
</a>
<ul>
<c:if test="${not empty category.childCategory}">
<c:forEach items="${category.childCategory}"
var="childCategory">
<li class="first parent">
<a href="/products/search?categoryId=${childCategory.id}">
<span>${childCategory.categoryDisplayName.name}</span>
</a>
<ul>
<c:if test="${not empty childCategory.childCategory}">
<c:forEach
items="${childCategory.childCategory}"
var="childzzCategory">
<li class="first">
<a href="/products/search?categoryId=${childzzCategory.id}">
<span>${childzzCategory.categoryDisplayName.name}</span>
</a>
</li>
</c:forEach>
</c:if>
</ul>
</li>
</c:forEach>
</c:if>
</ul>
</li>
</c:forEach>
</c:if>
</ul>
</nav>
</div>
</div>
<div class="nav-container visible-lg visible-md">
<div id="custommenu" class="custommenu">
<div id="html_menu_link" class="html_menu">
<div class="parentMenu">
<ul>
<c:if test="${not empty menuCategoryJsons and not empty menuCategoryJsons.categoryJsonList}">
<c:forEach items="${menuCategoryJsons.categoryJsonList.get(0).childCategory}" var="category" varStatus="status">
<c:if test="${status.count le 6}">
<li>
<a href="/products/search?categoryId=${category.id}">${category.categoryDisplayName.name}</a>
</li>
</c:if>
</c:forEach>
</c:if>
</ul>
</div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>
<div class="col-md-3 visible-lg visible-md borderLeftWhite nav-right">
<div class="row image-list">
<a class="text">
<spring:message code="web.header.top.flash.deal"/>
</a>
<%--<div style="display: inline-block">--%>
<a href="http://weibo.com/">
<img src="/image/xinlang.png" width="30"/>
</a>
<a href="https://wx.qq.com/">
<img src="/image/wechat.png" width="30"/>
</a>
<a href="https://www.facbook.com">
<img src="/image/facebook.png" width="30"/>
</a>
<a href="https://twitter.com/">
<img src="/image/twiter.png" width="30"/>
</a>
<%--</div>--%>
</div>
</div>
</div>
</div>
</div>
</div>
标签：导航栏
原文地址：http://wiwili.blog.51cto.com/9623946/1969805
