CSS3 - 製作簡單的點擊下拉菜單

有人可以幫助我製作與此頁面相同的下拉菜單嗎？CSS3 - 製作簡單的點擊下拉菜單

http://uk.fjordblink.com/presentation/

我想做出同樣的事情，同樣的事情。

所以我得到它後面的CSS，例如。 #PresentationContainer.Pointer.PointerContent 但是，我似乎無法使滑動下拉效果的下拉菜單。

此外，當單擊該框時，我似乎無法使文本和圖片顯示在下拉菜單中。有沒有一些PHP在這方面的involed？

感謝提前:)

來源

2014-01-10 Patrick

沒有PHP介入與他們使用JQuery'.slideDown這種效果（）' – cmorrissey

它看起來像網站使用jQuery進行交互和動畫。你可以做這樣的事情：

$('#button_id').on('click', clickButton);  
function clickButton() 
{ 
    $(this).stop().slideToggle(); 
}

哪裏button_id是，用戶將點擊頁面上的元素的ID。

有關的jQuery的slideToggle更多的信息：http://api.jquery.com/slidetoggle/

來源

2014-01-10 16:34:38

這是要走的路。超級簡單，並提供一個不錯的默認動畫。 @Buchow_PHP是否有利用您的版本，而不是更簡潔的 $（'＃button_id'）。click（function（）{ $（this）.stop（）。slideToggle（）; }） ; – Davidicus

<script type="text/javascript"> 
     $(function() { 

      $("#PresentationContainer h3").click(function() { 

       // Check if this presentation is allready open? 
       bIsOpen = $(".PointerContent", $(this).parent()).css("display") == "block"; 

       $("#PresentationContainer .PointerContent").slideUp(); 

       // Open the current pointer content 
       if(! bIsOpen) 
       { 
        $(".PointerContent", $(this).parent()).slideDown("fast"); 
       } 

      }); 

      // Wrap all images in the lightbox area with an a tag 
      $("#PresentationContainer .GalleryContainer img").each(function() { 

       oLink = document.createElement("a"); 
       oLink.href = $(this).attr("src"); 

       if($(this).attr("title") != null) 
       { 
        oLink.title = $(this).attr("title"); 
       } 

       $(this).wrap(oLink); 

      }); 

      $("#PresentationContainer a[rel='lightbox']").click(function(e) { 

       $(".GalleryContainer a", $(this).parent()).lightBox({ 
        fixedNavigation: true, 
        imageLoading: "/static/lib/lightbox/images/lightbox-ico-loading.gif", 
        imageBtnClose: "/static/lib/lightbox/images/lightbox-btn-close.gif", 
        imageBtnPrev: "/static/lib/lightbox/images/lightbox-btn-prev.gif", 
        imageBtnNext: "/static/lib/lightbox/images/lightbox-btn-next.gif" 
       }); 

       $(".GalleryContainer a:first", $(this).parent()).trigger("click"); 

       e.preventDefault(); 

      }); 

     }); 
     </script>

這一塊代碼使用該效果，還可以添加必要的jQuery文件進行適當的工作

來源

2014-01-10 16:58:11

jQuery的！如下圖所示

$('.yourClicker').click(function() { 
    $('.yourMenu').slideToggle(); 
    return false; 
});

凡.yourClicker是click事件觸發和.yourMenu是類，你是摺疊和展開元素的鏈接到一個版本的jQuery並添加代碼。下面撥弄：

http://jsfiddle.net/Davidicus/k4LG9/

來源

2014-01-10 16:58:55 Davidicus

CSS3 - 製作簡單的點擊下拉菜單

回答

相關問題