點擊箭頭可以實作左收右開
uj5u.com熱心網友回復：
$("箭頭").click(function () {if ($("選單").css("display") == "none") {
$("選單").css("display", "block");
} else {
$("選單").css("display", "none");
}
});
uj5u.com熱心網友回復：
有沒有大佬幫忙解答一下uj5u.com熱心網友回復：
像這樣的ui是怎么寫的uj5u.com熱心網友回復：
你是問這個這個選單的樣式怎么寫咩uj5u.com熱心網友回復：
是的uj5u.com熱心網友回復：
<style type="text/css">
.list li{
float: left;
}
</style>
<div class="list">
<ul>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
這個是比較基礎的 我就寫了個大概
uj5u.com熱心網友回復：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
<li id="toggleMenu" status="open">收起</li>
</ul>
<style>
ul {
padding: 0px;
margin: 0px;
height: 35px;
}
ul li {
list-style: none;
float: left;
width: 70px;
text-align: center;
font-size: 16px;
line-height: 35px;
border-top:1px solid black;
border-bottom:1px solid black;
}
ul li::after {
content: '|';
padding-left: 15px;
}
</style>
<script>
$('#toggleMenu').on('click', function () {
let state = $(this).attr('status')
if (state == 'close') {
$(this).attr('status', 'open').text('收起').siblings('li').show()
} else {
$(this).attr('status', 'close').text('展開').siblings('li').hide()
}
})
</script>
uj5u.com熱心網友回復：
<style type="text/css">
.drawer {
position: absolute;
z-index: 10;
top: 0;
left: 0;
height: 100%;
padding: .4em 0;
background: #030201;
color: white;
text-align: center;
/* Remove 4px gap between <li> */
font-size: 0;
}
.drawer li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
line-height: 100%;
transform: translateZ(0);
}
.drawer a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
/* Reset font-size */
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.3s;
}
.drawer i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.drawer span {
font-size: .625em;
font-family: Raleway;
text-transform: uppercase;
}
.drawer li:hover ul {
/* Open the fly-out menu */
transform: translateX(0);
background: #999999;
/* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
display: block;
/* Add a shadow to the top-level link */
/* Show the shadow when the link is hovered over */
/* Fly out menus */
}
.drawer > li > a {
background: #999999;
}
.drawer > li:hover {
z-index: 100;
}
.drawer > li:hover a {
background: #999999;
}
.drawer > li a:hover {
background: #999999;
}
.drawer > li > a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 4px;
opacity: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
transition: opacity 0.5s;
}
.drawer > li:hover a:after {
opacity: 1;
}
.drawer > li ul {
position: absolute;
/* Stack below the top level */
z-index: -1;
top: 0;
left: 100%;
height: 100%;
width: auto;
white-space: nowrap;
/* Close the menus */
transform: translateX(-100%);
background: #999999;
transition: 0.5s transform;
padding-left:0;
}
</style>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<ul class="drawer">
<li>
<a href="https://bbs.csdn.net/topics/#">
<i class="fa fa-info-circle"></i>
<span>Info</span>
</a>
<ul>
<li>
<a href="https://bbs.csdn.net/topics/#" target="_blank">
<i class="fa fa-folder-open"></i>
<span>Portfolio</span>
</a>
</li>
<li>
<a href="https://bbs.csdn.net/topics/#" target="_blank">
<i class="fa fa-question-circle"></i>
<span>About</span>
</a>
</li>
<li>
<a href="https://bbs.csdn.net/topics/#" target="_blank">
<i class="fa fa-phone-square"></i>
<span>Contact</span>
</a>
</li>
</ul>
</li>
</ul>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/72325.html
標籤：HTML(CSS)
上一篇：burp代理設定