响应式菜单问题

我目前正在致力于http://jonathan.ohrstrom.nu，我正在尝试获取链接以使用响应式设计的功能。如果窗口宽度小于1000px，则链接消失，而出现菜单按钮;创建一个下拉菜单。响应式菜单问题

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
 
    function myFunction() { 
 
     var x = document.getElementById("topnav"); 
 
     if (x.className === "menuList") { 
 
      x.className += " responsive"; 
 
     } else { 
 
      x.className = "menuList"; 
 
     } 
 
    }

.menu_wrapper { 
 
    \t width: 100%; 
 
    \t height: 70px; 
 
    \t background-color: rgba(45, 45, 45, .9); 
 
    \t left: 0; 
 
    \t top: 0; 
 
    \t position: fixed; 
 
    \t z-index: 99; 
 
    \t box-shadow: 0 3px 0 rgba(229, 160, 0, .9); 
 
    } 
 
    .menu_content { 
 
    \t width: 1000px; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    \t line-height: 70px; 
 
    \t color: #a0a0a0; 
 
    \t font-weight: 400; 
 
    \t font-family: 'Roboto', sans-serif; 
 
    \t text-transform: uppercase; 
 
    } 
 
    .menu_logo { 
 
    \t float: left; 
 
    \t font-size: 18px; 
 
    } 
 
    a.logotyp, a.logotyp:visited { 
 
    \t color: white; 
 
    \t transition: .1s; 
 
    \t text-decoration: none; 
 
    } 
 
    a.logotyp:hover { 
 
    \t color: #a0a0a0; 
 
    } 
 
    
 
    ul.menuList { 
 
    \t list-style-type: none; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    \t overflow: hidden; 
 
    } 
 
    
 
    ul.menuList li.icon { 
 
    \t display: none; 
 
    } 
 
    
 
    ul.menuList li { 
 
    \t float: right; 
 
    \t display: inline; 
 
    \t margin: 0 10px; 
 
    } 
 
    
 
    ul.menuList li a { 
 
    \t color: #a0a0a0; 
 
    \t transition: .1s; 
 
    \t text-decoration: none; 
 
    } 
 
    ul.menuList li a:hover { 
 
    \t color: #e5a000; 
 
    } 
 
    
 
    /* RESPONSIVE MENU */ 
 
    @media screen and (max-width:1000px) { 
 
     ul.menuList li {display: none;} 
 
     ul.menuList li.icon { 
 
     float: right; 
 
     display: inline-block; 
 
     } 
 
    } 
 
    @media screen and (max-width:1000px) { 
 
     ul.menuList.responsive {position: relative;} 
 
     ul.menuList.responsive li.icon { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
     } 
 
     ul.menuList.responsive li { 
 
     float: none; 
 
     display: inline; 
 
     } 
 
     ul.menuList.responsive li a { 
 
     display: block; 
 
     text-align: right; 
 
     } 
 
    }

<!-- MENU --> 
 
    \t <div class="menu_wrapper"> 
 
    \t 
 
    \t \t <div class="menu_content"> 
 
    \t \t \t 
 
    \t \t \t <div class="menu_logo"> 
 
    \t \t \t \t <a href="#top" class="logotyp">&lt;/ECORND></a> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div class="menu_links"> 
 
    \t \t \t \t <ul class="menuList" id="topnav"> 
 
    \t \t \t \t \t <li><a href="#kontakt">Kontakt</a></li> 
 
    \t \t \t \t \t <li><a href="#projekt">projekt</a></li> 
 
    \t \t \t \t \t <li><a href="#tjänster">Tjänster</a></li> 
 
    \t \t \t \t \t <li><a href="#about">info</a></li> 
 
    \t \t \t \t \t <li><a href="#top">hem</a></li> 
 
    \t \t \t \t \t <li class="icon"> 
 
    \t \t \t \t \t \t <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a> 
 
    \t \t \t \t \t </li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t </div> 
 
    \t 
 
    \t </div>

但是，如果你在现场看，下拉并未真正发挥什么好，并且下拉按钮不按窗口宽度..我在做什么错？

注：我的大部分代码来自w3school的响应教程

来源

2016-12-08 Jonathan Öhrström

改变这种风格：

ul.menuList li.icon { 
    float: right; 
}

下面添加到style.css的行号：77个

ul.menuList li.icon { 
    position: fixed; 
    right: 15px; 
    top: 5px; 
}

来源

2016-12-08 08:40:34 shyamm

谢谢！下拉按钮现在就跟着浏览器的宽度！剩下的唯一问题是下拉菜单，它不遵循宽度，它太高了，文本向右漂移，因此无法看到一些单词（我可以自己修复最后一个单词） –

编辑：我高估了自己的能力，试图让下拉文本对齐到右边，整个文本都向右移动。此外，由于某种原因，下拉按钮向右移动时也是如此。 –

hmmm，all the best .. ！ – shyamm

响应式菜单问题

回答

相关问题