拆分圖像與頂部導航抽屜？

我正在尋找頂部導航位於我主頁上的圖片頂部。當您點擊其中一個導航按鈕時，它會打開一個帶有其他導航項目的抽屜，並將其餘內容向下推。這需要將導航抽屜打開的主頁背景圖片分開。拆分圖像與頂部導航抽屜？

你可以在這裏看到一個我正在談論的工作示例：https://squareup.com/。

點擊「業務類型」或「產品」以查看所需的效果。

我該怎麼做類似這樣的事情。有沒有人有任何指針或東西要看？

任何幫助或方向將不勝感激。

感謝，

Lazerbrains

來源

2016-02-17 Lazerbrains

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

我甚至不知道如何處理它，這就是爲什麼我問這個問題。我正在尋找一些方向，我從RickT那裏得到了。我只是在Google上找不到任何關於此的任何內容後才發佈在這裏。感謝您的「留言板101」課程。這真的有幫助。 – Lazerbrains

你需要創建3個的div，一個是菜單，一個用於隱藏的內容和一個坐在它下面，我們稱之爲「旗幟」。

在菜單上，「橫幅」設置相同的背景圖像。然後，使用的CSS屬性background-postion，設置菜單background-postion: top;和旗幟應該是background-position: negative HeightOfYourMenu;

如果您使用隱藏的內容jQuery的.slideDown方法，你應該得到你想要的效果。

因此，像：

.menu { 
    background-image: url(YourBgPath); 
    background-position: top; 
    height: 100px; 
} 

.hidden-content { 
    display: none; 
} 

.banner { 
    background-image: url(YourBgPath); 
    background-position: 0 -100px; 
}

來源

2016-02-17 18:02:39 RickTakes

哦。那是非常有意義的。我想我是在錯誤地做這件事，並且讓它太難了。我會給你一個去，讓你知道它是如何結果。 – Lazerbrains

拆分圖像與頂部導航抽屜？

回答

相關問題