【每日一练】80—CSS滑动操作菜单

写在前面

时间过得真快&＃xff0c;我们的小练习转眼之间就来到了第80练&＃xff0c;虽然&＃xff0c;我不是每日更新&＃xff0c;但是&＃xff0c;我还是保持了一定的更新频率。

这些小练习&＃xff0c;有简单&＃xff0c;有容易&＃xff1b;有某个功能实现&＃xff0c;也有完整的单页网站&＃xff1b;有好玩有趣的&＃xff0c;也有开发实用型的&＃xff0c;总之&＃xff0c;想到哪里就练习到那里&＃xff0c;没有特别规划&＃xff0c;比较随性一点。

后面&＃xff0c;我会做一些系列的练习教程&＃xff0c;这个是比较有规划的&＃xff0c;希望可以帮助大家坚持持续学习。

现在&＃xff0c;我们还是一起来看一下&＃xff0c;今天的练习效果&＃xff1a;

看了最终效果&＃xff0c;我们再来看一下它的源码实现过程&＃xff0c;具体代码如下&＃xff1a;

HTML代码&＃xff1a;

• 个人简介
• 收件箱
• 设置
• 问答
• 登出

CSS代码&＃xff1a;

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: &＃39;Ubuntu&＃39;, sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #67a5d4;background: #f7f7f7;
}
.navigation
{width: 80px;background: #fff;transition: 0.5s;display: flex;flex-direction: column;align-items: flex-start;overflow: hidden;border-radius: 10px;box-shadow: -20px 20px 50px rgba(0,0,0,0.05);
}
.navigation.active
{width: 400px;
}
.navigation .menu_toggle
{position: relative;width: 80px;height: 70px;background: #fff;display: flex;align-items: flex-start;align-items: center;cursor: pointer;padding: 0 20px;width: 100%;border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navigation .menu_toggle::before
{content: &＃39;&＃39;;position: absolute;width: 35px;height: 2px;background: #333;transform: translateY(-10px);transition: 0.5s;
}
.navigation .menu_toggle::after
{content: &＃39;&＃39;;position: absolute;width: 35px;height: 2px;background: #333;transform: translateY(10px);box-shadow: 0 -10px #333; transition: 0.5s;
}
.navigation.active .menu_toggle::before
{transform: translateY(0px) rotate(45deg);
}
.navigation.active .menu_toggle::after
{transform: translateY(0px) rotate(-45deg);box-shadow: 0 0 #333;
}
.navigation .profile
{position: relative;display: flex;width: 100%;justify-content: center;align-items: center;margin: 10px 0;padding: 0 10px;
}
.navigation .profile .imgBx
{position: relative;width: 60px;height: 60px;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 50%;transition: 0.5s;
}
.navigation.active .profile .imgBx
{width: 200px;height: 200px;
}
.navigation .profile .imgBx img
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}
.navigation .menu
{position: relative;width: 100%;padding: 10px;transition: 0.5s;border-top: 1px solid rgba(0,0,0,0.05);
}
.navigation.active .menu
{padding: 10px 20px;
}
.navigation .menu li
{list-style: none;
}
.navigation .menu li a
{position: relative;display: flex;text-decoration: none;color: #111;border-radius: 10px;
}
.navigation .menu li a:hover
{background: #0084ff;color: #fff;
}
.navigation .menu li a .icon
{position: relative;min-width: 60px;height: 60px;display: flex;justify-content: center;align-items: center;font-size: 1.5em;
}
.navigation .menu li a .text
{position: relative;height: 60px;display: flex;padding-left: 10px;justify-content: center;align-items: center;font-size: 1.25em;
}

写在最后

以上就是今天【每日一练】的全部内容&＃xff0c;希望今天的小练习对你有用&＃xff0c;如果你觉得有帮助的话&＃xff0c;请点赞我&＃xff0c;关注我&＃xff0c;并将它分享给你身边做开发的朋友&＃xff0c;也许能够帮助到他。

我是杨小爱&＃xff0c;我们明天见。

学习更多技能

请点击下方公众号