web-dev-qa-db-ja.com

セマンティックUIナビゲーションメニューのレスポンシブな代替

メニューコレクションに関しては、セマンティックUIにいくつかの問題があります。要するに、まったく反応しないであり、それに最も近いのは、単にメニューをスタックとして表示するための「スタック可能な」実装です。

ここの誰もがセマンティックUIとうまく統合できる優れたナビゲーションメニューを推奨できますか？

ご意見をお寄せいただきありがとうございます。

jquerycssmenunavigationbarsemantic-ui
13
pbarney

以前のコードを変更して、セマンティック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 -->
7
Priyanka Thombre

最小限のHTMLとCSSコードを使用して、カスタマイズ可能でJavaScriptを必要としないレスポンシブメニューナビゲーションを実現できます。 off-canvasプロパティを使用すると、基本メニューを非表示にでき、モバイルビューではメニューリンクが左に移動し、画面がメニュー80％とコンテンツ20％に分割されます。モバイル用のハンバーガーメニューにラベルを使用しましたが、デスクトップではラベルが非表示になっています。ブラウザーの互換性については、オフキャンバスメニューの使用例は、一般に、最新のブラウザーに付属するスマートフォンやタブレットにあります。 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>
4
Priyanka Thombre

セマンティック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>
2
Albert Israel