純CSS實現(xiàn)實用的常見下拉菜單效果

多數(shù)網(wǎng)站中，下拉菜單效果基本常見。在實現(xiàn)技術方面，實現(xiàn)該效果的方法也很多，今天就來說說純CSS樣式來實現(xiàn)常見的下拉菜單，有興趣的小伙伴可以參考下：

實現(xiàn)效果如下：

鼠標未移上前

鼠標移上后

從效果圖可以看出，當鼠標移上去的時候，會彈出下拉的菜單層！要是在JQuery中，實現(xiàn)原理也蠻簡單，就是當鼠標觸發(fā)移上去事件，彈層就顯示（默認隱藏）的原理！而在CSS實現(xiàn)該效果會用到的原理就是CSS3的動畫透明度過渡顯示。因為效果圖中也有幾個三角形圖標，所以統(tǒng)一用CSS和CSS3的知識來實現(xiàn)比較容易。下面首先看看html的結構：如下：

布局的CSS：

右邊實心的三角形可以用偽類元素 :after來實現(xiàn).

鼠標移上去，各種變化的樣式，其中當鼠標移上去時候，彈出層的透明度變?yōu)?，就可以看到內容

當彈層出現(xiàn)后，第一行會有一個三角形指向，實現(xiàn)該三角形可以用到偽類:first-child:before，如下

結合起來就能完成純CSS做下拉菜單效果！想學更多知識，歡迎關注“恒星網(wǎng)絡”頭條號！

部導航條布局

html代碼：

<!DOCTYPE html><html><head>

<title>頭部導航條制作</title>

</head>

<body>

<li><a href="#">web前端</a></li>

</ul>

</div>

</body>

</html>

用無序列表制作頭部導航條：

無序列表是上下布局排列的，那我們需要思考的是讓他左右布局的方式排列
左右排列的方式我們所用的是float:left;浮動的方法讓li左右布局
CSS樣式：

.navbox{
width:960px;
height:40px;
margin:20pxauto;
background:#08c;
}
.navbox >ul>li{
float: left;
width:160px;
height:40px;
line-height:40px;
text-align: center;
font-size:16px;
}

鼠標移入時實現(xiàn)顏色的變換

HTML代碼：

<li><a href="#">web前端</a></li>

</ul></div>

思路：

鼠標移入時每個<li>顯示為另一種顏色background: #00bfff;

css代碼：

.navbox ul li a{ display: block; color: #fff; background: #08c;}.navbox ul li a:hover{ text-decoration: none; background: #00bfff;}

下拉菜單實現(xiàn)

html：

<li><a href="#">web前端</a>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

在一級菜單web前端下實現(xiàn)二級菜單<ul class="subnav">

html
css
JavaScript
當鼠標移入菜單時web前端時顯示二級菜單，移出時隱藏；
CSS代碼實現(xiàn)：

.subnav{ display: none;}/*鼠標沒有移入“web前端”選項欄時二級菜單隱藏*/.navbox ul li:hover .subnav{ display: block;}/*當鼠標移入“web前端”選項欄時顯示二級菜單*/

三級菜單實現(xiàn)

HTML

<li><a href="#">web前端</a>

</ul>

</li>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

前面與二級菜單思路相似唯一不同的是三級菜單顯示的位置。

我們看看css的絕對定位與相對定位這篇文章

CSS代碼：

.subnav>li{ position: relative;}.threenav{ position: absolute; top: 0; left: 160px; width: 160px;}.subnav, .threenav{ display: none;}.subnav li:hover .threenav{ display: block;}

最后實現(xiàn)的效果如下圖：

家好，今天給大家介紹一款，JavaScript+css實現(xiàn)的下拉菜單，明暗模式切換html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

隱藏式下拉菜單，明暗模式隨意切換（圖2）

圖2

代碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10214，需要的朋友，訪問下面鏈接后，搜索10214，即可獲取。

「鏈接」

在線咨詢

上一篇：struts2教師資源共享實訓需求分析
下一篇：你肯定沒有試過這個方法，來破解易語言！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

純CSS實現(xiàn)實用的常見下拉菜單效果

家好，今天給大家介紹一款，JavaScript+css實現(xiàn)的下拉菜單，明暗模式切換html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

隱藏式下拉菜單，明暗模式隨意切換（圖2）

代碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10214，需要的朋友，訪問下面鏈接后，搜索10214，即可獲取。

「鏈接」

您的項目需求