曾經有一段時間，導航菜單的唯一位置在頁面的頂部。還有一段時間，菜單位于左或右列內(最好是左列)。然后，一個滑出邊欄的時代來臨了，突然之間，一切都變得有意義了。我們終于找到了拼圖的最后一塊。
側邊欄已經成為網站設計不可或缺的一部分。連同漢堡包菜單它們在移動友好界面的形成中起著至關重要的作用，沒有這些界面，我們就無法生存。
你必須承認，當你需要創建一個在超大屏幕和超大屏幕上看起來都很好的設計時，幻燈片側邊欄是最好的解決方案之一。這是一種妥協，為我們提供了大量的實驗機會，更不用說提供我們在移動設備上缺乏的額外空間了。你可以在沒有犧牲的情況下把所有必要的東西放進去。
大型桌面屏幕也是如此。原因很簡單：每個人都想留下一個很好的第一印象。隨著所有這些奢侈的技術讓你接觸到星星，感覺就像你有更多的空間讓你的想象力變得狂野，越好越好。
因此，滑出邊欄是很有價值的工具.一些有用的代碼片段為您創建自己的工具提供了一個完美的基礎，這些代碼片段是您的工具包中的一個值得歡迎的補充。今天，我們收集了一些有用的解決方案，用于將這些側欄合并到您的下一個項目中。
側邊欄模板由azouaoui Mohamed
象山網絡公司由Azouaoui Mohamed編寫的側欄模板可以很容易地成為解決所有問題的方法。它已經具備了您需要的所有必要元素，從目標類型開始，以社交媒體圖標和搜索結束。這是一個功能齊全的面板，在移動屏幕和桌面屏幕上看起來都很棒?；谧盍餍泻妥顝姶蟮目蚣苤?，自舉4它會像時鐘一樣運轉。
Jelena Jovanovic的純CSS側欄
如果您需要比前面的示例更復雜的內容，那么我們建議您看看Jelena Jovanovic的Pure CSS Sidebar。
Jelena已經提出了一個優雅，但簡單的側邊欄，適合于許多項目。它平滑地從左側滑出，只包括重要的細節，如導航和徽標。最棒的是，所有的一切都是使用純CSS完成的。因此，如果您喜歡創建沒有JavaScript的元素，那么這個元素當然值得您注意。
由Ferran Buireu提供ARIA支持的側欄/導航欄
象山網絡公司超窄的側邊欄最近卷土重來，提醒我們它們仍然很有用.盡管他們的規模，他們能夠涵蓋所有的必需品。請注意，作者是如何成功地同時放置了一個基于圖標的小菜單，而無需付出很大的努力。他還增加了ARIA的支持。這確實是一個有效的解決辦法。
?的css側欄切換
下面是我們集合中的另一個現代側邊欄，它在開發人員中越來越受歡迎。雖然所有上述解決方案的功能只是一個狹窄的面板，這一個占據整個屏幕-為您提供了很大的空間。設計美觀，滑出效果平穩.
響應側欄由Antonija?imi?
對于那些厭倦了左翼概念的人，我們已經找到了一個從右邊打開的概念。不過，只要稍加努力，您就可以迅速改變上述所有示例的方向。然而，如果你需要一個現成的解決方案，那么Antonija?iMIC與你分享一個.它是簡單的，最小的一個很好的樸素的設計。最重要的是響應性-這是現在每個項目的必備條件。
魔鬼煉金術士的畫布邊欄菜單
雖然我們主要專注于基本的滑出功能，但有時我們都渴望擺脫平凡的生活。邪惡的煉金術士告訴我們如何做到這一點，而不壓倒觀眾和重新發明方向盤。這個脫離畫布邊欄菜單從右邊打開，但是它有一個三角形形狀，所有的元素都放在底部。這是一個有趣的解決方案，與有趣的互動，不會讓你的觀眾漠不關心。
用Nikolay Talanov設計彈性SVG邊桿材料
就像前一位藝術家一樣，尼古拉·塔拉諾夫決定通過將平庸的移動滑出菜單變成一個具有響應性互動的吸引人的菜單，從而使事情變得有點有趣。他已經提出了一個彈性的SVG側邊欄，迫使每一個旁觀者停下來玩。
Mari Johannessen的側欄滑出效應
最后但并非最不重要。如果你不需要所有這些預先制定的解決方案，并為你的實驗尋找堅實的基礎，那么Mari對側邊欄的看法正是你所需要的。她的片段會讓你滿意的簡約和純潔。里面沒有什么花哨--只是一個簡單的側邊欄，有一個滑出的效果。
靈活的解決方案
讓我們象山網絡公司面對現實吧，幻燈片側邊欄是當前網頁設計時代不可或缺的一部分，就像我們在幾乎每一個界面中都能看到的漢堡包圖標。
幾乎十年前，當我們不知道如何處理移動界面上的所有內容時，他們拯救了我們的一天。今天他們仍然證明了他們在競技場上是一個有效的球員。
