溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS3怎么制作下拉菜單及彈起式選單”，在日常操作中，相信很多人在CSS3怎么制作下拉菜單及彈起式選單問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3怎么制作下拉菜單及彈起式選單”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
下拉菜單
先直接來看效果是怎樣：
當鼠標移到選單之后，下方會展開并有其它說明內容，我這邊是把展開的部份加上圖片內容，讓它有其它不同的變化。因為這樣的動作就像人家廟會時會有舞獅從嘴里丟下賀聯一樣，所以我才取名為"賀聯式選單"。
這樣的效果其實只需要 HTML 及 CSS 配合就能做出來了，我們先來看 HTML 的部份：
檢視原始碼 HTML
XML/HTML Code復制內容到剪貼板
<body>
<ul>
<li>
<a class="t1" href="#">梅干桑
<div>自我介紹</div>
</a>
</li>
<li>
<a class="t2" href="#">Photoshop
<div>上課囉!!</div>
</a>
</li>
<li>
<a class="t3" href="#">Q ＆ A
<div>問題討論</div>
</a>
</li>
<li>
<a class="t4" href="#">男丁格爾</a>
</li>
<li>
<a class="t5" href="#">人材
<div>丁丁是人材</div>
</a>
</li>
<li>
<a class="t6" href="#">格言
<div>好話大家說</div>
</a>
</li>
<li>
<a class="t7" href="http://www.wowgame.tw">WOWGame</a>
</li>
</ul>
</body>
使用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，而其 DIV 是更進階的描述內容，若不需要的話則可以不用加。因為我要讓每個選單都有不同的背景圖，所以還需要幫 A 連結都加一個獨立的 class。
然后，我有 7 個 LI 選單項目，因此我還請梅干幫忙準備了 7 張圖片(果然還是要專業的來)。接著就能開始動手寫 CSS 囉：
檢視原始碼 CSS
CSS Code復制內容到剪貼板
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
}
ul li a {
width: 100px;
height: 50px;
display: block;
line-height: 50px;
overflow: hidden;
text-align: center;
text-decoration: none;
color: #fff;
}
ul li a:hover {
height: 150px;
}
ul li a div {
color: #fff;
line-height: 16px;
font-weight: bold;
margin-top: 73px;
padding-top: 7px;
border-top: 1px dotted #fff;
}
.t1 { background: #08f2d6 url(01.gif); }
.t2 { background: #1209f1 url(02.gif); }
.t3 { background: #a202e2 url(03.gif); }
.t4 { background: #f4e603 url(04.gif); }
.t5 { background: #55df07 url(05.gif); }
.t6 { background: #02a8f3 url(06.gif); }
.t7 { background: #f6025e url(07.gif); }
這邊用到的 CSS 語法都是很基礎的，比較需要注意的是我們一開始 A 連結的 height 是 50px，所以超過的部份會因為 overflow 為 hidden 的關系而被隱藏起來；另外，當鼠標移到 A 連結后，再額外訂了一個 a:hover { } 來把它的 height 撐高，因此原本看不到的背景部份就會顯現出來了。
到這邊就整個都完成了，一開始瀏覽時就只有一排的選單
當鼠標移到選項后就會顯示完整的背景內容
且我們的選單一樣是有超連結的功能，是不是很有趣呢！如果要讓效果更優的話，當然還是需要 JavaScript 的配合才行唷！
彈起式頁簽選單
一樣先直接來看效果是怎樣：
跟上一個例子不同的是在此次是鼠標移到選單后會往上升，就象是突然彈起來一樣。
這樣的效果一樣只需要 HTML 及 CSS 就能做出來了，我們先來看 HTML 的部份：
檢視原始碼 HTML
XML/HTML Code復制內容到剪貼板
<body>
<ul id="menu">
<li><a href="#" class="home">首頁</a></li>
<li><a href="#" class="car">購物車</a></li>
<li><a href="#" class="good">推薦商品</a></li>
<li><a href="#" class="query">訂單查詢</a></li>
</ul>
</body>
同樣是用 UL 及 LI 來做選單的項目，每一個 LI 中的 A 連結是我們主要的選單內容，且為了讓每個選單都有不同的選單圖片，所以還幫 A 連結都加一個獨立的 class。
接著開始動手寫 CSS 囉：
檢視原始碼 CSS
CSS Code復制內容到剪貼板
#menu {
margin: 20px 0 0;
padding: 0;
height: 62px; /* 選單圖片的高 */
list-style: none;
overflow: hidden;
width: 432px; /* 98 * 4 + 5 * 8 */
border-bottom: 1px solid #ccc;
}
#menu li {
float: left;
padding: 0 5px;
}
#menu li a {
display: block;
width: 98px; /* 選單圖片的寬 */
height: 62px; /* 選單圖片的高 */
line-height: 62px; /* ie suck */
text-indent: -9999px;
margin-top: 31px; /* 需要設定為圖片寬/2 */
background-repeat: no-repeat;
}
#menu li a:hover {
margin-top: 1px; /* 當鼠標移到選單上時... */
}
/* 幫每一個 A 連結都加入不同選單圖片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.gif);}
這邊要注意的是 A 連結的 margin-top 是選單圖片高的一半 - 31px，所以超過的部份就不會顯示出來；另外，當鼠標移到 A 連結后，再額外訂了一個 a:hover { } 來減少它的 margin-top，因此原本看不到的背景部份就會顯現出來了。
到這邊就整個都完成了，一開始瀏覽時就只有一排的選單
當鼠標移到選項后就會彈起來囉~~
到此，關于“CSS3怎么制作下拉菜單及彈起式選單”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
