響應式菜單問題

我目前正在致力於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

響應式菜單問題

回答

相關問題