网页设计：滑出式侧边导航栏_设计资讯-意派Coolsite360

曾经有一段时间，导航菜单的唯一位置在页面顶部。还有一段时间菜单位于左列或右列（最好是左列）。然后，一个滑出侧边栏的时代来了，突然之间一切都有意义了。我们终于找到了最后一块拼图。

侧边栏已成为网站设计不可或缺的一部分。除了导航，它们在形成移动友好界面方面发挥着重要作用，没有这些界面，网页无法生存。

您必须承认，当您需要创建一个需要在超大屏幕和超小屏幕上都看起来很好的设计时，滑出侧边栏是最佳解决方案之一。这是一种妥协，为我们提供了大量的实验机会，更不用说提供我们在移动设备上缺乏的额外空间。你可以放置所有必要的东西而不用牺牲。

大型桌面屏幕也是如此。原因很简单：每个人都希望给人留下良好的第一印象。所有这些奢侈的技术让你可以触及星星，感觉就像你拥有更多的空间来让你的想象力越来越狂野。

因此，滑出式侧边栏是有价值的工具。一些有用的代码片段为您提供了创建自己的完美基础，是您工具包的一个受欢迎的补充。今天，我们已经围绕一些有用的解决方案，将这些侧边栏纳入您的下一个项目。

边栏模板由azouaoui Mohamed

Azouaoui Mohamed的侧边栏模板可以轻松地成为解决您所有问题的方法。它已经拥有了您需要的所有必要元素，从标识开始到社交媒体图标和搜索结束。它是一个功能齐全的面板，在移动和桌面屏幕上都很棒。

如果你需要比前一个例子更复杂的东西，那么我们建议你看看Jelena Jovanovic的Pure CSS Sidebar。

Jelena提出了一个优雅而简单的侧边栏，适用于众多项目。它从左侧平滑地滑出，包括导航和徽标等重要细节。最好的部分是一切都是使用纯CSS完成的。所以，如果你是没有JavaScript创建元素的粉丝，那么这个肯定值得你关注。

与上一个示例非常相似，这里所有内容都是使用CSS完成的。但是，这次作者选择了最有前途的CSS功能之一：Flexbox。侧边栏采用中性设计，让您有机会添加所有导航链接。它是许多常见问题的快速解决方案。

超窄边栏近期回归，提醒我们它们仍然非常有用。尽管它们的大小，但它们能够涵盖所有必需品。请注意作者如何设法同时放置标识和基于图标的小菜单。他还增加了ARIA的支持。这确实是一个有效的解决方案。

这是我们系列中另一个现代侧边栏，在开发人员中越来越受欢迎。虽然前面提到的所有解决方案都只有一个狭窄的面板，但这个解决方案占据了整个屏幕 - 为您提供了大量的空间。它具有漂亮的设计和平滑的滑出效果。

对于那些生病和厌倦了左派概念的人，我们找到了一个从右边开放的人。但是，通过一点努力，您可以快速更改上述所有示例的方向。但是，如果您需要一个随时可用的解决方案，那么AntonijaŠimic会与您分享一个。它简单，极简，设计不错。最重要的是它具有响应式 - 这是当今每个项目的必备条件。

虽然我们主要关注基本的滑出功能，但有时我们都渴望摆脱平凡。恶魔炼金术士向我们展示了如何在不击败观众和重新发明轮子的情况下做到这一点。这个非画布侧边栏菜单从右侧打开，但它有一个三角形形状，所有元素都放在底部。这是一个有趣的解决方案，有趣的互动不会让你的观众无动于衷。

就像之前的艺术家一样，尼古拉·塔拉诺夫（Nikolay Talanov）决定通过将平庸的移动幻灯片菜单变成具有响应性互动的引人入胜的作品来让事情变得有趣。他提出了一个有弹性的SVG侧边栏，迫使每个旁观者停下来玩游戏。

最后但并非最不重要的。如果您不需要所有这些预制解决方案并且为实验寻找坚实的基础，那么Mari对侧边栏的选择正是您所需要的。她的片段会以简洁和纯洁的方式取悦您。里面没有什么花哨的 - 只是一个带滑出效果的简单侧边栏。

让我们面对现实吧，滑出式侧边栏是当前网页设计时代精神的一个组成部分，就像我们几乎可以在每个界面中看到的汉堡图标一样。