如何添加仅显示在移动屏幕尺寸上的菜单？

现在我有一个像样的菜单，在我的web应用程序上为桌面屏幕格式化。但是，在较小的屏幕尺寸下，菜单确实显示不正确。在这一点上，我想，如果我可以再补充一个汉堡包菜单这样的--->如何添加仅显示在移动屏幕尺寸上的菜单？

<header class="header"> 
    <div class="burger"> 
    <div class="burger__patty"></div> 
    <div class="burger__patty"></div> 
    <div class="burger__patty"></div> 
    </div> 

    <nav class="menu"> 
    <div class="menu__brand"> 
     <a href=""><div class="logo"></div></a> 
    </div> 
    <ul class="menu__list"> 
     <li class="menu__item"><a href="" class="menu__link">Work</a></li> 
     <li class="menu__item"><a href="" class="menu__link">About</a></li> 
     <li class="menu__item"> 
     <a href="https://twitter.com/ettrics" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a> 
     </li> 
     <li class="menu__item"> 
     <a href="https://dribbble.com/ettrics" target="_blank" class="menu__link menu__link--social"> 
      <i class="fa fa-dribbble"></i></a> 
     </li> 
    </ul> 
    </nav> 
</header> 

<main> 
    <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1> 
    <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2> 
    <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p> 
</main>

，但只有它出现在移动的平板电脑的屏幕尺寸。基本上我问的是有没有办法添加这个菜单并将其隐藏在桌面大小的屏幕上。

来源

2016-06-28 Ian Lapham

尝试使用CSS3 @media规则 – Roxoradev

要延长@Roxoradev的答案。检查此链接https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Baruch

事实上，你可以用媒体查询适应您的菜单：

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

引导有一个导航栏模板次在可以帮你（菜单响应）：https://getbootstrap.com/examples/navbar/

但是，如果你想有一个侧边栏，这可能是更好的：http://startbootstrap.com/template-overviews/simple-sidebar/

来源

2016-06-28 14:27:46 Allan

有反正我可以使用此模板，但将导航栏移动到一边吗？ –

我在我的答案中添加了一个侧边栏模板链接。我希望这可以帮助你。如果是这种情况，请将答案标为正确:) – Allan

这是媒体查询进来

@media (min-width: 600px) { 
    .your-div { 
     display: none; 
    } 
}

这将增加display: none到您的div时浏览器比600个像素宽。您还可以使用max-width: 600px添加最多600像素宽的CSS规则。

来源

2016-06-28 14:05:02

是 - 对于这一点，你可以使用媒体查询。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在这种情况下，与媒体查询你的CSS看起来像

.burger { 
    display: none; 
} 
.menu { 
    display: block; 
} 

@media screen and (max-width: 960px) { 
    .burger { 
    display: block; 
    } 
    .menu { 
    display: none; 
    } 
}

这告诉浏览器，当视最多960像素宽（任意宽度从0 - 960），显示汉堡，隐藏菜单。

您还需要一点的jQuery或纯JavaScript来切换。菜单的显示点击.burger时：

$('.burger').click(function() { 
    $('.menu').toggle(); 
});

这里有一个CodePen显示这是如何工作（调整试玩区直到“汉堡”出现）：http://codepen.io/Ronamo/pen/LZWzVJ

来源

2016-06-28 14:11:50 Jaron

如何添加仅显示在移动屏幕尺寸上的菜单？

回答

相关问题