網站前端制作之網站導航菜單制作

　　網站導航可以顯示用戶瀏覽的所屬欄目路徑和網站其他欄目的路徑，清楚的展示整個網站的目錄關系，更加方便用戶點擊跳轉到其他欄目瀏覽，導航欄目的展示，有的是展示上下兩級欄目，有的是欄目，讓用戶更加清楚完整的了解到網站的信息。二級欄目和欄目都可以用css實現的，欄目樣式也可以多種多樣，例如：用css實現導航下拉的菜單，如下圖所示：Html：

　　pclass=nav

　　ulclass=clearfix

　　ahref=index.html

　　HOME

　　/a

　　/li

　　ahref=product.html

　　PRODUCTS

　　/a

　　pclass=cellbox

　　pclass=con

　　pclass=nav-li

　　ahref=class=a-level

　　M-SeriesConnectors

　　/a

　　pclass=level-con

　　ul

　　ahref=M-SeriesConnectors/a

　　pclass=twolevelbox

　　ul

　　ahref=

　　Connectors1

　　/a

　　/li

　　ahref=

　　Connectors2

　　/a

　　/li

　　ahref=

　　Connectors3

　　/a

　　/li

　　/ul

　　/

　　/li

　　ahref=7/8Connectors/a

　　pclass=twolevelbox

　　ul

　　ahref=

　　7/8Connectors1

　　/a

　　/li

　　ahref=

　　7/8Connectors2

　　/a

　　/li

　　ahref=

　　7/8Connectors3

　　/a

　　/li

　　/ul

　　/

　　/li

　　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

　　ahref=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();

　　}

　　});