滑動側導航欄

-3

我需要幫助製作向右滑動以顯示更多內容的垂直導航欄。我正瞄準類似於藍色條的東西：http://www.teehanlax.com/labs/。當側面導航欄被點擊時，導航欄滑出（向右），並在單擊x按鈕時滑回（向左）。滑動側導航欄

我的代碼是：

<!--Am I implementing the jQuery right?--> 
<!DOCTYPE HTML> <html> <head> <title>Nishad</title> 
<link rel="stylesheet" href="style.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> 

$(function() { $('#nav').click(function() 
{ var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px'; $(this).animate({ 'margin-left' : leftMargin }, 500); 
}); 
});  
</head> <body> <div id="wrapper"> 
<div id="nav"></div> 
<div id="content"></div> 
</div> </body> </html>

來源

2012-08-13 Art

[你有什麼試過？]（http://whathaveyoutried.com）你有哪些麻煩？ – Zhihao 2012-08-13 01:13:08

我已經構建了整個酒吧，但我不知道JavaScript是否足以讓它在點擊按鈕時滑出。 – Art 2012-08-13 01:16:02

<！ - 我是不是實現了jQuery權？ - ><！DOCTYPE HTML> \t \t \t \t Nishad \t \t <鏈接相對= 「樣式的」 href = 「style.css文件」 > \t \t \t $（函數（）{ $（'＃nav'） .click（function（）{ var leftMargin =（$（this）.css（'margin-left'）==='0px'）？ '-150px'：'0px'; $（this）。動畫（{'margin-left'：leftMargin}，500）; }）; }）; \t \t \t \t \t \t \t

\t \t

\t \t \t \t \t – Art 2012-08-13 01:55:23

如果檢查的元素，你可以看到，該網站是利用負值，爲導航的margin-left。當您點擊+時，他們將margin-left設置爲0px。

您可以通過附加點擊事件處理程序來獲得點擊效果。滑動效果可以使用jQuery的animate()完成。下面是我剛纔提到的一個例子。

HTML

<div id="wrapper"> 
    <div id="nav"></div><div id="content"></div> 
</div>

CSS

#wrapper { 
    white-space: nowrap; 
} 
#nav, #content { 
    height: 500px; 
    display: inline-block; 
} 
#nav { 
    width: 200px; 
    margin-left: -150px; 
    cursor: pointer; 
    background: lightgreen; 
} 
#content { 
    width: 500px; 
    background: lightblue; 
}

jQuery的

$(function() { 
    $('#nav').click(function() { 
     var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px'; 
     $(this).animate({ 'margin-left' : leftMargin }, 500); 
    }); 
});

jsFiddle Demo

來源

2012-08-13 01:30:25 Zhihao

滑動側導航欄

回答

相關問題