利用jQuery做的導航條選單

2021-06-16 14:16:58 字數 2011 閱讀 4232

html**  

<

divid="content"

>

div>

<

divid="menu_bar"

>

<

dlclass="menu"

>

<

dt>

<

span

>檔案管理

span

>

dt>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>開啟檔案

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>刪除檔案

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>儲存檔案

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>關閉檔案

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>退出

a>

dd>

dl>

<

dlclass="menu"

>

<

dt>

<

span

>編輯

span

>

dt>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>重複操作

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>撤銷操作

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>拷貝

a>

dd>

<

ddclass="menuitem"

>

<

ahref="#"

class="menu_href"

>貼上

meau專案檢視

導航條選單的製作

混合布局垂直選單水平選單伸縮選單的製作 改變高度 伸縮選單的製作 水平方向 導航條選單的製作 混合布局 任務1 完成頂部 top 底部 foot 寬度自適應 任務2 中間分為2兩欄,其中,左側 left 寬度為200px,右側 right 寬度自適應 任務3 要求右側 right 先載入,左側 le...

導航條選單製作總結

整理自慕課網 製作垂直導航條時若不想增加導航塊的長度可用text indent 20px 進行縮排 導航條選單製作總結 1 用無序列表構建選單 ul li 2 垂直選單轉變為水平選單 float left 3 在製作圓角選單時,背景貼在標籤上 雪碧圖的應用 background position 4...

導航條選單的製作(一)

垂直選單設計 同樣的先寫html結構 在其中加入css樣式 這裡本來是設定的塊級元素li的樣式,由於塊級元素只有乙個a,就直接將a設定為塊級元素,然後對a寫滑鼠經過事件 a hover當滑鼠經過的時候,a的背景顏色變為red,文字顏色變為白色 下面是樣式,其中text indent是內部縮排,保持了...