Question

大家好我想制作顶级导航栏，并结合带有语义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>
                bem@gmail.com</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)

我该如何解决？谢谢

Answer 1

你做得很好。但边栏缺少覆盖类只是改变

<div class="ui visible left sidebar inverted vertical menu overlay">

而不是

<div class="ui visible left sidebar inverted vertical menu">

jsfiddle

带有SemanticUI的侧边栏和导航栏

1 个答案: