如何創建響應式導航欄？

我很難讓網站響應，我已經完成了所有的頁面，只需要完成我的導航。如何創建響應式導航欄？

它可以在www.christierichards.co.uk/gcc_website/index.php可以看出

基本上當調整窗口大小到635px的資產淨值UL消失，出現一個菜單圖標，在CSS在這點導航ul已被設置爲顯示：無。我需要在這裏發生的是，當你點擊菜單圖標時，導航被設置爲顯示塊並滑動整個頁面以顯示導航（我希望這是有道理的！）這種技術與很多響應站點現在，但我不能爲我的生活弄清楚如何做到這一點！

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

來源

2014-04-12 user3527456

試試這個

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/文本可垂直居中對齊和horiziontaly請評論回該

來源

2014-04-12 18:35:30

你需要做兩件事情 -

1.Hang上的菜單按鈕的事件，打開/關閉導航（我看你」重新使用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; 
}

來源

2014-04-12 18:36:43 lyosef

添加的onClick前夕nt for #pull並使用jQuery slideUp/slideDown方法在＃nav-bg ul上切換顯示。

來源

2014-04-12 18:36:44 slashsharp

歡迎來到StackOverflow。您會發現顯示編碼細節的答案（通常至少有幾行）會得到更好的答案。 – mjhm

您需要將顯示設置爲none，然後使用一個類，我們將其命名爲「.hide」，然後使用jQuery點擊功能切換到「.show」類將顯示器設置爲阻止。

CSS看起來像這樣：

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

的jQuery：

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

這裏是工作提琴：

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

來源

2014-04-12 18:55:51

您使用的變量未在頁面加載中定義，您的頁面加載時頁面加載中不可見#pull，因爲窗口大小大於635，所以未定義變量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(); 
    } 
});

來源

2014-04-12 19:10:16 Michael

如何創建響應式導航欄？

回答

相關問題