摘要:首先,需要聲明的是本教程是寫給初級者參考的,如果您已經有一定的基礎請直接忽略吧二級菜單是網站開發中很常見的功能模塊,但是對于初級者來說卻還是有些困難,下面我就拿幾個常見的案例來講好了。
首先,需要聲明的是本教程是寫給初級者參考的,如果您已經有一定的基礎請直接忽略吧
二級菜單是網站開發中很常見的功能模塊,但是對于初級者來說卻還是有些困難,下面我就拿幾個常見的案例來講好了。
鼠標滑過顯示顯示二級菜單
很簡單,li標簽嵌套一層ul
</>復制代碼
</>復制代碼
/*設置一級菜單樣式*/
.navs:after{
position: relative;
content: "";
width: 0;
height: 0;
visibility: hidden;
clear: both;
zoom: 1;
}
.nav {
position: relative;
float: left;
height: 30px;
line-height: 30px;
text-align: center;
}
.nav-a {
display: inline-block;
width: 80px;
font-size: 14px;
color: #d8ac00;
}
效果如下:
接著設置二級菜單
</>復制代碼
/*設置二級樣式*/
.sub-navs {
/*使用絕對定位,在文檔流中不占位,免得影響后面的布局*/
/*注意,因為這里使用了絕對定位,所以它的父元素.nav記得使用相對定位*/
position: absolute;
top: 100%;
width: 100%;
display: none;
/*先隱藏起來*/
}
.nav:hover .sub-navs {
/*鼠標滑過時顯示二級菜單*/
display: block;
}
.sub-nav-a {
font-size: 12px;
color: #000;
}
這時候簡單的二級菜單效果就出來了。如果想要劃過的時候,一級菜單背景變黃,字體變白呢
</>復制代碼
.nav:hover .nav-a {
background-color: #d8ac00;
color: #fff;
}
添加這行就好了。
但是我們的效果圖還加了邊框,各位看官可能覺得很簡單啊,加上border屬性不就就好了
</>復制代碼
.nav:hover .nav-a,
.sub-nav{
border: 1px solid #ccc;
}
結果邊框重疊了:
我們發現,其實二級菜單把border-top去掉就可以了
</>復制代碼
.sub-nav{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
還有一個問題時,當鼠標滑動到左邊第一個一級菜單的時候,右邊的一級菜單出現了閃動現象,體驗十分不友好,加上border-box屬性就可以解決此問題
</>復制代碼
.nav-a {
box-sizing: border-box;
}
參考代碼:http://runjs.cn/detail/ep0eq85c
關注作者吧~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50618.html
摘要:首先,需要聲明的是本教程是寫給初級者參考的,如果您已經有一定的基礎請直接忽略吧二級菜單是網站開發中很常見的功能模塊,但是對于初級者來說卻還是有些困難,下面我就拿幾個常見的案例來講好了。 首先,需要聲明的是本教程是寫給初級者參考的,如果您已經有一定的基礎請直接忽略吧 二級菜單是網站開發中很常見的功能模塊,但是對于初級者來說卻還是有些困難,下面我就拿幾個常見的案例來講好了。 鼠標滑過顯示顯...
摘要:注釋部分為下拉菜單隱藏,顯示的樣式。子元素會繼承父元素的樣式在寫樣式是我們會發現子元素會繼承父元素的樣式,如果想要改變樣式,可以給要改變樣式的對象一個或者單獨設置其屬性相對定位絕對定位的用法。 css技術分享之二級、三級下拉菜單的制作: 首先看一下網頁中的三級下拉菜單: showImg(https://segmentfault.com/img/remote/14600000113377...
摘要:注釋部分為下拉菜單隱藏,顯示的樣式。子元素會繼承父元素的樣式在寫樣式是我們會發現子元素會繼承父元素的樣式,如果想要改變樣式,可以給要改變樣式的對象一個或者單獨設置其屬性相對定位絕對定位的用法。 css技術分享之二級、三級下拉菜單的制作: 首先看一下網頁中的三級下拉菜單: showImg(https://segmentfault.com/img/remote/14600000113377...
摘要:需求當鼠標到按鈕上時,出現下拉菜單導航條。設置是,默認寬度為內容寬度,則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現,如有錯誤之處,歡迎各位前端大神留言評論拍磚。 前言:本題是網易云課堂的前端微專業《頁面制作》課程的作業題,當時對題意理解錯誤沒有實現題目要求,成了心中永遠的痛,所謂念念不忘必有回響,在學校圖書館花了幾個小時做出來并對相關知識點進行了總結,寫了這篇博文...
摘要:需求當鼠標到按鈕上時,出現下拉菜單導航條。設置是,默認寬度為內容寬度,則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現,如有錯誤之處,歡迎各位前端大神留言評論拍磚。 前言:本題是網易云課堂的前端微專業《頁面制作》課程的作業題,當時對題意理解錯誤沒有實現題目要求,成了心中永遠的痛,所謂念念不忘必有回響,在學校圖書館花了幾個小時做出來并對相關知識點進行了總結,寫了這篇博文...
閱讀 1307·2021-11-04 16:09
閱讀 3505·2021-10-19 11:45
閱讀 2402·2021-10-11 10:59
閱讀 1016·2021-09-23 11:21
閱讀 2768·2021-09-22 10:54
閱讀 1142·2019-08-30 15:53
閱讀 2611·2019-08-30 15:53
閱讀 3483·2019-08-30 12:57