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

Posted 2023-03-06

【中文标题】语义 UI 导航菜单的响应式替换

【英文标题】：Responsive replacement for Semantic UI's navigation menu

【发布时间】：2016-12-09 16:12:24

【问题描述】：

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

这里有人能推荐一个很好的与语义ui集成的导航菜单吗？

感谢您的任何意见。

【问题讨论】：

您能分享一下您希望您的响应式菜单应该是什么样子吗？

为什么 Stackable 不是一个好的解决方案？

@Weedoze 因为可堆叠的主导航菜单始终“打开”，覆盖了移动屏幕上第一页的大部分内容。 Semantic 的主要开发人员说没有计划制作真正响应式菜单，所以我正在寻找其他东西。

@Albert Israel，我正在寻找一个在移动设备上压缩成标准“汉堡”菜单的顶部水平多级导航栏。

我相信语义 UI 中有一种方法可以实现这一目标。您可以在桌面上使用标准菜单，在较小的设备上使用侧边栏。

【参考方案1】：

我在下面制作了一个示例代码，说明如何使用语义 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>

【讨论】：

我明白你的意思，但它不是很干。不得不重复两次菜单结构让我相信 SUI 的导航菜单系统中缺少某些东西。

【参考方案2】：

使用最少的 html 和 css 代码，我们可以实现响应式菜单导航，该导航可以自定义且无需 javascript。使用 off-canvas 属性，我们可以隐藏基本菜单，在移动视图中，菜单链接向左显示，屏幕分为 80% 的菜单和 20% 的内容。我已将标签用于移动设备的汉堡菜单，该标签对桌面隐藏。谈到浏览器兼容性，Off Canvas Menus 的用例通常用于配备现代浏览器的智能手机和平板电脑。所有 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>

【讨论】：

谢谢！看起来像一个工作示例。我会尝试在我的网站上实现它，然后奖励你！

我刚刚意识到您的解决方案并不完全符合要求。如果要使用它，我需要删除语义菜单。我需要语义菜单，它应该折叠到手机上的可堆叠菜单。

请看最新答案 我已经用语义 UI HTML 更新了代码。

再次感谢您！我有一个相关的问题。请通过聊天或电子邮件与我联系。

【参考方案3】：

我已经更改了我之前的代码并尝试使语义 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 -->