CSS3二級導(dǎo)航菜單制作步驟詳細說明
發(fā)表時間:2023-09-11 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]這次給大家?guī)鞢SS3二級導(dǎo)航菜單制作步驟詳解,CSS3二級導(dǎo)航菜單制作的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。如果想要實現(xiàn)網(wǎng)頁的二級導(dǎo)航,我們可以使用JS技術(shù),動態(tài)的顯示和隱藏二級菜單,當然也可以使用CSS技術(shù)來實現(xiàn)。并且這里推薦使用CSS,因為其效率更高,更流暢。這里將介紹二級菜單的...
這次給大家?guī)鞢SS3二級導(dǎo)航菜單制作步驟詳解,CSS3二級導(dǎo)航菜單制作的
注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。
如果想要實現(xiàn)網(wǎng)頁的二級導(dǎo)航,我們可以使用JS技術(shù),動態(tài)的顯示和隱藏二級菜單,當然也可以使用CSS技術(shù)來實現(xiàn)。并且這里推薦使用CSS,因為其效率更高,更流暢。這里將介紹二級菜單的動態(tài)顯示與隱藏。
1 結(jié)構(gòu)
一般導(dǎo)航的主體我們主要是使用ul li標簽
<body>
<header>
<!-- 一級導(dǎo)航開始 -->
<nav>
<ul class="menu">
<li>
<a href="#">首頁</a>
</li>
<li>
<a href="#">產(chǎn)品</a>
<!-- 二級導(dǎo)航開始 -->
<ul class="submenu">
<li><a href="#">小程序</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">企業(yè)站</a></li>
</ul>
<!-- 二級導(dǎo)航結(jié)束 -->
</li>
<li>
<a href="#">服務(wù)</a>
<!-- 二級導(dǎo)航開始 -->
<ul class="submenu">
<li><a href="#">技術(shù)支持</a></li>
<li><a href="#">產(chǎn)品外包</a></li>
</ul>
<!-- 二級導(dǎo)航結(jié)束 -->
</li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</nav>
<!-- 一級導(dǎo)航結(jié)束 -->
</header>
</body>
2 布局
導(dǎo)航的布局,由于子元素要隨著父元素,所以對二級菜單選取定位布局。要想讓多個li在一行中顯示,那么就需要讓li進行浮動。
body{margin: 0; font-size: 14px; color: #666}
ul,ol{margin: 0;padding: 0; list-style: none;}
a {text-decoration: none; color: #666;}
/*一級導(dǎo)航*/
/*背景色*/
ul.menu,ul.submenu {
background-color: #ededed;
}
/*一級導(dǎo)航浮動*/
ul.menu::after {
content: '';
display: block;
clear: both;
}
ul.menu > li {
float: left;
width: 120px;
line-height: 3em;
height: 3em;
text-align: center;
cursor:pointer;
}
/*二級導(dǎo)航項分割線*/
ul.submenu {
/*默認隱藏*/
display: none;
}
ul.submenu > li {
border-bottom: 1px solid #fff;
}
/*內(nèi)容區(qū)*/
.content {
min-height: 800px;
background-color: #fff;
}
3. 二級菜單顯示特效
光標放到導(dǎo)航上,當前元素背景色變深,字體顏色變淡。
如果有二級菜單,顯示二級菜單
為了實現(xiàn)上述兩個特效,我們可以利用偽類選擇器(:hover)來捕捉光標懸浮的操作。并且使用偽類選擇器(:hover)來選擇到當前菜單對應(yīng)的二級菜單
利用如下CSS可以快速實現(xiàn)該特效。
/*選中特效*/
ul.menu > li:hover {
background-color: #666;
}
ul.menu > li:hover > a {
color: #fff;
}
ul.menu > li:hover > ul.submenu {
display: block;
}
4. 動畫
上述代碼中二級菜單的顯示是瞬間的。能否提供一個緩慢動畫過渡的效果,當然也是沒問題。這里需要使用animation來進行動畫的配置,那么動畫幀可以自己寫或者是尋求第三方代碼庫(animate.css)的支持。這里我將使用透明度來實現(xiàn)這個淡入效果
/*動畫幀*/
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*基礎(chǔ)動畫樣式*/
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.fadeIn {
animation-name: fade;
animation-direction: normal;
}
動畫定義好后,可以直接將動畫樣式引用到ul.submenu上,注意,如果使用的是animate.css,那么上述步驟將省略,直接用其提供好的動畫樣式即可。
<!-- 二級導(dǎo)航開始 -->
<ul class="submenu animated fadeIn">
<li><a href="#">小程序</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">企業(yè)站</a></li>
</ul>
<!-- 二級導(dǎo)航結(jié)束 -->
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章!
推薦閱讀:
H5+WebWorkers多線程開發(fā)使用詳解
CSS與媒體查詢實現(xiàn)網(wǎng)頁導(dǎo)航功能(附代碼)
以上就是CSS3二級導(dǎo)航菜單制作步驟詳解的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。