|
瀏覽帶有下拉菜單的網(wǎng)頁時，我們經(jīng)常會注意到當(dāng)更改顯示器分辨率時，其下拉菜單的位置并沒有改變，這也是我們設(shè)計網(wǎng)頁時容易忽略的一個問題，其實通過CSS控制頁面元素精確定位后，這一點就不難實現(xiàn)了。
建立主菜單欄新建頁面，執(zhí)行菜單“Insert/Table”命令打開“Insert Table”對話框，插入一個一行多列的表格，表格列數(shù)由你的菜單條目決定，同時設(shè)置“Cell Padding”、“Cell Spacing”以及“Border”參數(shù)(如圖1)。在建立的表格中輸入主菜單導(dǎo)航文字，選取表格及文字后，用快捷鍵“Ctrl+F3”打開其屬性窗口，我們可以定義一個字體控制CSS來控制文字屬性，調(diào)整相關(guān)參數(shù)。
CSS實現(xiàn)相對定位菜單欄定義一個CSS相對定位的定義控制，將相對定位模型(菜單欄表格)定義為這個CSS屬性。使瀏覽器以相對定位模型左上角作為原點，建立新的坐標系。再在這個相對定位模型下級插入層，使之相對于該相對定位模型定位。使用CSS控制后再在表格中插入的層是不可拖動的，改變其位置可以直接在其屬性面板上輸入L、T的參數(shù)值。
打開“CSS Styles”面板，點擊“New Style”按鈕，在彈出“New Style”窗口中定義一個名稱為.pos的CSS屬性，并且選擇“Make Custom Style”的“Type”類型和“This Document 0nl”的“Define”類型，“確認”進入“Style Defintion For .pos”窗口，選取“Positioning”定義Type為“Relative”確定。選取菜單欄表格，將該CSS控制添加到菜單欄所在的表格中。使該相對定位模型(表格)建立新的坐標系，只要我們在其中插入下拉菜單層，并設(shè)置層內(nèi)容和主菜單的鼠標響應(yīng)事件就可以使下拉菜單精確定位了。
插入菜單欄目光標移入表格第一列，執(zhí)行菜單“Insert/Layer”命令插入一個新層，作為“菜單一”的下拉菜單，點擊層內(nèi)部，執(zhí)行“Insert/Table”命令，設(shè)定該表格行數(shù)、列數(shù)，并將表格線寬度設(shè)為“0”，表格底色為喜好顏色，輸入菜單項目文字，設(shè)定文字CSS控制效果，并調(diào)整菜單大小。以同樣的方式做出其他下拉菜單圖層效果。
設(shè)置層屬性和鼠標響應(yīng)事件分別選中層Layer1、Layer2、Layer3、Layer4，在其屬性窗口中把“Vis”項改為“Hidden”，把這4個層隱藏。
選擇主菜單中的“菜單一”，用快捷鍵“Shift+F3”打開“Behaviors”行為窗口，單擊“+”按鈕，執(zhí)行菜單“Show-Hide Layers”命令，于彈出窗口中選擇“Layer‘Layer1’”，點擊“Show”按鈕，然后設(shè)置其兩層為“Hide”。該動作表示把“Layer1”顯示，而其他層均隱藏。最后點擊“Behaviors”窗口“Events”下剛才定義的行為右側(cè)的箭頭，于彈出菜單中選擇“onMouseOver”鼠標響應(yīng)事件。
同樣的方法制作出其他下拉菜單效果，當(dāng)你“F12”預(yù)覽時，就會發(fā)現(xiàn)即使分辨率改變，該下拉菜單層的位置也不會改變。
出處：賽迪網(wǎng)
責(zé)任編輯：冰點的冰藍色
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
