CSS製作浮動導航欄

2021-09-11 01:46:59 字數 961 閱讀 6391

看著網上的教程做了個浮動導航欄,功能如圖:

導航欄固定在視窗左側**(使用fixed),滑鼠移動到一級欄目時,展開二級欄目,移動到二級欄目時展開**欄目

**如下:

一級欄目

二級欄目

二級欄目

一級欄目

二級欄目

二級欄目

一級欄目

二級欄目

二級欄目

*

ul li

body

.page

.l-1

.l-1:hover>ul

.lm.l-1>ul

.l-1 ul>li

.l-1 li:hover ul

.l-1 li ul

關鍵方法:一開始將下級欄目設定為:display:none,在上級欄目中設定hover,滑鼠滑過時將下級樣式改為display:block

製作過程中一些新的知識:

1、為了讓文字垂直方向居中,將height和line-height設定為一樣的30px,其實可以只設定line-height,height會自動變成line-height的數值(一行文字時)

2、用.li>ul 子元素選擇器,只選擇其下元素的子元素,不會往下延伸到子元素的子元素

3、在第**的欄目上使用了absolute的定位,參照元素是具有定位屬性的父元素,如果父元素沒有定位屬性,則繼續向上延申尋找,所以當第二級的li標籤沒有新增relative時,參照元素就變成了第一級的div(有fixed),在新增了relative之後,為了移動到和第二級並列,需要新增top:0,如果不新增,則會在預設位置(緊鄰二級下面)

4、去除列表前的預設圓點 ul li

UserControl製作導航欄

1.最外邊放乙個scrollview控制項,目的是如果導航欄超過固定高度時 自動出現右側下拉條。2.在最外側放置listbox控制項,作為一級導航按鈕集合。3.通過xmal設定listbox.itemtemplate的datatemplate 一級導航窗格的datatemplate是expander...

silverlight製作導航欄

很久沒有寫東西了,最近開始接觸silverlight的專案,從而開始學習silverlight 開始的時候,什麼都是一抹黑,逐漸一點點的學習新的東西。今天製作了乙個導航欄,在這上面當滑鼠移動到上面的時候,相應模組的字型會發生變化效果如下圖 設計這個有很大一部分是silverlight的樣式,因為現在...

導航選單欄製作

做法一 效果圖 導航選單.html charset gb2312 導航選單title rel stylesheet href style.css type text css head id daohang id d1 href 首頁a div id d2 關於醫學院div id d3 就業指導中心d...