CSS 浮動選單

不用javascript單純利用CSS製作浮動選單，選單會出現在網頁內容最上層，看起來像是浮在上面，當瀏覽器向下瀏覽時，選單停留在固定位置，不會移動。

使用方式只需在網頁上貼上下列CSS與htm語法即可，顏色大小可依需求自訂CSS。

 

CSS浮動選單：

CSS

放在<head>或.css

 

 

<head>

div.menu {position:fixed;background:#ebebeb;border:1px solid #ccc;width:120px;z-index:100;left: 650px;top: 25px;}
div.menu a {display:block;margin:5px;color:#666;font-size:12px;}
div.menu p {display:block;margin:5px;color:#F90;font-size:15px;font-weight: bolder;}

</head>

 

html

放在<body>

 

<body>

<div class="menu">
<p>CSS浮動選單</p>
<a href="#">放置連結名稱1</a>
<a href="#">放置連結名稱2</a>
<a href="#">放置連結名稱3</a>
<a href="#">放置連結名稱4</a>
<a href="#">放置連結名稱5</a>
</div>

 </body>

 

CSS浮動選單預覽

CSS浮動選單  

PS：網頁內容要多一點(頁面長一點)才看的出來效果

 

arrow
arrow
    文章標籤
    CSS
    全站熱搜
    創作者介紹
    創作者 jon6773 的頭像
    jon6773

    Panda's blog

    jon6773 發表在 痞客邦 留言(0) 人氣()