您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版jQuery插件PageSlide实现左右侧栏

1010cc时时彩经典版jQuery插件PageSlide实现左右侧栏

发布时间:2019-08-16 13:50编辑:1010cc时时彩客户端浏览(106)

    一款基于jquery的侧面栏导航,一款jquery栏导航

    事先为大家介绍了重重导航菜单,前些天给我们分享一款基于jquery的左边栏导航。那款导航侧面滑出,适合放在手提式有线电话机网页或webapp。一看下实现的效果图:

    1010cc时时彩经典版 1

    在线预览   源码下载

    贯彻的代码。

    html代码:

    <div style="position: relative; overflow: hidden;">
            <div class="top">
                <img src="menu.png" height="35" class="menu_btn" align="left" />
                <font style="padding-left: 10px;">Material design animation</font>
            </div>
            <div id="grey_back">
                &nbsp;</div>
            <div id="menu_smartphone" class="menu_mobile_app" align="left">
                <ul style="overflow-y: auto;">
                    <div class="background_profil">
                    </div>
                    <div class="pics_profil">
                    </div>
                    <div class="name_profil">
                        www.wifeo.com<font style="font-weight: 300; color: #999999;">/code</font></div>
                    <li><a href="#">MENU 1</a></li>
                    <li><a href="#">MENU 2</a></li>
                    <li><a href="#">MENU 3</a></li>
                    <li><a href="#">MENU 4</a></li>
                </ul>
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
        </div>
    

    css代码:

      #menu_smartphone
            {
                height: 100%;
                position: absolute;
                background: #ffffff;
                top: 0;
                bottom: 0;
                left: -570px;
                width: 570px;
            }
            #menu_smartphone ul
            {
                padding: 0;
                margin: 0;
                list-style: none;
                color: #999999;
            }
            #menu_smartphone ul li
            {
                height: 70px;
                padding-left: 10px;
                line-height: 70px;
            }
            #menu_smartphone ul li:hover
            {
                background: #f7f7f7;
            }
            #menu_smartphone ul li a
            {
                color: #999999;
                text-decoration: none;
                font-family: 'Roboto';
                font-weight: 400;
                font-size: 25px;
            }
            .background_profil
            {
                background-image: url(fond.png);
                height: 240px;
            }
            .pics_profil
            {
                width: 130px;
                height: 130px;
                border-radius: 50%;
                background-size: cover;
                background-image: url(welcome.png);
                margin-top: -65px;
            }
            .name_profil
            {
                font-size: 37px;
                font-family: 'Roboto';
                font-weight: 400;
                color: #666666;
                margin-top: -50px;
                margin-left: 140px;
                margin-bottom: 40px;
            }
            .top
            {
                background-color: #e51c23;
                height: 70px;
                position: absolute;
                top: 0px;
                width: 100%;
                line-height: 70px;
                color: #ffffff;
                font-size: 20px;
                font-weight: 400;
                font-family: 'Roboto';
                padding-left: 10px;
                text-align: left;
            }
            #grey_back
            {
                display: none;
                background-color: #000000;
                opacity: 0.7;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
            }
            .card
            {
                width: 90%;
                height: 300px;
                background-color: #ffffff;
                margin: 10px;
                padding: 20px;
                color: #666666;
                font-weight: 300;
                font-size: 36px;
                text-align: center;
                font-family: 'Roboto';
                box-shadow: 0 0 2px #999999;
            }
            .menu_btn
            {
                cursor: pointer;
                left: 0px;
                margin-top: 16px;
            }
    

    js代码:

      $(document).ready(function () {
                var isMenuOpen = false;
    
                $('.menu_btn').click(function () {
                    if (isMenuOpen == false) {
                        $("#menu_smartphone").clearQueue().animate({
                            left: '0px'
                        })
                        $("#grey_back").fadeIn('fast');
                        $(this).fadeOut(200);
                        $(".close").fadeIn(300);
    
                        isMenuOpen = true;
                    }
                });
                $('#grey_back').click(function () {
                    if (isMenuOpen == true) {
                        $("#menu_smartphone").clearQueue().animate({
                            left: '-570px'
                        })
                        $("#page").clearQueue().animate({
                            "margin-left": '0px'
                        })
                        $("#grey_back").fadeOut('fast');
                        $(this).fadeOut(200);
                        $(".menu_btn").fadeIn(300);
    
                        isMenuOpen = false;
                    }
                });
            });
    

    注:本文爱编制程序原创文章,转发请评释原版的书文地址:

    更加多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery表格(table)操作手艺汇总》、《jQuery切换特效与技能总括》、《jQuery扩张才能总括》、《jQuery常用插件及用法总括》、《jQuery拖拽特效与手艺计算》、《jquery中Ajax用法总括》、《jQuery常见优异特效汇总》、《jQuery动画与特效能法总结》及《jquery接纳器用法计算》

    css代码:

    这里是个demo ,未有做平滑滚动,必要的能够本身丰裕。

    2.3 函数展开

    jquery左边栏导航链接点不了

    呵呵 应该出现了 冒泡吧 外界div 包罗了 内部的啊
    加个那些 试试
    $('你的有链接开关').click(funtion(event){
    event.stopPropagation();
    })  

    1010cc时时彩经典版 2

    您可能感兴趣的小说:

    • JQuery 写的特性导航菜单
    • jquery 完成两级导航菜单附效果图
    • jQuery 浮动导航菜单适合购物商品类其余网址
    • jQuery 达成左边浮动导航菜单功效
    • jQuery完结特性翻牌效果导航菜单的措施
    • jquery完毕Infiniti分级横向导航菜单的不二等秘书籍
    • jQuery完毕的动态伸缩导航菜单实例
    • jQuery垂直多级导航菜单代码分享
    • 依据jquery实现导航菜单高亮呈现(三种办法)
    • jquery完结全体减少成效的垂直导航菜单

    大意就介绍这么多啊,上边上代码。

    复制代码 代码如下:

    html(js,jquery)实现伸缩右边栏

    发到你邮箱了,直接运营layout.html试试,看是还是不是你想要的成效,是的话,给分哦!  

    在此之前为我们介绍了相当多导航菜单,前天给大家分享一款基于jquery的侧边栏导航。这款导航左边...

    入手做了二个简易手风琴菜单,上海体育场合:

    联手看下落成的代码:

    您恐怕感兴趣的小说:

    • jQuery点击导航栏选中更动样式的落到实处代码
    • Jquery给当前页只怕跳转后页面包车型地铁导航栏增多选中后体制的实例
    • jquery完毕垂直和档次菜单导航栏
    • JQuery Mobile完成导航栏和页脚
    • jquery达成鼠标点击后实行列表内容的导航栏效果
    • 超炫的jquery仿flash导航栏特效
    • 简单易行的jquery侧边导航栏和页面选中效果
    • 用jquery的法子制作一个轻巧的导航栏
    • jQuery Mobile 导航栏代码
    • JQuery 浮动导航栏达成代码

    2.选拔办法

    <div id="menuDiv">
    <ul id="menu">
    <li class="parentLi">
    B
    <ul class="childrenUl">
    <li class="childrenLi">C</li>
    <li class="childrenLi">C</li>
    <li class="childrenLi">C</li>
    </ul>
    </li>
    <li class="parentLi">
    B
    <ul class="childrenUl">
    <li class="childrenLi">C</li>
    <li class="childrenLi">C</li>
    <li class="childrenLi">C</li>
    </ul>
    </li>
    <li class="parentLi">
    B
    <ul class="childrenUl">
    <li class="childrenLi">C</li>
    <li class="childrenLi">C</li>
    <li class="childrenLi">C</li>
    </ul>
    </li>
    </ul>
    </div>
    
    $('.sub-menu ul').hide();
    $(".sub-menu").click(function () {
    $(this).children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    }); //@ sourceURL=pen.js
    

    响应式方面,同样的顶端导航栏消失后右下角的Logo才面世。点击现身导航,选中后未有;

    2.2 滑到左边手,并在模态的窗格中彰显此页的隐身的情节

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版jQuery插件PageSlide实现左右侧栏

    关键词: