左下收缩项目导航

简介: 左下收缩项目导航
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左下收缩项目导航</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
 .wrap {
 width:50px;
 height:50px;
 background:#AD4CC7;
 box-shadow:0 0 1px #CC6AE7;
 border-radius:50%;
 cursor:pointer;
 position:relative;
 position:fixed;
 bottom:50px;
 left:50px;
 z-index:999;
 transition:0.5s
}
.wrap img {
 width:50px;
 height:50px;
 position:absolute;
 top:0;
 right:0;
 left:0;
 bottom:0;
 margin:auto;
 border-radius:50%
}
.wrap .num1 {
 position:absolute;
 top:-89px;
 z-index:-1;
 border-radius:50%;
 text-align:center;
 line-height:40px;
 transition:.4s;
 right:20px;
 width:40px;
 height:40px;
 background:#CDD14E;
 box-shadow:0 0 1px #CDD14E;
}
.wrap .num2 {
 position:absolute;
 top:-67px;
 transition:0.6s;
 z-index:-1;
 text-align:center;
 line-height:40px;
 right:-37px;
 width:40px;
 height:40px;
 background:#CDD14E;
 box-shadow:0 0 1px #CDD14E;
 border-radius:50%
}
.wrap .num3 {
 position:absolute;
 top:-21px;
 transition:0.8s;
 z-index:-1;
 text-align:center;
 line-height:40px;
 right:-76px;
 width:40px;
 height:40px;
 background:#CDD14E;
 box-shadow:0 0 1px #CDD14E;
 border-radius:50%
}
.wrap .num4 {
 position:absolute;
 top:40px;
 transition:1s;
 z-index:-1;
 text-align:center;
 line-height:40px;
 right:-87px;
 width:40px;
 height:40px;
 background:#CDD14E;
 box-shadow:0 0 1px #CDD14E;
 border-radius:50%
}
.wrap .nums1 {
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 transition:.4s;
}
.wrap .nums2 {
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 transition:.6s;
}
.wrap .nums3 {
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 transition:.8s;
}
.wrap .nums4 {
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 transition:1s;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="num1 nums1">1</div>
    <div class="num2 nums2">2</div>
    <div class="num3 nums3">3</div>
    <div class="num4 nums4">4</div>
</div>
<script>
var i = 1;
$(".wrap").click(function() {
    if (i == 0) {
        $(this).find(".num1").addClass("nums1");
        $(this).find(".num2").addClass("nums2");
        $(this).find(".num3").addClass("nums3");
        $(this).find(".num4").addClass("nums4");
        i = 1;
    } else {
        $(this).find(".num1").removeClass("nums1");
        $(this).find(".num2").removeClass("nums2");
        $(this).find(".num3").removeClass("nums3");
        $(this).find(".num4").removeClass("nums4");
        i = 0;
    }
});
</script>
</body>
</html>

相关文章
|
6月前
|
前端开发
二级水平导航菜单栏的实现
二级水平导航菜单栏的实现
106 1
|
5天前
|
编解码 UED
Qt侧边栏的动态切换:隐藏与显示技术详解
在现代用户界面设计中,侧边栏(Sidebar)是一个常见的组件,它为用户提供了导航和工具面板的功能。在某些应用场景下,我们可能需要动态地隐藏或显示侧边栏,以优化界面布局或提供更灵活的用户体验。本文将分享如何在Qt框架下实现侧边栏的隐藏与呈现,包括技术细节和代码示例。
39 3
|
2月前
|
前端开发 JavaScript
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
本文介绍了如何使用原生HTML、CSS和JavaScript创建一个移动端可滚动的顶部菜单栏。文章提供了详细的HTML结构、CSS样式和JavaScript代码,实现了菜单项的横向滚动、边界控制和动态样式变化。同时,还展示了如何通过触摸事件监听来控制菜单项的滚动和激活状态。
58 2
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
|
4月前
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
439 6
|
3月前
|
开发框架 前端开发 搜索推荐
在WInform开发中实现工具栏/菜单的动态呈现
在WInform开发中实现工具栏/菜单的动态呈现
|
4月前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
4月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
370 0
|
6月前
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
260 3
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
167 0
微信小程序分类菜单激活状态跟随列表滚动自动切换
|
开发者
导航控件调整与增加| 学习笔记
快速学习导航控件调整与增加。
导航控件调整与增加| 学习笔记