jquery - 语义 UI 导航菜单的响应式替换

Question

语义 UI 在菜单集合方面存在一些问题。简而言之，它根本没有响应，最接近它的是他们的“可堆叠”实现，将菜单简单地显示为堆栈。

谁能推荐一个很好的与语义ui集成的导航菜单？

感谢任何输入。

Answer 1

我更改了以前的代码并尝试使语义 UI 导航具有响应性。此 HTML 代码基于语义 UI，我已尝试将其保持尽可能小，并为转换功能添加了 css 和 JS 代码。我希望这有帮助。

我用新代码创建了一个 fiddle 。下面是链接 https://jsfiddle.net/1712/g6agpoy9/

<!-- language: lang-css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/site.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/container.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/grid.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/header.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/menu.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/dropdown.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/transition.min.css" rel="stylesheet" />



    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/sidebar.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/icon.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/segment.min.css" rel="stylesheet" />


    .hidden.menu {
      display: none;
    }
    .masthead.segment {
      min-height: 700px;
      padding: 1em 0em;
    }
    .masthead .logo.item img {
      margin-right: 1em;
    }
    .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
    }
    .masthead h1.ui.header {
      margin-top: 3em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
    }
    .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
    }
    .ui.vertical.stripe {
      padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }
    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }
    .footer.segment {
      padding: 5em 0em;
    }
    .secondary.pointing.menu .toc.item {
      display: none;
    }
    @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 350px;
      }
      .masthead h1.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }
    }

<!-- language: lang-html -->



    <!-- Following Menu -->
    <div class="pusher">
      <div class="ui inverted vertical masthead center aligned segment">
        <div class="ui container">
          <div class="ui large secondary inverted pointing menu">
            <a class="toc item">
              <i class="sidebar icon"></i>
            </a>
            <a class="active item">Home</a>
            <a class="item">Work</a>
            <a class="item">Company</a>
            <a class="item">Careers</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Sidebar Menu -->
    <div class="ui vertical inverted sidebar menu">
      <a class="active item">Home</a>
      <a class="item">Work</a>
      <a class="item">Company</a>
      <a class="item">Careers</a>
      <a class="item">Login</a>
      <a class="item">Signup</a>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/sidebar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/visibility.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/transition.js"></script>
<!-- language: lang-js -->

    $(document)
      .ready(function() {

        // create sidebar and attach to menu open
        $('.ui.sidebar')
          .sidebar('attach events', '.toc.item');

      });
<!-- end snippet -->