左下收缩项目导航

简介: 左下收缩项目导航
<!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月前
|
前端开发
二级水平导航菜单栏的实现
二级水平导航菜单栏的实现
95 1
|
2月前
|
前端开发 JavaScript
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
本文介绍了如何使用原生HTML、CSS和JavaScript创建一个移动端可滚动的顶部菜单栏。文章提供了详细的HTML结构、CSS样式和JavaScript代码,实现了菜单项的横向滚动、边界控制和动态样式变化。同时,还展示了如何通过触摸事件监听来控制菜单项的滚动和激活状态。
49 2
原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式
|
4月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
351 0
|
6月前
【最全最详细】使用publiccms实现动态可维护的导航菜单栏
【最全最详细】使用publiccms实现动态可维护的导航菜单栏
|
6月前
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
254 3
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
200 0
|
开发者
导航控件调整与增加| 学习笔记
快速学习导航控件调整与增加。
导航控件调整与增加| 学习笔记
|
前端开发 JavaScript
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。
400 0
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
|
前端开发 JavaScript
【前端】侧边栏收缩的优化
【前端】侧边栏收缩的优化
315 0
|
JavaScript 前端开发 开发者
分类页 -iscroll 区域滚动|学习笔记
快速学习 分类页 -iscroll 区域滚动
100 0