Question

你好当我的大屏幕移动到小屏幕时，我正在尝试更改屏幕的布局。当我有大屏幕时，我在标题上显示我的菜单选项作为标签。我能够制作。但是当我将屏幕尺寸减小到600px宽度我需要在下拉菜单选项

上显示

我该怎么做？我搜索谷歌并找到使用媒体查询是可能的。我试着实现这一点。但是我得到了活动，但它是如何可能的

这是我的代码和图片

    #menubar li {
        display: inline;
        padding:0.5em;
        font-size:1.5em;
        color :red
    }
    @media screen and (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }
#menubar{
  float:right;
  display: block;
  position:relative;
}

#menubarCont {
  width: 100%;
  float: right ;
  right:10em;
  position:relative;
}

Answer 1

您只需要媒体查询即可隐藏您不想显示的菜单。这是一个简单的例子:(调整浏览器窗口大小以进行测试）

＆＃13;

.menu {
    width: 100%;
    height: 60px;
    background-color: orange;
}

@media screen and (max-width: 600px) {
    .large {
        display: none;
    }
}

@media screen and (min-width: 600px) {
    .small {
        display: none;
    }
}

＆＃13;

<div class="menu">
    <div class="large">
        Large screen menu
    </div>
    <div class="small">
      <select>
        <option>menu item 1</option>
        <option>menu item 2</option>
      </select>
    </div>
</div>

＆＃13;

And here's a Fiddle too

Answer 2

扔掉我的两分钱。 @Schlaus的答案是做到这一点的首选方式以及我也会这样做的方式。下面是一个代码笔，我找到了一种方法，无需在标记中对菜单进行两次编码 - 对于那些对使用JQuery完成它的其他替代方法感到好奇的人来说，它是一个很好的参考。

http://codepen.io/ericrasch/pen/GlBed

<强> HTML

<nav> 

  <h1>This menu turns into a <code>&lt;select&gt;</code> when window is less than 960px to conserve space.</h1>

  <ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#books">Books</a></li> 
    <li><a href="#blog">Blog</a></li> 
    <li><a href="#about">About Us</a></li> 
    <li><a href="#support">Support</a></li> 
  </ul>

</nav>

<强> CSS

* {
  margin: 0;
  padding: 0;
}

h1 {
  font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 500px;
  margin: 0 auto 15px;
}

nav {
  display: block;
  width: 960px;
  margin: 100px auto;
  text-align: center;
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: inline-block;
    background: #333;
    color: white;
    padding: 5px 15px;
    border: 1px solid white;
    text-decoration: none;
    &:hover {
      border: 1px solid red;
      background: red;
    }
    &:active {
      background: blue;
    }
  }
  select {
    display: none;
  }
}

@media (max-width: 960px) {
  nav {
    ul {
      display: none;
    }
    select {
      display: inline-block;
    }
  }
}

<强> JQuery的

// DOM ready
$(function() {

  // Create the dropdown base
  $("<select />").appendTo("nav");

  // Create default option "Go to..."
  $("<option />", {
    "selected": "selected",
    "value"   : "",
    "text"    : "Go to..."
  }).appendTo("nav select");

  // Populate dropdown with menu items
  $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
      "value"   : el.attr("href"),
      "text"    : el.text()
    }).appendTo("nav select");
  });

   // To make dropdown actually work
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
  $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

});

希望这能为其他人清除一些事情，并希望将来帮助其他人

干杯

如何在尺寸减小时将标签更改为下拉列表？

2 个答案: