如何創建響應式導航欄？

Question

我在使網站具有響應能力方面遇到了麻煩，我已經在所有頁面上做到了，只需要完成導航即可。

可以在www.christierichards.co.uk/gcc_website/index.php上看到

基本上，當窗口縮小到635px時，導航欄消失，並出現一個菜單圖標，此時CSS中的導航欄已設置為display：none。 我需要在這里做的是，當您單擊菜單圖標時，導航設置為顯示塊，並向下滑動整個頁面以顯示導航（我希望這是有道理的！）該技術已在很多響應站點中使用。如今，但我無法為自己的生活弄清楚該怎么做！

我希望有人能幫助我！ 謝謝

Answer 1

試試這個>>>

CSS:
ul > li { 
width: 24.5%; /*important*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*important*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*important*/

HTML:
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
<li>NAV4</li>
</ul>

調整大小取決於瀏覽器的大小。 請發表評論。 http://jsfiddle.net/S4TcF/文本可以垂直居中對齊並且水平對齊，請對此進行評論

Answer 2

您需要做兩件事-

1.在菜單按鈕上掛一個事件以打開/關閉導航（我看到您正在使用jQuery，因此您可以設置

$("#pull").on("click", function(){
  $("#nav-bg").toggleClass("vertical")});

2，設置CSS定義以匹配您要添加的類-類似於：

div#nav-bg.vertical {
    height: auto;
    background: blue;
}
.vertical ul {
    display: block;
}
.vertical nav li {
    display: block;
    float: none;
}
.vertical nav li a {
    display: block;
}
.vertical nav {
    background: blue;
}

Answer 3

為#pull添加onClick事件，並使用jQuery slideUp / slideDown方法在＃nav-bg ul上切換顯示。

Answer 4

您將需要像現在一樣將顯示集設置為none來加載它，但是使用一個類，將其命名為“ .hide”，然后使用jQuery click函數切換到具有顯示集的“ .show”類。封鎖。

CSS看起來像這樣：

.show {display:block;}
.hide {display:none;}

jQuery的：

$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});

這是一個工作的小提琴：

http://jsfiddle.net/22sSj/6/

Answer 5

您使用在頁面加載期間未定義的變量，則在頁面加載期間窗口大小大於635時看#pull ，因此變量var pull = $('#pull'); 沒有定義，並且窗口寬度的變化除了為條形圖提供的其他樣式外，不會給您帶來任何變化。

因此，我建議您嘗試更改腳本，以便它可以偵聽窗口寬度，並且僅在窗口寬度小於或等於636px時才執行此功能。

var winWidth = $(window).width();
$(window).rezise(function(){
    if(winWidth <= 635){
    addPull();
    }
});

function addPull(){
    menu        = $('nav ul');
    menuHeight  = menu.height();

    $(document).on('click','#pull' function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
}
$(document).ready(function(){
    if(winWidth <= 635){
    addPull();
    }
});