帶下拉元素的響應式菜單

大多數情況下，我正在複製PureCSS「docs」中的demo code以實施其dropdown menu。帶下拉元素的響應式菜單

我已經創建了一個CodePen，並在此處共享代碼。

問題是，在垂直版本中，子菜單項不會在懸停或點擊時顯示。

我假設這是通過設計，我不確定是否應該編寫額外的JavaScript（example）以啓用點擊觸摸設備上的顯示等。

我所擁有的是：

HTML：

<h1>PureCSS.io Responsive Nav Test</h1> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css"> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> 
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s><s class="bar"></s></a> 
<nav class="custom-wrapper pure-menu custom-restricted-width pure-u-1" id="menu"> 
    <div class="pure-menu pure-menu-horizontal custom-can-transform"> 
     <ul id="menu-header-nav-menu" class="pure-menu-list"> 
     <li class="pure-menu-item"> 
      <a class="pure-menu-link" class='pure-menu-link' href="#">One</a> 
     </li> 
     <li class="pure-menu-item"> 
      <a class="pure-menu-link" class='pure-menu-link' href="#">Two</a> 
     </li> 
     <li class="pure-menu-item"> 
      <a class="pure-menu-link" class='pure-menu-link' href="#">Three</a> 
     </li> 
     <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> 
      <a class="pure-menu-link" class='pure-menu-link' href="#">Parent</a> 
      <ul class="pure-menu-children"> 
       <li class="pure-menu-item"> 
       <a class="pure-menu-link" class='pure-menu-link' href="#">Child One</a> 
      </li> 
       <li class="pure-menu-item"> 
       <a class="pure-menu-link" class='pure-menu-link' href="#">Child Two</a> 
      </li> 
      </ul> 
      </li> 
     </ul> 
    </div> 
</nav>

CSS：

.site-header { 
     position: relative; 
    } 

    .custom-wrapper { 
     margin-bottom: 1em; 
     -webkit-font-smoothing: antialiased; 
     height: 2.1em; 
     overflow: hidden; 
     -webkit-transition: height 0.5s; 
     -moz-transition: height 0.5s; 
     -ms-transition: height 0.5s; 
     transition: height 0.5s; 
    } 

    .custom-wrapper.open { 
     height: 14em; 
    } 

    .custom-wrapper { 
     height: 0; 
    } 

    .custom-toggle { 
     width: 34px; 
     height: 34px; 
     position: absolute; 
     top: 0; 
     right: 0; 
     display: none; 
    } 

    .custom-toggle { 
     display: block; 
    } 

    .custom-toggle .bar { 
     background-color: #777; 
     display: block; 
     width: 20px; 
     height: 2px; 
     border-radius: 100px; 
     position: absolute; 
     top: 18px; 
     right: 7px; 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     -ms-transition: all 0.5s; 
     transition: all 0.5s; 
    } 

    .custom-toggle .bar:first-child { 
     -webkit-transform: translateY(-6px); 
     -moz-transform: translateY(-6px); 
     -ms-transform: translateY(-6px); 
     transform: translateY(-6px); 
    } 

    .custom-toggle .bar:last-child { 
     -webkit-transform: translateY(+6px); 
     -moz-transform: translateY(+6px); 
     -ms-transform: translateY(+6px); 
     transform: translateY(+6px); 
    } 

    .custom-toggle.x .bar:last-child { 
     display: none; 
    } 

    .custom-toggle.x .bar { 
     -webkit-transform: rotate(45deg); 
     -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     transform: rotate(45deg); 
    } 

    .custom-toggle.x .bar:first-child { 
     -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     transform: rotate(-45deg); 
    } 

    @media (min-width: 47.999em) { 
    .custom-toggle { 
     display: none; 
    } 

    .custom-wrapper { 
     height: 3.2em; 
     overflow: visible; 
    } 

    .pure-menu-children .pure-menu-item { 
     background-color: #999; 
    } 
    }

的Javascript：

(function (window, document) { 
    var menu = document.getElementById('menu'), 
     WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize'; 

    function toggleHorizontal() { 
     [].forEach.call(
      document.getElementById('menu').querySelectorAll('.custom-can-transform'), 
      function(el){ 
       el.classList.toggle('pure-menu-horizontal'); 
      } 
    ); 
    }; 

    function toggleMenu() { 
     // set timeout so that the panel has a chance to roll up 
     // before the menu switches states 
     if (menu.classList.contains('open')) { 
      setTimeout(toggleHorizontal, 500); 
     } 
     else { 
      toggleHorizontal(); 
     } 
     menu.classList.toggle('open'); 
     document.getElementById('toggle').classList.toggle('x'); 
    }; 

    function closeMenu() { 
     if (menu.classList.contains('open')) { 
      toggleMenu(); 
     } 
    } 

    document.getElementById('toggle').addEventListener('click', function (e) { 
     toggleMenu(); 
     e.preventDefault(); 
    }); 

    window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); 
})(this, this.document);

我是正確的假設，我需要處理與addi移動subnav劇本？

來源

2017-08-30 MikeiLL

發生了什麼事情是「孩子們」脫離了頁面。

我爲什麼會被要求修改的基本蕊純CSS標記，但使這項工作在這種情況下不知道，我修改了以下兩個項目爲小屏幕尺寸：

.pure-menu-has-children { 
    position: relative; 
} 

.pure-menu-children { 
    left: 3em; 
    top: 2em; 
}

.pure-menu-childrenul有position: absolute，但我不確定它是什麼relative父母是。也許這是ul。無論如何，使其相對父親.pure-menu-has-childrenli便於它相對於父列表項顯示。

我使用的是移動第一種方法，這樣的話對於較大的視傳媒查詢，可以恢復到默認框架：

.pure-menu-children { 
    left: 100%; 
    top: 0; 
}

不過，我想我更喜歡它，因爲它是在較小的設備。這是更新的Pen。

不完全開心。也許垂直菜單不需要太寬。在這種情況下，我還需要添加到.pure-menu-link a text-align: left，因爲child item似乎仍然基於全角項目進行對齊。

來源

2017-08-31 06:18:06 MikeiLL

帶下拉元素的響應式菜單

回答

相關問題