请选择 进入手机版 | 继续访问电脑版

猫先森网络资源站

 找回密码
 立即注册
查看: 900|回复: 181

[HTML/Xhtml] html滑动仿悬浮球菜单效果的实现

  [复制链接]
等级头衔

等級:论坛元老

Rank: 8Rank: 8

积分成就
积分
2956
金钱
45
人气
45
贡献
2911
主题
2911
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-2 15:35:22 | 显示全部楼层 |阅读模式
这篇文章主要介绍了html滑动仿悬浮球菜单效果的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
                        
                           
                           
                        
                        
                            css样式

html,body{
        width: 100%;
        height: 100%;
        margin: 0;padding: 0;
}
/*导航图标*/
.NMH-g-navicon{
        position: fixed;
        top: 40%;
        right: 020px;
        width: 100px;
        height: 100px;
}
.NMH-g-navicon.Jnmh-onleft{
        right: auto;
        left: 020px;
}
/*导航图标logo按钮*/
.NMH-g-navicon .Jnmh-btnlogo{
        position: absolute;
        display: block;
        width: 100px;
        height: 100px;
        top: 50%;
        right: 0;
        margin-top: -50px;
        border: 0;
        background: url(img/icon_128.png) no-repeat center center;
    background-size: 95% 95%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 10px 0px;
        outline: none;
        border-radius: 50%;
        z-index: 1;
}
.NMH-g-navicon .Jnmh-btnlogohover{
        position: absolute;
        display: block;
        width: 100px;
        height: 100px;
        top: 50%;
        right: 0;
        margin: 0;padding: 0;
        margin-top: -50px;
        border: 0;
        overflow: hidden;
        /*background-color: red;*/
}
/*导航图标logo按钮-鼠标经过*/
.NMH-g-navicon.Jnmh-open .Jnmh-btnlogohover{
        margin-top: -150px;       
        width: 200px;
        height: 300px;
        border-radius: 150px 0 0 150px;
}
.NMH-g-navicon.Jnmh-onleft .Jnmh-btnlogohover{
        left: 0;
        right: auto;
        border-radius: 0 150px 150px 0;
}
/*导航图标菜单子容器*/
.NMH-g-navicon .Jnmh-m-submenu{
        position: absolute;
        background-color: transparent;
        list-style: none;
        top: -020px;
        bottom: -020px;
        left: -020px;
        right: -020px;
        margin: 0;
        padding: 0;
}
.NMH-g-navicon .Jnmh-m-submenu .Jnmh-subli{
        position: absolute;
        width: 100%;height: 100%;
        transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: all 0.8s ease-in-out;
}
.Jnmh-m-submenu .Jnmh-subdl{
        position: absolute;
    left: 50%;
    bottom: 100%;
    width: 0;
    height: 0;
    line-height: 1px;
    margin-left: 0;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 1px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
/*导航图标-展开菜单时*/
.NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdl{
        width: 80px;
    height: 80px;
    line-height: 80px;
    margin-left: -40px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}
/*导航图标-三级菜单容器*/
.NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdd{
        position: absolute;
        line-height: normal;
}
html代码


               
               
               
                       
                               
                                        电商平台
                                       
                               
                       
                       
                               
                                        选品平台
                                       
                               
                       
                       
                               
                                        会员升级
                                       
                               
                       
                       
                               
                                        产品操作
                                       
                               
                       
                       
                               
                                        个人中心
                                       
                               
                       
               

       
javascript代码



2021030215290641.gif

2021030215290641.gif


到此这篇关于html滑动仿悬浮球菜单效果的实现的文章就介绍到这了,更多相关html滑动仿悬浮球菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
1
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-17 21:43:04 | 显示全部楼层
记得吃药!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-17 23:37:18 | 显示全部楼层
楼上的忘记吃药了!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 00:00:44 | 显示全部楼层
经典,收藏了!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 00:21:36 | 显示全部楼层
脚本之家楼主,我告诉你一个你不知道的的秘密,有一个牛逼的网站,影视频道的网站所有电影和连续剧都可以免费看的。访问地址:http://tv.mxswl.com

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
1
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 00:38:01 | 显示全部楼层
很多天不上线,一上线就看到这么给力的帖子!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 00:51:05 | 显示全部楼层
论坛人气好旺!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 00:52:27 | 显示全部楼层
脚本之家楼主,我告诉你一个你不知道的的秘密,有一个牛逼的网站,运动刷步数还是免费刷的,QQ和微信都可以刷,特别好用。访问地址:http://yd.mxswl.com 猫先森网络

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
2
金钱
0
人气
0
贡献
1
主题
1
精华
0
猫币
1
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 09:47:56 | 显示全部楼层
今天皮痒了?

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
1
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-18 09:48:24 | 显示全部楼层
信脚本之家楼主,考试不挂科!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表