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

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

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

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

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