網站導航可以顯示用戶瀏覽的所屬欄目路徑和網站其他欄目的路徑,清楚的展示整個網站的目錄關系,更加方便用戶點擊跳轉到其他欄目瀏覽,導航欄目的展示,有的是展示上下兩級欄目,有的是欄目,讓用戶更加清楚完整的了解到網站的信息。二級欄目和欄目都可以用css實現的,欄目樣式也可以多種多樣,例如:用css實現導航下拉的菜單,如下圖所示:Html:
pclass=nav
ulclass=clearfix
iahref=index.html
HOME
/a
/li
iahref=product.html
PRODUCTS
/a
pclass=cellbox
pclass=con
pclass=nav-li
ahref=class=a-level
M-SeriesConnectors
/a
pclass=level-con
ul
iclass=ahref=M-SeriesConnectors/a
pclass=twolevelbox
ul
iahref=
Connectors1
/a
/li
iahref=
Connectors2
/a
/li
iahref=
Connectors3
/a
/li
/ul
/
/li
iclass=ahref=7/8Connectors/a
pclass=twolevelbox
ul
iahref=
7/8Connectors1
/a
/li
iahref=
7/8Connectors2
/a
/li
iahref=
7/8Connectors3
/a
/li
/ul
/
/li
iclass=ahref=CircularConnectorSeries/a
/li
/ul
/
/
pclass=nav-li
ahref=class=a-level
7/8Connectors
/a
/
pclass=nav-li
ahref=class=a-level
CircularConnectorSeries
/a
/
/
/
/li
iahref=Services.html
SERVICES
/a
/li
/ul
/
Css:
垂直的手風琴折疊菜單,一般可以用作后臺頁面的折疊菜單,或者產品頁面的左側的產品折疊菜單,作用同樣是方便用戶了解網站的信息,使用戶便于快速的找到自己想要瀏覽的內容。
如下圖所示:Html:
pclass=menulist
pclass=box
pclass=item
pclass=h1MyAccount/
pclass=wra
ahref=MyVouchers/a
ahref=MyProfile/a
ahref=MyPaymentOptions/a
ahref=MyMeasurements/a
/
/
pclass=item
pclass=h1MyOrder/
pclass=wra
ahref=MyOrder1/a
ahref=MyOrder2/a
ahref=MyOrder3/a
ahref=MyOrder4/a
/
/
pclass=item
pclass=h1MyAddress/
pclass=wra
ahref=MyAddress1/a
ahref=MyAddress2/a
/
/
pclass=item
pclass=h1MySettings/
pclass=wra
ahref=MySettings1/a
ahref=MySettings2/a
ahref=MySettings3/a
ahref=MySettings4/a
/
/
/
/
Css:Js:
$(.menulist.box.h1).click(function(){
varbox_=$(this).next(.wrap);
if(box_.is(:hidden)){
$(.menulist.box.h1).removeClass(on);
$(this).addClass(on);
$(.menulist.box.wrap).slideUp();
$(this).next(.wrap).slideDown();
}else{
$(.menulist.box.h1).removeClass(on);
$(.menulist.box.wrap).slideUp();
}
});