HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">
<img src="images/logo.png" alt="原來如此-ECSHOP開店支援"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="shopping-cart hidden-xs pull-right dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon glyphicon-shopping-cart"></span>產品
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="/goods-102-ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BF+PRO.html" title="ECSHOP響應式模板 PRO"><img src="/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" />ECSHOP響應式模板 PRO</a></li>
<li><a href="/goods-94-%E8%B6%85%E5%95%86%E5%8F%96%E8%B2%A8%E4%BA%8C%E5%90%88%E4%B8%80.html" title="超商取貨二合一"><img src="/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />超商取貨二合一</a></li>
<li><a href="/goods-91-ECSHOP%E5%BE%8C%E5%8F%B0%E5%AE%88%E9%96%80%E5%93%A1.html" title="ECSHOP後台守門員"><img src="/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />ECSHOP後台守門員</a></li>
<li><a href="/goods-93-ECSHOP+%E5%95%86%E5%93%81%E7%9B%B8%E5%86%8A%E6%89%B9%E9%87%8F%E4%B8%8A%E5%82%B3%E6%8F%92%E4%BB%B6.html" title="ECSHOP 商品相冊批量上傳插件"><img src="/images/201305/thumb_img/93_thumb_G_1369644360086.jpg" alt="ECSHOP 商品相冊批量上傳插件" />ECSHOP 商品相冊批量上傳插件</a></li>
<!-- 使用ECSHOP動態載入 -->
<!--{foreach from=$categories item=cat}-->
<!-- <li><a href="{$cat.url}">{$cat.name|escape:html}</a></li> -->
<!--{/foreach}-->
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href=""><span class="glyphicon glyphicon-home"></span>首頁</a></li>
<li><a href=""><span class="glyphicon glyphicon-th-list"></span>資訊</a></li>
<li><a href=""><span class="glyphicon glyphicon-fire"></span>案例</a></li>
<li><a href=""><span class="glyphicon glyphicon-info-sign"></span>關於</a></li>
<li><a href=""><span class="glyphicon glyphicon-phone-alt"></span>客服</a></li>
</ul>
</div>
</div>
</nav>
<div class="container visible-xs">
<div class="cat">
<a href="/goods-102-ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BF+PRO.html" title="ECSHOP響應式模板 PRO">
<div class="col-xs-4 cat-box">
<img src="/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" />
<div class="goods_name">
ECSHOP響應式模板 PRO
</div>
</div>
</a>
<a href="/goods-94-%E8%B6%85%E5%95%86%E5%8F%96%E8%B2%A8%E4%BA%8C%E5%90%88%E4%B8%80.html" title="超商取貨二合一">
<div class="col-xs-4 cat-box">
<img src="/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />
<div class="goods_name">
超商取貨二合一
</div>
</div>
</a>
<a href="/goods-91-ECSHOP%E5%BE%8C%E5%8F%B0%E5%AE%88%E9%96%80%E5%93%A1.html" title="ECSHOP後台守門員">
<div class="col-xs-4 cat-box">
<img src="/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />
<div class="goods_name">
ECSHOP後台守門員
</div>
</div>
</a>
<a href="/goods-93-ECSHOP+%E5%95%86%E5%93%81%E7%9B%B8%E5%86%8A%E6%89%B9%E9%87%8F%E4%B8%8A%E5%82%B3%E6%8F%92%E4%BB%B6.html" title="ECSHOP 商品相冊批量上傳插件">
<div class="col-xs-4 cat-box">
<img src="/images/201305/thumb_img/93_thumb_G_1369644360086.jpg" alt="ECSHOP 商品相冊批量上傳插件" />
<div class="goods_name">
ECSHOP 商品相冊批量上傳插件
</div>
</div>
</a>
</div>
</div>
CSS:
a:hover {
text-decoration: none;
}
nav .container .navbar-header .navbar-toggle {
margin-right: 30px;
}
nav .container .navbar-header a.navbar-brand {
padding:0;
}
nav .container .navbar-header a.navbar-brand img {
max-height: 50px;
}
nav .container .collapse ul {
margin-top: 0px;
}
nav .container li span.glyphicon {
margin-right: 5px;
}
nav .container .shopping-cart
{
margin: 9px 0 0 30px;
}
.cat {
margin-top: 60px;
min-height: 30px;
padding: 0 0 10px;
}
.cat-box {
padding: 5px 0;
text-align: center;
}
.cat-box img {
width: 55px;
height: 55px;
border: 1px solid #aaa;
border-radius: 50px;
padding: 3px;
}
.dropdown-menu img {
width: 30px;
height: 30px;
border: 1px solid #aaa;
border-radius: 50px;
padding: 2px;
margin: 0 6px;
}
.navbar-fixed-top {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
