首页 > css教程 > 正文

css实现酷炫的右侧悬浮菜单栏效果(代码实例)

转载 2018-10-11 17:26:10 0 884
本文给大家介绍css如何实现酷炫的右侧悬浮菜单栏效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

默认显示效果:

鼠标悬浮效果:

HTML、JS代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.1.min.js"></script>
        <style type="text/css">
            *{margin:0;padding:0;}
            body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#fff;  }
            a{text-decoration:none;color:#333;}
            .rightNav{ position:fixed; width:140px;  right:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);  }
            .rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden;  cursor:pointer; right:-110px; }
            .rightNav a:hover{ text-decoration:none; color:#39A4DC;  }
            .rightNav a:hover em{ background:#00b700}
            .rightNav a em{ display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
            .rightNav a.new em{ background:#f60;}
        </style>
    </head>
    <body>
        <div class="rightNav">
            <a class="new" href="#effect0" style="right: -110px;"><em>0</em>综合/组合[new]</a>
            <a href="#effect1" style="right: -110px;"><em>1</em>书签切换</a>
            <a href="#effect2" style="right: -110px;"><em>2</em>幻灯片</a>
            <a href="#effect3" style="right: -110px;"><em>3</em>带按钮切换</a>
            <a class="new" href="#effect4" style="right: -110px;"><em>4</em>导航/菜单[new]</a>
            <a class="new" href="#effect5" style="right: -110px;"><em>5</em>切换加载[new]</a>
            <a href="#effectT1" style="right: -110px;"><em>6</em>其它效果</a>
            <a href="#effectT1" style="right: -110px;"><em>7</em>特殊</a>
        </div>
        <script type="text/javascript">
            
            //右侧导航
            var btb=$(".rightNav");
            var tempS;
            $(".rightNav").hover(function(){
                    var thisObj = $(this);
                    tempS = setTimeout(function(){
                    thisObj.find("a").each(function(i){
                        var tA=$(this);
                        console.log(i);
                        setTimeout(function(){ tA.animate({right:"0"},200);},50*i);
                    });
                },200);
        
            },function(){
                if(tempS){ clearTimeout(tempS); }
                $(this).find("a").each(function(i){
                    var tA=$(this);
                    setTimeout(function(){ tA.animate({right:"-110"},200,function(){
                    });},50*i);
                });
        
            });
        
            

        </script>
    </body>
</html>

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程

相关推荐:

php公益培训视频教程

CSS在线手册

div/css图文教程

以上就是css实现酷炫的右侧悬浮菜单栏效果(代码实例)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:css 右侧悬浮 菜单栏
  • 本文转载于:博客园,如有侵犯,请联系删除
  • 相关文章


  • JS实现自动固定顶部的悬浮菜单栏效果_javascript技巧
  • 一个ASP写的侧边菜单栏
  • 使用ajax实现菜单栏的三级联动
  • 使用vue实现树形菜单栏功能
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • html/css快速入门 html/css快速入门
  • CSS3从入门到精通教程 CSS3从入门到精通教程
  • CSS3最新基础教程详解 CSS3最新基础教程详解
  • CSS 导航栏制作教程 CSS 导航栏制作教程
  • CSS3 最新视频教程 CSS3 最新视频教程
  • 相关视频章节