导航移动下拉菜单，制作屏幕尺寸

Question

我的 WordPress 网站上有一个下拉菜单，其中显示了列出的所有页面。

但是我想让这个下拉导航填满屏幕的高度。

到目前为止，我的目标是 #main-nav-ul 如果我在此设置高度，它会影响下拉菜单的高度。

我知道我需要能够检测屏幕尺寸，使用 JavaScript，然后将其传递给高度？

Answer 1

CSS3 有两个全新的尺寸单位：vh（视图高度）和vw（视图宽度），其尺寸元素相对于视口尺寸

html body { padding: 0; margin: 0; }

#main-nav-ul {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

<div id="main-nav-ul"></div>

Browser support is pretty decent，但如果您需要支持旧版浏览器，那么实现此目的的经典方法如下：

jQuery(function(){

  var resizeTimer;
  var $win = $(window);
  
  // This is where we scale the menu
  function resizeMenu(){
    $('#main-nav-ul').height($win.height());
  }
  
  // Bind a handler so that the menu resizes when viewport size changes
  $win.resize(function() {
    // This throttles the resize 
    // Very important for performance since window resize
    // can be fired hundreds of times while changing the
    // size of the window!
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeMenu, 250);
  });
  
  // Set the size of the menu initially.
  $win.trigger('resize');
});

#main-nav-ul { background-color: blue; color: #fff; }
html body { padding: 0; margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-nav-ul">Hello</div>

导航移动下拉菜单，制作屏幕尺寸

Navigation Mobile dropdown, make size of screen

javascript

css

php

navigation

drop-down-menu