整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SS3簡潔炫酷旋轉(zhuǎn)菜單menu效果
鼠標(biāo)經(jīng)過一級菜單后，二級菜單會展開，然后逆時針旋轉(zhuǎn)180°然后再返回原位置。
實現(xiàn)代碼：
html結(jié)構(gòu)：
css：
時制作網(wǎng)站導(dǎo)航時，經(jīng)常用到鼠標(biāo)懸停展現(xiàn)下拉菜單的效果。在此記錄一下實現(xiàn)過程，需支持CSS3瀏覽器運行。
首先看下實現(xiàn)的效果：
鼠標(biāo)懸停效果
html部分：
<ul class="navbar-nav ml-auto">
<li class="nav-item hvr-underline-from-left nav-item1"><a class="nav-link hvr-icon-spin fa-caret-down" href="/solutions/">建站推廣方案</a>
<div class="list-group shadow-sm ">
<a class="list-group-item list-group-item-action" href="/solutions/diagnosis/">分析 - 診斷分析/營銷定位</a><a class="list-group-item list-group-item-action" href="/solutions/customize/">網(wǎng)站 - 定制品牌營銷網(wǎng)站</a><a class="list-group-item list-group-item-action" href="/solutions/sem/">流量 - Google SEM 廣告引流</a><a class="list-group-item list-group-item-action" href="/solutions/seo/">轉(zhuǎn)化 - SEO優(yōu)化+網(wǎng)站運維</a><a class="list-group-item list-group-item-action" href="/solutions/social/">社交 - Facebook/Youtube 運營推廣</a><a class="list-group-item list-group-item-action" href="/solutions/training/">培訓(xùn) - 線上線下課程免費送</a>
</div>
</li>
<li class="nav-item hvr-underline-from-left nav-item2"><a class="nav-link " href="/cases/">成功案例</a>
</li>
</ul>重點CSS部分：
.nav-menu .navbar-collapse>.navbar-nav>li>.list-group {
position: absolute;
z-index: 1070;
width: auto;
left: 0;
overflow: hidden;
height: auto;
max-height: 0;// 最大高度初始為0
transition: all .3s ease; //效果時間 0.3s
visibility: hidden;
}
.nav-menu .navbar-collapse>.navbar-nav>li:hover>.list-group,.nav-menu .navbar-collapse>.navbar-nav>li>a:hover +.list-group {
max-height: 100vh; // 鼠標(biāo)懸停時最大高度盡量大點，就有向下展開的動畫效果
visibility: visible;
height: auto;
}我的代碼引用了 bootstrap v4 所以有些class 都是層疊覆蓋寫法。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
