曾經有一段時間，導航菜單的唯一位置在頁面頂部。還有一段時間菜單位于左列或右列（最好是左列）。然后，一個滑出側邊欄的時代來了，突然之間一切都有意義了。我們終于找到了最后一塊拼圖。

側邊欄已成為網站設計不可或缺的一部分。除了導航，它們在形成移動友好界面方面發(fā)揮著重要作用，沒有這些界面，網頁無法生存。

您必須承認，當您需要創(chuàng)建一個需要在超大屏幕和超小屏幕上都看起來很好的設計時，滑出側邊欄是最佳解決方案之一。這是一種妥協(xié)，為我們提供了大量的實驗機會，更不用說提供我們在移動設備上缺乏的額外空間。你可以放置所有必要的東西而不用犧牲。

大型桌面屏幕也是如此。原因很簡單：每個人都希望給人留下良好的第一印象。所有這些奢侈的技術讓你可以觸及星星，感覺就像你擁有更多的空間來讓你的想象力越來越狂野。

因此，滑出式側邊欄是有價值的工具。一些有用的代碼片段為您提供了創(chuàng)建自己的完美基礎，是您工具包的一個受歡迎的補充。今天，我們已經圍繞一些有用的解決方案，將這些側邊欄納入您的下一個項目。

Azouaoui Mohamed的側邊欄模板可以輕松地成為解決您所有問題的方法。它已經擁有了您需要的所有必要元素，從標識開始到社交媒體圖標和搜索結束。它是一個功能齊全的面板，在移動和桌面屏幕上都很棒。

Jelena Jovanovic的純CSS邊欄

如果你需要比前一個例子更復雜的東西，那么我們建議你看看Jelena Jovanovic的Pure CSS Sidebar。

Jelena提出了一個優(yōu)雅而簡單的側邊欄，適用于眾多項目。它從左側平滑地滑出，包括導航和徽標等重要細節(jié)。最好的部分是一切都是使用純CSS完成的。所以，如果你是沒有JavaScript創(chuàng)建元素的粉絲，那么這個肯定值得你關注。

Flexbox關閉畫布菜單

與上一個示例非常相似，這里所有內容都是使用CSS完成的。但是，這次作者選擇了最有前途的CSS功能之一：Flexbox。側邊欄采用中性設計，讓您有機會添加所有導航鏈接。它是許多常見問題的快速解決方案。

側邊欄/導航欄由Ferran Buireu提供ARIA支持

超窄邊欄近期回歸，提醒我們它們仍然非常有用。盡管它們的大小，但它們能夠涵蓋所有必需品。請注意作者如何設法同時放置標識和基于圖標的小菜單。他還增加了ARIA的支持。這確實是一個有效的解決方案。

CSS邊欄由SilvestarBistrovi?切換

這是我們系列中另一個現(xiàn)代側邊欄，在開發(fā)人員中越來越受歡迎。雖然前面提到的所有解決方案都只有一個狹窄的面板，但這個解決方案占據了整個屏幕 - 為您提供了大量的空間。它具有漂亮的設計和平滑的滑出效果。

響應側邊欄由AntonijaŠimi?

對于那些生病和厭倦了左派概念的人，我們找到了一個從右邊開放的人。但是，通過一點努力，您可以快速更改上述所有示例的方向。但是，如果您需要一個隨時可用的解決方案，那么AntonijaŠimic會與您分享一個。它簡單，極簡，設計不錯。最重要的是它具有響應式 - 這是當今每個項目的必備條件。

Devilish Alchemist的畫布邊欄菜單

雖然我們主要關注基本的滑出功能，但有時我們都渴望擺脫平凡。惡魔煉金術士向我們展示了如何在不擊敗觀眾和重新發(fā)明輪子的情況下做到這一點。這個非畫布側邊欄菜單從右側打開，但它有一個三角形形狀，所有元素都放在底部。這是一個有趣的解決方案，有趣的互動不會讓你的觀眾無動于衷。

由Nikolay Talanov設計的彈性SVG側桿材料設計

就像之前的藝術家一樣，尼古拉·塔拉諾夫（Nikolay Talanov）決定通過將平庸的移動幻燈片菜單變成具有響應性互動的引人入勝的作品來讓事情變得有趣。他提出了一個有彈性的SVG側邊欄，迫使每個旁觀者停下來玩游戲。

側邊欄滑入式效果由Mari Johannessen設計

最后但并非最不重要的。如果您不需要所有這些預制解決方案并且為實驗尋找堅實的基礎，那么Mari對側邊欄的選擇正是您所需要的。她的片段會以簡潔和純潔的方式取悅您。里面沒有什么花哨的 - 只是一個帶滑出效果的簡單側邊欄。

靈活的解決方案

讓我們面對現(xiàn)實吧，滑出式側邊欄是當前網頁設計時代精神的一個組成部分，就像我們幾乎可以在每個界面中看到的漢堡圖標一樣。