1、一般WEB開發(fā)把頁面分成3個模塊headertpl contenttpl footertplhead和footer一般都是固定不變的，唯一變化的部分是content你說的菜單應(yīng)該是header部分的導(dǎo)航部分例如主頁的代碼可以這樣寫lthtml ltheadlthead lt；1首先打開Deamweaver8，新建一網(wǎng)頁文件，接著輸入以下導(dǎo)航菜單的內(nèi)容2此時對應(yīng)效果如圖3接下來準(zhǔn)備相關(guān)的導(dǎo)航按鈕圖片可以事先利用PS制作好4然后將以下CSS代碼加入到ltheadlthead之間5網(wǎng)頁此時的效果；Axure隱藏HTML文件的菜單列表方法第一，Axure生成HTML文件時，選擇頁面只勾選需求目錄大綱，點擊生成第二，找到剛才生成的HTML文件并打開，找到data文件并打開，剪切這個js文件存放到桌面第三，再次用Axure生成HTML文件；關(guān)鍵在于 下級菜單平時 display 而當(dāng)上級菜單的超鏈接被鼠標(biāo)放上時 即 ahover，下級菜單 displayblock 比如下級菜單 的class 是 submenu， 上級菜單 menu submenu display 平時隱藏 menu ahover；lthtml首先，我們引用normalizecss作為默認(rèn)樣式，以確保我們的菜單在每個瀏覽器是一樣的我們使用字體圖標(biāo)fontawesome來顯示菜單項向下的圖標(biāo)我們還需要引用jQuery來實現(xiàn)菜單的切換面板按鈕每個網(wǎng)站面板導(dǎo)航按鈕都類似它往往是一個圖標(biāo)。

2、1首先我們打開html開發(fā)工具，新建一個html代碼頁面2在html代碼頁面上創(chuàng)建一個select下拉菜單3保存html代碼頁面，使用瀏覽器打開，這個時候我們發(fā)現(xiàn)select下拉菜單是可以點擊修改的4回到html代碼頁面，在select標(biāo)簽上；如圖所示，二級下拉菜單一般都是這樣來制作的，就是在li標(biāo)簽里面再放一個ul標(biāo)簽然后就會有這樣的效果了，不過距離二級菜單有點差距接著我們先把二級下拉菜單之間的margin和padding值去掉然后設(shè)置divulli，需要注意的是；1新建html頁面 打開html編輯軟件，新建一個html頁面如圖2添加導(dǎo)航標(biāo)簽 在ltbody標(biāo)簽里新建一個ltulltul標(biāo)簽，然后在ltul標(biāo)簽里添加幾個ltliltli標(biāo)簽如圖3在ltli標(biāo)簽內(nèi)添加文字在新建的ltli添加；這個可以通過絕對定位，配合left設(shè)置 或者translate去實現(xiàn) left的方法比如讓class為menu的元素寬為300px，高100%的，設(shè)置left為300px在這期間可以加一個過渡transitionleft 03s 然后讓class為menu active的元素；大致思路 左側(cè)菜單，給每個菜單設(shè)置id和onclick點擊事件，onclick事件觸發(fā)的函數(shù)假設(shè)寫為display右側(cè)寫個固定樣式的div，id假設(shè)設(shè)置為board如果你的菜單內(nèi)容在服務(wù)器 display的實現(xiàn)如下 function display $a。

3、你先給一個div，width200pxheight400pxfloatleft 在這個div里面放10個小的divwidth200pxheight40px 然后就是js了，你想要什么效果，就在hover或者click里面加個人默認(rèn)你懂jQ。

4、如圖，制作導(dǎo)航條菜單一般是用一個div嵌套ul和li標(biāo)簽，然后li里面有a標(biāo)簽布局做好之后，開始寫導(dǎo)航條的樣式，如圖，先清除導(dǎo)航條的margin和padding然后定位導(dǎo)航條的div，這里我就用絕對定位來居中，如果你有其他導(dǎo)航條居中。

5、quot onclick=quotc1quot菜單二ltaltdiv id=quota0quot這里是文字ltdivltdiv id=quota1quot style=quotdisplayquot這里是圖片，自己寫上ltimg src=quot圖片地址quotltdiv左側(cè)右側(cè)布局我沒給你寫，只寫了圖片文字切換功能；現(xiàn)在我們?yōu)閚av添加樣式，首先去掉默認(rèn)的margin和padding，再去掉ltullt li標(biāo)簽的liststyle樣式和lta標(biāo)簽的默認(rèn)下劃線接下來再添加適當(dāng)?shù)臉邮礁鶕?jù)實際需要添加進(jìn)行美化，如一下樣式ltstyle type=quottextcssquot；HTML5+CSS3做一個后臺管理系統(tǒng)的側(cè)邊導(dǎo)航欄，點擊三條杠，可以收起或展開側(cè)邊導(dǎo)航欄收起時，圖標(biāo)變大，文本在圖標(biāo)下方，管理員頭像右側(cè)的歡迎語隱藏展開時圖標(biāo)變小，文本在圖標(biāo)的右側(cè)顯示，管理員頭像右側(cè)的歡迎語顯示。