1啟動 Visual Studio 20102在“文件”菜單中，依次選擇“新建”和“項(xiàng)目”將打開“新建項(xiàng)目”對話框在 Visual Basic 或 Visual C# 中選擇“WEB應(yīng)用程序”，然后將其命名為“HTML5Template”單擊“確定”3。

建立三個網(wǎng)頁，一個作為主頁面，另外兩個子頁面作為切換頁面嵌入主頁面，子頁面也可以用文字替代用jQuery方法來切換頁面，語言比較簡單網(wǎng)上搜一下看看就懂了 下面附上代碼 lt！DOCTYPE htmllthtmllthead ltmeta charset=。

*三級菜單，進(jìn)行了絕對定位，向右移動了* inhide li *三級菜單寬度* width 100px op1 inophover inhide *鼠標(biāo)懸浮在op1和inop上顯示3級菜單* display block ltstyle lthead ltbod。

在HTML5頁面中，經(jīng)常使用ltnav標(biāo)簽來充當(dāng)導(dǎo)航的結(jié)構(gòu)化標(biāo)簽ltnav標(biāo)簽用于定義頁面的導(dǎo)航部分，通常包含導(dǎo)航鏈接或?qū)Ш讲藛嗡峁┝艘环N語義化的方式來標(biāo)記頁面的導(dǎo)航內(nèi)容，使得搜索引擎和輔助技術(shù)能夠更好地理解和處理導(dǎo)航。

HTML5是無法做這個事情的準(zhǔn)確點(diǎn)說應(yīng)該是用CSS的響應(yīng)式布局這個東西你可以去看一下bootstrap，這個前端框架就是大量利用了這個技術(shù)。

01首先打開SublimeText軟件，新建一個html頁面，在html頁面中準(zhǔn)備好html結(jié)構(gòu)，如下圖所示02接下來，我們在html的body結(jié)構(gòu)中添加導(dǎo)航欄的內(nèi)容，如下圖所示03然后需要在style標(biāo)簽中用CSS定義導(dǎo)航條的樣式，如下圖所示寫樣。

HTML5+CSS3做一個后臺管理系統(tǒng)的側(cè)邊導(dǎo)航欄，點(diǎn)擊三條杠，可以收起或展開側(cè)邊導(dǎo)航欄收起時，圖標(biāo)變大，文本在圖標(biāo)下方，管理員頭像右側(cè)的歡迎語隱藏展開時圖標(biāo)變小，文本在圖標(biāo)的右側(cè)顯示，管理員頭像右側(cè)的歡迎語顯示。

設(shè)計(jì)師可以考慮做成側(cè)邊欄以滑動方式展現(xiàn)，在節(jié)約網(wǎng)站空間的同時也顯得更加簡約側(cè)邊欄導(dǎo)航的設(shè)計(jì)需要注意的是導(dǎo)航欄目的寬度問題，若導(dǎo)航欄中字體過長，在展示上會存在一定的問題，哪怕做成滑動展示的形式也不能很好的得以解。