製作浮動選單,固定在網頁的旁邊

On 2012/03/31, in CSS, by Allen J

許多網站上都有浮動選單
就是會固定在瀏覽器可視範圍的某個地方
例:MB.EXTRUDER
就算用滑鼠滾動視窗
浮動選單會跟著你的畫面移動

CSS 語法的 position: fixed;
配合 left、top 屬性
就可以固定在瀏覽器視窗的某個位置
不過這樣會無視瀏覽器的大小
譬如瀏覽器可視範圍很小
導致浮動選單蓋住網頁內容

如果要固定在 Blog 或網頁內容的邊邊
就要技巧性的設定 left、margin-left 屬性

#menu-float {
	display: block;
	left: 50%;
	margin-left: 540px;
	position: fixed;
	top: 5%;
	z-index: 999;
}

這樣就隨著網頁內容的邊邊移動

參考資料:
新增浮動選單

標籤: 
  • http://www.facebook.com/profile.php?id=1345986728 Leah Yeh

    margin-left 應該是 負數才對吧~?

    • http://www.allenj.net/ Allen J

      正負數都可以,請自行調整

  • 粉紅庭

    請問要怎麼像這樣的浮動式選單?
    有教學嗎?

    • http://www.allenj.net/ Allen J

      妳可能需要先學習一下 CSS 的用法

      • 粉紅庭

        能找到語法嗎???

        • http://www.allenj.net/ Allen J

          CSS 的線上資源很多喔,在 Google 找一下就有了
          我上面的 CSS 語法是固定選單位置而已,至於要怎麼做選單,就靠妳自已囉