没有显示响应菜单 [英] responsive menu not showing

查看：106
本文介绍了没有显示响应菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在较小的屏幕上将菜单项显示为单独的行。这是非常基本的，看到很多地方。我要去的效果是：





与我迄今为止（代码如下）菜单项只显示旁边的标志（即他们是如何在那里的桌面）。

另外我需要添加一个背景图像到菜单项。一个图像填充整个区域，而不是每个菜单重复的图像

我已经添加了： 

 < meta name =viewportcontent =width = device-width，initial-scale = 1>

这是我的 $ b

// make topnav响应手机屏幕功能topNav（）{var x = document.getElementById（myTopnav）; if（x.className ===myTopnav）{x.className + =responsive; }其他{x.className =myTopnav; }} 

  .topnav {background-repeat：no-repeat ;背景尺寸：盖;溢出：可见;宽度：100％; padding-bottom：0px;}。topnav nav {padding-top：5px; padding-bottom：8px;背景：-webkit-linear-gradient（左，透明，黑色，黑色，透明）; / *对于Safari 5.1至6.0 * / background：-o-linear-gradient（左，透明，黑色，黑色，透明）; / *对于Opera 11.1至12.0 * /背景：-moz-linear-gradient（左，透明，黑色，黑色，透明）; / *对于Fx 3.6至15 * /背景：线性渐变（向右，透明，黑色，黑色，透明）; / *标准语法（必须是最后一个）* / width：100％;}。topnav nav div {width：85％;利润率：7.5％;保证金率：7.5％;显示：弯曲; align-items：center; justify-content：center;}。link {color：white;文字修饰：无; font-size：11px; font-weight：700; / *这是未来重量* /宽度：11.25％; letter-spacing：2px;自动换行：真实的;显示：内联块; vertical-align：top; text-align：center; / * line-height：5em; * /}。notlink {width：30.4％;余量：1％;保证金：1％; display：inline-block;} notlink img {width：100％;}。topnav nav .link：hover {color：＃008ed2;}。icon {display：none; font-size：32px;白颜色;文字修饰：无; text-align：center; line-height：40px;最小宽度：40px; min-height：40px;} / *当屏幕宽度小于600像素时，隐藏除第一个（Home）之外的所有链接。显示包含的链接应该打开并关闭topnav（.icon）* / @ media only屏幕和（max-width：767px）{.myTopnav a.link {display：none;} .topnav nav div {width：100％ ; margin-left：0; margin-right：0;位置：相对; top：0;左：0; } .icon {display：inline-block;位置：绝对;正确：0; } .notlink {width：70％;显示：flex; align-items：center; justify-content：center; } .notlink img {max-width：100％;最大高度：960x75像素;宽度：自动;身高：自动; }} @媒体屏幕和（最大宽度：767px）{.myTopnav.responsive {position：relative;} .myTopnav.responsive .icon {position：absolute;正确：0; top：0; } .myTopnav.responsive a {float：none;显示：块; text-align：left; }}  

 < div class =topnav> < NAV> < div class =myTopnavid =myTopnav> < a class =linkhref =index.html> HOME< / a> < a class =linkid =selectedhref =about.html>关于< / a> < a class =linkhref =expertise.html> EXPERTISE< / a> < a class =notlinkhref =index.html>< img src =https://www.google.com/logos/doodles/2017/earth-day-2017-5650394117046272-s.png >< / A> < a class =linkhref =industries.html> INDUSTRIES< / a> < a class =linkhref =friends.html> FRIENDS OF MARY< / a> < a class =linkhref =contact.html> CONTACT< / a> < a href =javascript：void（0）; class =icononclick =topNav（）>&＃9776;< / a> < / DIV> < / NAV> < / div>

解决方案

在这里我的解决方案（改变了标记，js和css）：

HTML： 

 < div class =topnavdata-mobile =false> 
< nav> 
< div class =myTopnavid =myTopnav> 
< a class =linkhref =index.html> HOME< / a> 
< a class =linkid =selectedhref =about.html>关于< / a> 
< a class =linkhref =expertise.html> EXPERTISE< / a> 
< a class =notlinkhref =index.html>< img src =https://www.google.com/logos/doodles/2017/earth-day-2017-5650394117046272 -s.png>< / A> 
< a class =linkhref =industries.html> INDUSTRIES< / a> 
< a class =linkhref =friends.html> FRIENDS OF MARY< / a> 
< a class =linkhref =contact.html> CONTACT< / a> 
 < / div> 
< / nav> 
 
< nav id =mobile-menu> 
< a class =linkhref =index.html> HOME< / a> 
< a class =linkid =selectedhref =about.html>关于< / a> 
< a class =linkhref =expertise.html> EXPERTISE< / a> 
< a class =linkhref =industries.html> INDUSTRIES< / a> 
< a class =linkhref =friends.html> FRIENDS OF MARY< / a> 
< a class =linkhref =contact.html> CONTACT< / a> 
< / nav> 
< / div>

JS：

  function topNav（）{
 var topNav = document.querySelector（'。topnav'）; 
 topNav.dataset.mobile =（topNav.dataset.mobile ==false）？真假; 
}

CSS： 

  html，body {
 height：100％; 
保证金：0; 
 padding：0; 
背景颜色：白色; 
} 
 
 .topnav {
 overflow：hidden; 
宽度：100％; 
 padding-bottom：0px; 
} 
 
 .topnav nav：first-of-type {
 padding-top：5px; 
 padding-bottom：8px; 
 background：-webkit-linear-gradient（left，transparent，black，black，transparent）; / *对于Safari 5.1至6.0 * / 
背景：-o-linear-gradient（左，透明，黑色，黑色，透明）; / *对于Opera 11.1至12.0 * / 
 background：-moz-linear-gradient（left，transparent，black，black，transparent）; / *对于Fx 3.6至15 * / 
背景：线性渐变（向右，透明，黑色，黑色，透明）; / *标准语法（必须是最后一个）* / 
 width：100％; 
} 
 
 .topnav .myTopnav {
 width：85％; 
保证金余额：7.5％; 
保证金率：7.5％; 
 display：flex; 
 align-items：center; 
 justify-content：center; 
} 
 
 .link {
颜色：白色; 
 text-decoration：none; 
 font-size：11px; 
 font-weight：700; / *这是非常重的* / 
宽度：11.25％; 
 letter-spacing：2px; 
 word-wrap：true; 
 display：inline-block; 
 vertical-align：top; 
 text-align：center; 
 / * line-height：5em; * / 
} 
 
 .notlink {
 width：30.4％; 
保证金余额：1％; 
保证金率：1％; 
 display：inline-block; 
} 
 
 .notlink img {
 width：100％; 
} 
 
 .topnav nav .link：hover {
 color：＃008ed2; 
} 
 
 .icon {
 display：none; 
 font-size：32px; 
颜色：白色; 
 text-decoration：none; 
 text-align：center; 
 line-height：40px; 
最小宽度：40px; 
 min-height：40px; 
} 
 
＃mobile-menu {
 width：100％; 
身高：100％; 
 padding：20px; 
背景：url（https://pbs.twimg.com/profile_images/638771889339404289/h64dZ4wh_400x400.png）无重复中心中心固定; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
 display：flex; 
 flex-direction：column; 
 / * justify-content：center; - >将其添加到垂直居中* / 
 align-items：center; 
 box-sizing：border-box; 
} 
 
＃mobile-menu> * {
颜色：黑色; 
} 
 
 .topnav [data-mobile = false]＃mobile-menu {
 display：none; 
} 
 
 
 @media仅限屏幕和（最大宽度：767px）{
 .myTopnav a.link {
 display：none; 
} 
 
 .topnav [data-mobile = true] {
 height：100％; 
} 
 
 .topnav nav div {
 width：100％; 
身高：100％; 
 margin-left：0; 
 margin-right：0; 
职位：亲属; 
 top：0; 
剩下：0; 
} 
 
 .icon {
 display：inline-block; 
位置：绝对; 
 right：0; 
} 
 
 .notlink {
 width：70％; 
 display：flex; 
 align-items：center; 
 justify-content：center; 
} 
 
 .notlink img {
最大宽度：100％; 
最大高度：75px; 
 width：auto; 
 height：auto; 
 
 
 
 
 $ b $ p 
 $ b 
在此之后，你需要将它正确地放在你的下面内容，当移动菜单展开。
 
 
 
 小提琴 
 
I want to show the menu items as seperate rows on smaller screen. This is pretty basic and seen many places. The effect i am going for is:






With what i have so far (code Below) the menu items just show up next to the logo (thats how they are there for desktop).



Also i need to add a Background Image to the menus items. One image that fills the entire area and not the same image repeating for each menu



I have already added:
<meta name="viewport" content="width=device-width, initial-scale=1">

Here is my fiddle







//make the topnav responsive for mobile screens
function topNav() {
    var x = document.getElementById("myTopnav");
    if (x.className === "myTopnav") {
        x.className += " responsive";
    } else {
        x.className = "myTopnav";
    }
}


.topnav {
    background-repeat:no-repeat;
    background-size:cover;
    overflow:visible;
    width: 100%;
    padding-bottom: 0px;
}

.topnav nav{
    padding-top: 5px;
    padding-bottom: 8px;
    background: -webkit-linear-gradient(left, transparent, black, black, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, transparent, black,black, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, transparent, black,black, transparent); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, transparent, black, black, transparent); /* Standard syntax (must be last) */
    width:100%;
}

.topnav nav div{
    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5% ;
    display:flex;
    align-items: center;
    justify-content: center;
}

.link {
    color: white;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700; /* this is futura heavy*/
    width:11.25%;
    letter-spacing: 2px;
    word-wrap:true;
    display:inline-block;
    vertical-align: top;
    text-align: center;
    /*line-height: 5em;*/
}

.notlink {
    width:30.4%;
    margin-left: 1%;
    margin-right: 1%;
    display: inline-block;
}

.notlink img {
    width: 100%;
}

.topnav nav .link:hover {
    color: #008ed2;
}

.icon {
    display: none;
    font-size: 32px;
    color: white;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    min-width: 40px;
    min-height: 40px;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media only screen and (max-width: 767px) {
    .myTopnav a.link {display: none;}
    
    .topnav nav div{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .icon {
      display :inline-block;
      position : absolute;
      right : 0;
    }
    
    .notlink {
        width: 70%;
        display : flex;
        align-items: center;
        justify-content : center;
    }
    .notlink img {
        max-width:100%;
        max-height:75px;
        width: auto;
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    .myTopnav.responsive {position: relative;}
    .myTopnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .myTopnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

}


<div class="topnav">
                <nav>
                    <div class="myTopnav" id="myTopnav">
                        <a class="link" href="index.html">HOME</a>
                        <a class="link" id ="selected" href="about.html">ABOUT</a>
                        <a class="link" href="expertise.html">EXPERTISE</a>
                        <a class="notlink" href="index.html"><img src="https://www.google.com/logos/doodles/2017/earth-day-2017-5650394117046272-s.png"></a>
                        <a class="link" href="industries.html">INDUSTRIES</a>
                        <a class="link" href="friends.html">FRIENDS OF MARY</a>
                        <a class="link" href="contact.html">CONTACT</a>
                        <a href="javascript:void(0);" class="icon" onclick="topNav()">&#9776;</a>
                    </div>
                </nav>
            </div>






 解决方案 
Here my solution (changed markup, js and css): 



HTML:
<div class="topnav" data-mobile="false">
  <nav>
    <div class="myTopnav" id="myTopnav">
      <a class="link" href="index.html">HOME</a>
      <a class="link" id ="selected" href="about.html">ABOUT</a>
      <a class="link" href="expertise.html">EXPERTISE</a>
      <a class="notlink" href="index.html"><img src="https://www.google.com/logos/doodles/2017/earth-day-2017-5650394117046272-s.png"></a>
      <a class="link" href="industries.html">INDUSTRIES</a>
      <a class="link" href="friends.html">FRIENDS OF MARY</a>
      <a class="link" href="contact.html">CONTACT</a>
      <a href="javascript:void(0);" class="icon" onclick="topNav()">&#9776;</a>
    </div>
  </nav>

  <nav id="mobile-menu">
      <a class="link" href="index.html">HOME</a>
      <a class="link" id ="selected" href="about.html">ABOUT</a>
      <a class="link" href="expertise.html">EXPERTISE</a>
      <a class="link" href="industries.html">INDUSTRIES</a>
      <a class="link" href="friends.html">FRIENDS OF MARY</a>
      <a class="link" href="contact.html">CONTACT</a>
  </nav>
</div>

JS:
function topNav() {
  var topNav = document.querySelector('.topnav');
  topNav.dataset.mobile = (topNav.dataset.mobile == "false") ? true : false;
}

CSS:
html, body {
  height : 100%;
  margin : 0;
  padding : 0;
  background-color : white;
}

.topnav {
  overflow:hidden;
  width: 100%;
  padding-bottom: 0px;
}

.topnav nav:first-of-type{
  padding-top: 5px;
  padding-bottom: 8px;
  background: -webkit-linear-gradient(left, transparent, black, black, transparent); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, transparent, black,black, transparent); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, transparent, black,black, transparent); /* For Fx 3.6 to 15 */
  background: linear-gradient(to right, transparent, black, black, transparent); /* Standard syntax (must be last) */
  width:100%;
}

.topnav .myTopnav{
  width: 85%;
  margin-left: 7.5%;
  margin-right: 7.5% ;
  display:flex;
  align-items: center;
  justify-content: center;
}

.link {
  color: white;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700; /* this is futura heavy*/
  width:11.25%;
  letter-spacing: 2px;
  word-wrap:true;
  display:inline-block;
  vertical-align: top;
  text-align: center;
  /*line-height: 5em;*/
}

.notlink {
  width:30.4%;
  margin-left: 1%;
  margin-right: 1%;
  display: inline-block;
}

.notlink img {
  width: 100%;
}

.topnav nav .link:hover {
  color: #008ed2;
}

.icon {
  display: none;
  font-size: 32px;
  color: white;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  min-width: 40px;
  min-height: 40px;
}

#mobile-menu {
  width : 100%;
  height : 100%;
  padding : 20px;
  background: url(https://pbs.twimg.com/profile_images/638771889339404289/h64dZ4wh_400x400.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  flex-direction: column;
  /*justify-content: center; --> add this to center vertically*/ 
  align-items: center;
  box-sizing : border-box;
}

#mobile-menu > * {
  color : black;
}

.topnav[data-mobile=false] #mobile-menu {
  display : none;
}


@media only screen and (max-width: 767px) {
  .myTopnav a.link {
    display: none;
  }

  .topnav[data-mobile=true]{
    height : 100%;
  }

  .topnav nav div{
    width: 100%;
    height : 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    top: 0;
    left: 0;
  }

  .icon {
    display :inline-block;
    position : absolute;
    right : 0;
  }

  .notlink {
    width: 70%;
    display : flex;
    align-items: center;
    justify-content : center;
  }

  .notlink img {
    max-width:100%;
    max-height:75px;
    width: auto;
    height: auto;
  }
}

After this you need to place it correctly over your following content when the mobile menu is expanded.



fiddle


                        
这篇关于没有显示响应菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆