css抽屉效果

CSS抽屉效果基础概念

CSS抽屉效果是一种常见的网页设计技巧，通过CSS的动画和过渡效果，实现一个元素（通常是菜单或导航栏）从屏幕边缘滑入或滑出的视觉效果。这种效果可以增强用户体验，使界面更加动态和吸引人。

类型

侧边抽屉：从屏幕边缘滑入的菜单，通常位于屏幕左侧或右侧。
底部抽屉：从屏幕底部滑入的菜单，通常用于底部导航栏。
顶部抽屉：从屏幕顶部滑入的菜单，通常用于顶部导航栏。

应用场景

移动应用：在移动设备上，抽屉效果可以有效地利用有限的屏幕空间。
网页设计：在网页设计中，抽屉效果可以用于实现复杂的导航结构。
响应式网站：在响应式网站中，抽屉效果可以确保在不同设备上都能提供良好的用户体验。

示例代码

以下是一个简单的侧边抽屉效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Drawer Effect</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .drawer {
            position: fixed;
            top: 0;
            left: -250px;
            width: 250px;
            height: 100%;
            background-color: #333;
            color: white;
            transition: left 0.3s ease-in-out;
        }
        .drawer.open {
            left: 0;
        }
        .drawer ul {
            list-style-type: none;
            padding: 0;
        }
        .drawer ul li {
            padding: 15px;
            border-bottom: 1px solid #555;
        }
        .drawer ul li a {
            color: white;
            text-decoration: none;
        }
        .drawer-toggle {
            position: fixed;
            top: 10px;
            left: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="drawer-toggle" onclick="toggleDrawer()">☰</div>
    <div class="drawer" id="drawer">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <script>
        function toggleDrawer() {
            const drawer = document.getElementById('drawer');
            drawer.classList.toggle('open');
        }
    </script>
</body>
</html>

参考链接

常见问题及解决方法

抽屉无法滑动：
- 确保CSS中的transition属性正确设置。
- 检查JavaScript代码是否正确触发类名的切换。

抽屉滑动速度过快或过慢：
- 调整CSS中的transition属性中的时间值。
抽屉在某些设备上显示不正确：
- 确保使用viewport元标签，并检查CSS媒体查询是否正确设置。

通过以上方法，可以有效地实现和调试CSS抽屉效果，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

将转换转换为转换以获得更好的性能

、、

我正在实现一个“抽屉”类型的效果，当一个按钮被点击时，抽屉从屏幕底部打开。这里的例子：.drawer { bottom: 0; right: 0;}); $('.drawer').toggleClass('active');这样，.ac

浏览 3提问于2014-03-07得票数 0

回答已采纳

5回答

jQuery slideDown与jQuery UI .show(“幻灯片”)

、、

我正在尝试利用jQuery的内置功能来创建一个“抽屉”，它从导航栏后面滑出，将下面的内容推到一边。如果我使用$('#drawer').show('slide',{direction:'up'})，内容会正确地向下滑动，但在效果出现之前，元素下面的所有内容都会跳到一边。有没有办法结合两者的优点来复制我正在寻找的效果:一个可以滑出的抽屉，把下面的内容推到一边？我研究了jQuery UI的.animate()函数，但文档没有帮助。我利用它的原始努力充满了失败。然而，那

浏览 1提问于2010-01-07得票数 8

1回答

如何让ActionBarDrawerToggle变得更突出？

、、

遵循安卓的指导方针，我添加了ActionBarDrawerToggle，它会弹出一个DrawerLayout。在此之前，我在ActionBar中有几个选项卡，但tabs太多了，所以我确实用DrawerLayout替换了它们，就像他们说的那样，当你有超过3个tabs时。

浏览 1提问于2014-02-25得票数 1

2回答

如何显示一个模式，但仍然有页面标题的位置？

、

嗨，亲爱的开发人员。我真的很喜欢雅虎桌面网站()。当您单击帖子标题时，文章会以类似于模式的页面显示出来。页面标题仍然在位置，您可以滚动内容，在右上角，您可以单击一个关闭按钮，以取消模式。地址栏和标题栏中的页面url和标题更改。从UX的角度来看，我认为这是一个非常好的主意。用户可以回到blogpost列表，而无需在导航历史记录中来回浏览。我愿意为我的项目实现那种精确的设计。我使用的材料设计启动为反应UI包()，但他们的模块组件()不是那么顺利，不能给我同样的结果。有人能告诉我怎么做吗?或者给我一些建议？提前谢谢。

浏览 0提问于2019-11-06得票数 1

回答已采纳

1回答

聚合物-慢动芯-脚手架

、、

在我的网站上，无限教堂/测试版，在移动设备上，拔出菜单有极大的滞后性。关闭此菜单也会导致严重滞后。我用的是core-scaffold。有人能想到是什么导致的吗？我用的是聚合物0.5.4谢谢!

浏览 6提问于2015-01-29得票数 1

回答已采纳

2回答

在“抽屉”菜单单击后用关闭的抽屉重新创建活动

、

单击“导航抽屉”菜单并关闭此抽屉后，我要重新创建活动。recreate();但效果不太好。抽屉开始关闭，但屏幕黑色的秒和活动是重新打开抽屉。我是否必须用onSaveInstanceState()自己处理抽屉状态，还是有其他方法？

浏览 2提问于2014-12-15得票数 2

回答已采纳

1回答

带标签的材料UI嵌套抽屉和应用程序栏

、、

在我的应用程序中，我有几个文件的选项卡，每个文件都应该有自己的抽屉和应用程序。代码框和我想做的类似。如您所见，第一个选项卡的内容在抽屉下面。你怎么防止这件事？

浏览 2提问于2018-06-28得票数 0

回答已采纳

1回答

具有悬停和单击功能的jQuery抽屉

、

我正试着用jQuery实现一个类似抽屉的效果。我的页面由两个重叠的div组成，其中顶部div被稍微移动到了侧，显示了一些底部div。打开抽屉的代码： mouseenter: function () { }); mouseleave: fun

浏览 4提问于2014-05-10得票数 4

1回答

如何在相机预览上方创建滑动布局？

、、、

我正在做一个使用相机的项目，我想有一个额外的按钮，我必须在滑动抽屉看到。我试过了，但是屏幕分成了两部分，摄像头的预览和打开时的滑动抽屉的位置。我的问题是，我如何使相机的预览作为背景或滑动抽屉下面，以便它将占据整个屏幕？谢谢。建议，链接和教程，非常感谢。:)

浏览 3提问于2011-09-07得票数 0

2回答

如何从一侧禁用抽屉布局？

、、

我制作了一个双抽屉布局，但没有actionbar，如下所示：我的要求是当左边的抽屉打开时禁用右边的抽屉，反之亦然。所以，当左抽屉打开的时候，我隐藏了右边的抽屉按钮&反之亦然，而且效果很好。但问题是，即使我隐藏一个按钮(左或右)，抽屉仍然打开水平滑动(从右到左)。，那么我如何防止抽屉打开？

浏览 5提问于2014-01-20得票数 7

回答已采纳

1回答

Scene2D:如何在表格中添加背景图片？

、

我正在尝试为一些精灵批次创建一个带有加载动画的启动页面，作为AssetManager的一部分。我的问题是关于在现场展示它。我决定使用一个可缩放到场景宽度的表格，该宽度设置为视口的宽度。

浏览 0提问于2013-09-07得票数 3

1回答

如何在点击时将z索引较高的div调用到顶部？

、

我目前有两个抽屉/菜单在我的网站右边，一个为购物车和一个产品快速查看选项。我对JS不太在行，所以不确定这是否是一个简单的任务？};})();.js-drawer-ope

浏览 4提问于2015-04-21得票数 1

1回答

如何在jQuery中强制应用CSS过渡效果/动画

、、

侧边栏抽屉/导航有切换导航，默认情况下应该是动画的(就像bootstrap切换导航是动画的)。但是，不幸的是，没有动画。navbar-toggle').click();}); 那么，在这种情况下，如何通过jQuery/CSS强制应用动画/滑动效果呢？注:如果我从我的CSS中删除opacity，滑动效果

浏览 2提问于2016-01-21得票数 0

1回答

禁用右侧抽屉双导航抽屉中抽屉图标的动画

、、

1)在打开或关闭右侧导航抽屉时，左侧(3条)的导航抽屉图标具有动画效果。 2)我不知道如何将图标添加到右边，并使它只为正确的抽屉动画。

浏览 3提问于2014-02-18得票数 10

回答已采纳

2回答

使用Material UI在React.js中打开和关闭抽屉

、

我试着为我的接口实现抽屉。抽屉，js render() { <DrawerSimpleListItem graphic="favorite" text="Body 2"/> </Drawer> }导航栏，它具有打开抽屉</

浏览 2提问于2018-06-18得票数 1

2回答

修复素材-UI右侧持久抽屉动画

、、、

我有一个相当复杂的应用程序，有多个抽屉。我对右边抽屉的动画有个问题。抽屉本身的动画效果很好，但父div不能。我尝试将同一动画应用于父div的抽屉，但这不能解决我的问题。

浏览 18提问于2018-07-28得票数 8

回答已采纳

2回答

如何在安卓系统中复制iOS 7模糊视图

、

effect )imageView1.setImageBitmap(Utils.fastblur(temp.get(), 8));还有其他方法可以实现这一点吗？因为使用我的场景，我不能在抽屉的每一个动作中，每一秒拍摄屏幕的每一秒1到4次。

浏览 2提问于2014-01-20得票数 13

1回答

聚合物1.0抽屉式纸板阴影和叠层

、、

我怎样才能使纸质抽屉面板元素的行为像这个站点一样？我希望能够打开和关闭抽屉面板，即使页面很大。我也不希望当抽屉被拉出并且页面很大时，页面上会出现阴影，我希望抽屉扩展到页面中，而不是覆盖“主”。我知道"forceNarrow“，但它没有达到我想要的效果，因为当抽屉处于活动状态时，它会覆盖页面的其余部分，并在"main”上投下阴影。

浏览 2提问于2015-10-08得票数 1

3回答

使用顶部和底部重力时，Android DrawerLayout会失败。

、

我只是用多个抽屉实现了一个简单的例子，当我使用START和END作为粒度时，这一切都很有魅力，但是当我试图添加一个带有顶部或底部重力的抽屉时，它就会崩溃。它可以用来从顶部和/或底部滑动抽屉吗？

浏览 4提问于2013-05-16得票数 9

回答已采纳

3回答

角4分量响应动画

、、、

我正在开发一个角度响应应用程序，它在手机上有一个抽屉。现实生活示例 transform: 'translate3d(0, 0, 0)' ])}) 取消动画<e

浏览 0提问于2017-09-13得票数 4

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css抽屉效果