Question

我有一个语义-UI lefside菜单，我希望它是持久的。我正在尝试制作2种状态 - 每种状态都有一种类型的宽状态，以及每种状态都有图像的紧凑状态。目前有一些我完全难以接受的问题！

1）为什么单击时菜单会完全消失？

2）如何让页面不做暗淡？

3）页面宽度是否会折叠而不是被推到右边？

4）如上所述，是否可以有两个菜单状态，并在点击时在它们之间切换？

非常感谢！我的网站位于：http://itp.evejweinberg.com/left/

我的HTML：

    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="semantic/semantic.min.css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">


        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>

          <!-- my json of content -->
          <script type="text/javascript" src="list.js"></script>
          <!-- jQuery to build that content -->
          <script type="text/javascript" src="buildScene.js"></script>

        <script src="semantic/semantic.min.js"></script>



      </head>
<!--//do I need this class? -->
      <body class="pushable">



    <!-- semantic says to put everything in pusher -->
    <div class="pusher">


      <div class="all">

          <div id="main"></div>

          <div class="title-holder">
            <div class="animatedDiv"></div>
          </div>



            <div class='container'>
                <div class='header'></div>
                <div class="all-books"></div>
            </div>
      </div>

      </div>


    <!-- menu -->
    <div class="ui vertical left labeled menu fixed small sidebar">
        <div class="header link item" onclick="scrollTo(captology)">Intro</div>
      <div class="item">
        <div class="header link item">Emotions</div>
        <div class="menu">
          <a class="item link" onclick="scrollTo(hope)">Hope</a>
          <a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
          <a class="item link" onclick="scrollTo(fear)">Fear</a>
        </div>
      </div>
      <div class="item">
        <div class="header link item">Psychology</div>
        <div class="menu">
          <a class="item link" onclick="scrollTo(transparency)">Transparency</a>
          <a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
          <a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
          <a class="item link" onclick="scrollTo(social)">Social Pressure</a>
        </div>
      </div>
      <div class="item">
        <div class="header link" onclick="scrollTo(fogg)">Fogg</div>
        <div class="menu">
          <a class="item link" onclick="scrollTo(motivation)">Motivation</a>
          <a class="item link" onclick="scrollTo(ability)">Ability</a>
          <a class="item link" onclick="scrollTo(trigger)">Trigger</a>
        </div>
      </div>
      <div class="item">
        <div class="header link" onclick="scrollTo(flow)">Flow</div>
        <div class="menu">
          <a class="item link" onclick="scrollTo(chunking)">Chunking</a>
          <!-- <a class="item">FAQs</a> -->
        </div>
      </div>
      <div class="item">
        <div class="header">Ethics</div>
        <div class="menu">
          <div class="nav-rect" id="e"></div>
          <div class="nav-rect" id="e"></div>
          <div class="nav-rect" id="e"></div>
          <div class="nav-rect" id="e"></div>
        </div>
        <div class="header link" onclick="scrollTo(sources)">Sources</div>

      </div>
        <div class="header">About</div>
        <div class="ui category search item">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="search link icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>


    </div>








        <script type="text/javascript" src="content.js"></script>

        <script type="text/javascript" src="sketch.js"></script>
        <script type="text/javascript" src="js/intro.js"></script>
        <script type="text/javascript" src="js/hope.js"></script>
        <script type="text/javascript" src="js/lossAversion.js"></script>



        <script type="text/javascript">

        $('.sidebar').sidebar('show');

      //   $('.sidebar')
      // .visibility({
      //   type   : 'fixed',
      //   offset : 45 // give some space from top of screen
      // });

        // $('.menu').click(function(){
        //   $('.ui.labeled.icon.sidebar').sidebar('toggle');
        //
        // })

        // $('.ui.sidebar').click(function(){
        //   sidebar('toggle');
        // })


        </script>

      </body>
    </html>

Answer 1

神秘解决了！ Semantic-UI动态添加到我的html构建版本。我删除了课程＆＃39;侧边栏＆＃39;所有推动器和调光器都消失了。这解决了＃1和＃2。对于其他人，我只是回到jQuery动画，将左侧导航向左滑动并折叠它的宽度。 Thx All！

语义UI菜单 - 点击

1 个答案: