點擊隱藏標頭下拉

對於我正在工作的網站我很想使用類似於此處的下拉效果http://shop.jack-hughes.com/當您點擊info隱藏的div下拉菜單時。點擊隱藏標頭下拉

如果只使用CSS3或Javascript/CSS，我無法解決任何人都可以指向正確的方向或告訴我名稱的效果;很簡單，我想，但對於我的生活無法找到另一個例子。

2013-02-08 Steven_Harris_

什麼'下拉'效應。他這只是一個釣魚鏈接？ – 2013-02-08 16:38:33

CCS3的組合和JS

下面是該網站是幹什麼用的，你指

JS：

Event.observe(window, 'load', function() { 
    Event.observe('info', 'click', function() { 
     $('aside').toggleClassName('open'); 
    }); 
});

Event.observe距離原型 framewor的k - http://prototypejs.org/doc/latest/dom/Event/observe/

例如jQuery中（http://jquery.com/）等效是：

$(document).ready(function() { 
    $('.info').click(function() { 
     $('aside').toggleClass('open'); 
    }) 
});

CSS：

aside.open { 
    height: 21.25em; 
} 

aside { 
    position: relative; 
    background-color: #3f4642; 
    width: 100%; 
    color: white; 
    letter-spacing: 0.1em; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}

的HTML元素是<aside>....</aside>但它是沒有什麼區別，如果你選擇的div 。

來源

2013-02-08 16:42:03 kidwon

謝謝你使它更清晰！我會去實驗！ – 2013-02-08 17:05:27

他們有一小部分的JavaScript，這可以很容易地在任何網站上完成。基本上你需要在頁面頂部有一個隱藏的div，點擊一個鏈接就可以顯示div。

，他們使用的代碼是：

Event.observe('info', 'click', function(){ 
    $('aside').toggleClassName('open'); 
});

但是，如果你看一看jquery然後你會看到的元素是操作是很容易的事情。，他們除了使用

有一件事是他們open類CSS3過渡：

.aside { 
    transition: all 0.3s ease-out 0s 
}

這是什麼原因造成的平滑過渡效果。所以你可以使用jQuery或CSS3轉換，兩者都會產生相同的效果。我會說CSS3過渡更好，但是如果它們不支持過渡，你又會疏遠某些瀏覽器。

來源

2013-02-08 16:38:45 Deif

謝謝你使它更清晰！我會去實驗！ – 2013-02-08 17:04:38

可能使用jQuery。喜歡的東西：

http://api.jquery.com/toggle/

來源

2013-02-08 16:39:51 user2051770

除了什麼戴夫發現他們還使用CSS過渡

transition: all 0.3s ease-out;

，同時使用了「::選擇」僞爲他們的「擱置」類類的，看developer.mozilla.org

來源

2013-02-08 16:43:29 marty

點擊隱藏標頭下拉

回答

相關問題