CSS側面垂直菜單過渡
[英]css side vertical menu transition
問題描述
搜索了很多，但是卻得到了具體的答案。 我正在創建一個要使用側欄的網站。我希望側欄在懸停時向右擴展，如下所示...之前
后
和代碼
.body { margin :0; border :0; } * { box-sizing : border-box; } .main-header { position : absolute ; width : 100% ; height : 44px; background-color : #999; z-index:4; } .main-content { padding-top :46px; } .side-nav { position : absolute; width:100% ; background-color:#666; height:100vh; z-index:3; padding-top:44px; } .side-nav ul { list-style :0; padding :0; margin:0; } .side-nav ul li { padding : 20px 10px; border-bottom :1px solid #333; } .side-nav ul li a { color:#fff; text-decoration : none; } .side-nav ul li ai { color: #333; } @media screen and (min-width: 600px) { .side-nav { width :80px; } .side-nav ul li { text-align: center; } .side-nav ul li span:nth-child(2) { display:none; } .side-nav ul li i { font-size: 26px; } .main-content { margin-left:85px; } } @media screen and (min-width: 1000px) { .side-nav{ width:200px; } .side-nav ul li { text-align :left; } .side-nav ul li span:nth-child(2) { display:inline; } .main-content { margin-left:205px; } }
<DOCTYPE html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script src="javascripts/jquery2.1.3/jquery.min.js"></script> <link rel='stylesheet' href="css/myCss.css" /> </head> <body> <div class="main-header"> <a href="#" class="nav-trigger"><span></span></a> </div> <div class="side-nav"> <nav> <ul> <li><a href="#"> <span><i class="fa fa-calendar"></i></span> <span>xyz</span> </a></li> <li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span> <span>sbc</span> </a></li> <li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span> <span>Option 3</span> </a></li> <li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span> <span>Option 4</span> </a></li> </ul> </nav> </div> <div class="main-content"> <p>asjjasjlasj</p> </div> </body> </html>
我如何使用css和js進行良好的過渡。謝謝
2 個解決方案
解決方案1
2 已采納 2017-05-13 09:28:12
您只能使用CSS3來使用過渡，我將其應用於width，但是可以對您認為對自己更好的任何事情進行轉換：
因此，只需替換下面的行，它便會為您服務，如果您不想應用到width，請對其他適合您情況的屬性進行處理，因此只需替換下面的.side-nav並添加.side -nav：也懸停：
.side-nav {
position : absolute;
width:80px ;
background-color:#666;
height:100vh;
z-index:3;
padding-top:44px;
-webkit-transition: width .5s; //add this line(Safari)
transition: width .5s; //add this line(Safari)
}
//also add hover as below
.side-nav:hover {
width:120px ;
}
有關CSS過渡的更多信息，請查看下面的鏈接： https : //www.w3schools.com/css/css3_transitions.asp
解決方案2
1 2017-05-13 09:30:33
使用CSS Transitions時，這實際上非常簡單
首先，您可以使用hover選擇器更改寬度：
.sidebar {
width: 50px;
}
.sidebar:hover {
width: 200px;
}
從技術上講已經可以使用，但是現在CSS Transitions起作用了：
.sidebar {
transition: width 300ms ease;
}
基本上，它的作用是，只要width改變，它就會播放300毫秒長的過渡。 ease只是使過渡不那么突然的另外一個論點。
一切都應該看起來像這樣
CSS過渡內聯菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.