響應式替換Semantic UI的導航菜單

Question

語義UI在菜單集合方面存在一些問題。 簡而言之， 它根本沒有響應，最接近它的是它們的“可堆疊”實現，只是簡單地將菜單顯示為堆棧。

這里的任何人都可以推薦一個很好的與語義ui集成的導航菜單嗎？

感謝您的任何意見。

Answer 1

我已經更改了以前的代碼，並嘗試使語義UI導航響應。 這個HTML代碼基於語義UI，我盡量保持盡可能少，並為轉換功能添加了css和JS代碼。 我希望這有幫助。

我用新代碼創建了一個小提琴。 以下是鏈接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 -->

Answer 2

使用最小的HTML和CSS代碼，我們可以實現響應式菜單導航，可以自定義，不需要JavaScript。 使用非畫布屬性我們可以隱藏基本菜單，在移動視圖中菜單鏈接向左，屏幕分為菜單80％和內容20％。 我使用標簽為移動漢堡包菜單標簽隱藏為桌面。 為了實現瀏覽器兼容性，Off Canvas菜單的使用案例通常是智能手機和平板電腦，它們配有現代瀏覽器。 所有具有IE8及更高版本的瀏覽器都支持此功能。

以下是導航的示例代碼

 @import "compass/css3"; @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); * { box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { margin: .55em; color: black; } /* custom scrollbar */ ::-webkit-scrollbar { width: .95em; } ::-webkit-scrollbar-track { background-color: rgba(217, 217, 217, 0.5); } ::-webkit-scrollbar-thumb { background: rgba(184, 184, 184, 0.5); box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07); } /* Advanced Checkbox Hack */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { position: absolute; left: 0; display: none; width: 2em; height: 2.25em; padding: .35em; font-size: 1.1em; color: #fff; transition: color .3s ease-in-out; cursor: pointer; user-select: none; margin: 0; background: rgba(0, 0, 0, 0.4); } /* big screens */ nav[role="off-canvas"] { position: relative; width: 50em; margin: 0 auto; transition-duration: .3s, .5s; transition-timing-function: ease-in-out; transition-property: left, opacity, box-shadow; } nav[role="off-canvas"] a { color: #fff; text-decoration: none; font: 1.4em 'Open Sans', sans-serif; transition: color .3s ease-in-out; display: table-cell; vertical-align: middle; } nav[role="off-canvas"] ul { padding: 0; margin: 0 auto; width: 100%; } nav[role="off-canvas"] ul > li { float: left; padding: .5em 0; width: 8em; margin: .5em 0; opacity: .8; text-transform: uppercase; display: table; background: rgba(247, 52, 8, 0.65); cursor: pointer; text-align: center; transition-duration: .3s; transition-timing-function: ease-in-out; transition-property: box-shadow, color, opacity, padding-left; cursor: pointer; } nav[role="off-canvas"] ul > li:hover { color: #fff; opacity: 1; box-shadow: 0.5em 0 0 0 rgba(255, 255, 255, 0.95); } nav[role="off-canvas"] ul > li:hover > a { color: #fff; } nav[role="off-canvas"] ul > li:nth-child(2) { background: rgba(247, 183, 8, 0.65); } nav[role="off-canvas"] ul > li:nth-child(3) { background: rgba(32, 247, 8, 0.65); } nav[role="off-canvas"] ul > li:nth-child(4) { background: rgba(8, 231, 247, 0.65); } nav[role="off-canvas"] ul > li:nth-child(5) { background: rgba(8, 72, 247, 0.65); } /* small screens */ @media screen and (max-width: 44em) { html, body { margin: 0; overflow-x: hidden; } .content { margin: 2.5em .5em 0 .5em; } nav[role="off-canvas"] { position: absolute; top: 3em; left: -20em; width: 20em; opacity: 0; } nav[role="off-canvas"] ul > li { height: 100%; width: 100%; text-align: left; margin: 0; } nav[role="off-canvas"] ul > li:hover { box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45); } label { display: block; } label:after { position: absolute; right: .25em; top: 0; content: "\\2261"; font-size: 1.8em; } label:hover, input:checked ~ label { color: #000; } input:checked ~ nav[role="off-canvas"] { opacity: 1; left: 0; box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3); } input:checked ~ nav[role="off-canvas"] ul > li { padding: .55em .55em .55em 1.5em; } input:checked ~ nav[role="off-canvas"] ul > li:hover { padding-left: 3.5em; } input:checked ~ nav[role="off-canvas"] ul > li:after { position: absolute; right: .25em; content: "\\203A"; font: bold 1.4em sans-serif; color: inherit; } input:checked ~ .content { margin-left: 20.5em; margin-right: -20.5em; } } 

 <input type="checkbox" id="menu"> <label for="menu" onclick></label> <nav role="off-canvas"> <ul> <li><a href="#">Stream</a></li> <li><a href="#">Lab</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> 

Answer 3

我在下面制作了一個示例代碼，介紹如何使用Semantic UI實現響應式'漢堡包'菜單。 單擊JSFiddle中的“完整頁面”鏈接以查看全寬菜單，然后調整瀏覽器大小以查看響應速度。

 $('.ui.sidebar').sidebar({ context: $('.pushable.segment'), transition: 'overlay' }).sidebar('attach events', 'a#hamburger-link'); 

 .my-content .ui.segment{ min-height:500px; height:100%; } .ui.grid{ padding:0 !important; } .pushable.segment{ margin:0 !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> <div class="ui grid"> <div class="computer only row"> <div class="column"> <div class="ui inverted blue menu"> <a class="item">Menu Item A</a> <a class="item">Menu Item B</a> <a class="item">Menu Item C</a> <a class="item">Menu Item D</a> </div><!-- blue menu--> </div><!--column--> </div><!--computer only row--> <div class="tablet mobile only row"> <div class="column"> <div class="ui inverted blue menu"> <a id="hamburger-link" class="item"><i class="bars icon"></i></a> </div> </div><!--column--> </div><!--computer only row--> </div><!-- grid--> <div class="ui pushable segment"> <div class="ui sidebar inverted blue vertical menu"> <a class="item">Menu Item A</a> <a class="item">Menu Item B</a> <a class="item">Menu Item C</a> <a class="item">Menu Item D</a> </div><!-- blue menu--> <div class="my-content pusher"> <div class="ui segment"> YOUR CONTENT HERE... ISN'T IT NICE? <i class="pointing up icon"></i> </div> </div> </div>