嗨，大家好，我想搭配语义UI将顶级导航栏与侧边栏结合起来。我想在用户加载页面时使侧栏可见。这是我的代码：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js">
</script>
<style>
body{
background-color: #f0f0f0;
}
@media only screen and (max-width: 600px) {
.hide{
display:none;
}
.search.icon{
display:none;
}
}
.container{
margin-top:98px;
}
</style>
<title></title>
</head>
<body>
<div class="ui fixed top attached menu" style="height:65px; background-color: #2E4A62; margin-top:0;">
<a class="item" id="menu"><i class="large sidebar icon" style="color:white; width:10px;"></i></a> <img alt="" height="90%" src="headerfia.png" style="margin-top:5px" width="320px;">
<div class="right menu">
<div class="ui search" style="margin-top:4%; margin-left:-4%">
<div class="ui icon input">
<input class="prompt hide" placeholder="Search Event...." style="border-radius:0; width:250px;" type="text"> <i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<div class="ui visible left sidebar inverted vertical menu" style="margin-top:64px !important;display:block; width: 240px; height:91% !important;">
<div style="margin-top:10%; color:white;">
<center>
<img class="ui circular image" height="70px" src="https://www.tsafindia.org/assets/images/signin.png" style="margin-top:2%" width="70px">
<h4>Badan Eksekutif Mahasiswa<br>
[email protected]</h4>
</center>
</div><br>
<hr>
<a class="item"><i class="home icon"></i> Verifikasi Event</a> <a class="item"><i class="home icon"></i> Pengajuan Event</a> <a class="item"><i class="log out icon"></i> Log Out</a>
</div>
<script>
$('.ui.left.sidebar').sidebar({
transition: 'overlay',
dimPage: false,
closable: false
});
$('.ui.left.sidebar')
.sidebar('attach events', '#menu');
</script>
</body>
</html>
但是，正如您在图片中看到的那样，有一些类似叠加的东西，我不知道它到底是什么。
When user first loaded the page (image)
但是在我触发按钮之后。覆盖层消失
After user triggered button (image)
我如何解决它？谢谢
最佳答案
您所做的一切都很好。但是侧边栏缺少叠加层类只是改变了
<div class="ui visible left sidebar inverted vertical menu overlay">
代替
<div class="ui visible left sidebar inverted vertical menu">
jsfiddle
关于css - 带有语义UI的侧边栏和导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48535569/