曾經(jīng)有一段時(shí)間，導(dǎo)航菜單的唯一位置在頁(yè)面頂部。還有一段時(shí)間菜單位于左列或右列（最好是左列）。然后，一個(gè)滑出側(cè)邊欄的時(shí)代來(lái)了，突然之間一切都有意義了。我們終于找到了最后一塊拼圖。

側(cè)邊欄已成為網(wǎng)站設(shè)計(jì)不可或缺的一部分。除了導(dǎo)航，它們?cè)谛纬梢苿?dòng)友好界面方面發(fā)揮著重要作用，沒(méi)有這些界面，網(wǎng)頁(yè)無(wú)法生存。

您必須承認(rèn)，當(dāng)您需要?jiǎng)?chuàng)建一個(gè)需要在超大屏幕和超小屏幕上都看起來(lái)很好的設(shè)計(jì)時(shí)，滑出側(cè)邊欄是最佳解決方案之一。這是一種妥協(xié)，為我們提供了大量的實(shí)驗(yàn)機(jī)會(huì)，更不用說(shuō)提供我們?cè)谝苿?dòng)設(shè)備上缺乏的額外空間。你可以放置所有必要的東西而不用犧牲。

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

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

Azouaoui Mohamed的側(cè)邊欄模板可以輕松地成為解決您所有問(wèn)題的方法。它已經(jīng)擁有了您需要的所有必要元素，從標(biāo)識(shí)開始到社交媒體圖標(biāo)和搜索結(jié)束。它是一個(gè)功能齊全的面板，在移動(dòng)和桌面屏幕上都很棒。

Jelena Jovanovic的純CSS邊欄

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

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

Flexbox關(guān)閉畫布菜單

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

側(cè)邊欄/導(dǎo)航欄由Ferran Buireu提供ARIA支持

超窄邊欄近期回歸，提醒我們它們?nèi)匀环浅Ｓ杏?。盡管它們的大小，但它們能夠涵蓋所有必需品。請(qǐng)注意作者如何設(shè)法同時(shí)放置標(biāo)識(shí)和基于圖標(biāo)的小菜單。他還增加了ARIA的支持。這確實(shí)是一個(gè)有效的解決方案。

CSS邊欄由SilvestarBistrovi?切換

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

響應(yīng)側(cè)邊欄由AntonijaŠimi?

對(duì)于那些生病和厭倦了左派概念的人，我們找到了一個(gè)從右邊開放的人。但是，通過(guò)一點(diǎn)努力，您可以快速更改上述所有示例的方向。但是，如果您需要一個(gè)隨時(shí)可用的解決方案，那么AntonijaŠimic會(huì)與您分享一個(gè)。它簡(jiǎn)單，極簡(jiǎn)，設(shè)計(jì)不錯(cuò)。最重要的是它具有響應(yīng)式 - 這是當(dāng)今每個(gè)項(xiàng)目的必備條件。

Devilish Alchemist的畫布邊欄菜單

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

由Nikolay Talanov設(shè)計(jì)的彈性SVG側(cè)桿材料設(shè)計(jì)

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

側(cè)邊欄滑入式效果由Mari Johannessen設(shè)計(jì)

最后但并非最不重要的。如果您不需要所有這些預(yù)制解決方案并且為實(shí)驗(yàn)尋找堅(jiān)實(shí)的基礎(chǔ)，那么Mari對(duì)側(cè)邊欄的選擇正是您所需要的。她的片段會(huì)以簡(jiǎn)潔和純潔的方式取悅您。里面沒(méi)有什么花哨的 - 只是一個(gè)帶滑出效果的簡(jiǎn)單側(cè)邊欄。

靈活的解決方案

讓我們面對(duì)現(xiàn)實(shí)吧，滑出式側(cè)邊欄是當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)時(shí)代精神的一個(gè)組成部分，就像我們幾乎可以在每個(gè)界面中看到的漢堡圖標(biāo)一樣。