右侧固定导航栏

最新推荐文章于 2022-07-02 17:10:57 发布

weixin_34224941

最新推荐文章于 2022-07-02 17:10:57 发布

阅读量737

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/iriliguo/p/6479648.html

版权

实现效果：固定导航栏的高度为整个屏幕高度；

实现二级导航在鼠标放在相应文字板块，从右往左出现，

鼠标移开，子导航从左往右消失（把导航栏固定在左侧，不用改js代码，也是从左往右出现，从右往左消失）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
        *{
            text-decoration: none;
            color: black;
        }
        .right_nav {
            width: 70px;
            height: 100%;
            background-color: lightpink;
            position: fixed;
            top: 0;
            right: 1px;
            z-index: 3;

        }
        .right_nav .a,.aa{

            height: 40px;
            line-height: 30px;
            text-align: center;
            margin:0;
            padding: 0;
            margin-bottom: 10px;
            position: relative;
            top:25%;
            border: 1px solid mediumpurple;


        }
        .a:hover,.aa:hover {
            background:  mediumpurple;
        }
        .account {
            width:100px ;
            height: 30px;
            position: absolute;
            right: 69px;
            top:10px;
            border: 1px solid mediumpurple;
            display: none;
        }
        .buy {
            width:150px ;
            height: 30px;
            position: absolute;
            border: 1px solid mediumpurple;
            right: 69px;
            top:7px;
            display: none;

        }

    </style>
</head>
<body>
<div class="right_nav">
    <div class="a">账号
        <div class="account ">
            哟哟没账号
        </div></div>
    <div  class="a">购物车
        <div class="buy">去找孙空空辣</div>
    </div>
    <div  class="aa"><a href="#top" >to top</a></div>
</div>

<script>
$(".a").hover(function () {
$(this).children().animate({width: 'toggle'});
})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/iriliguo/p/6479648.html

weixin_34224941

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
右侧固定导航栏

实现效果：固定导航栏的高度为整个屏幕高度；实现二级导航在鼠标放在相应文字板块，从右往左出现，鼠标移开，子导航从左往右消失（把导航栏固定在左侧，不用改js代码，也是从左往右出现，从右往左消失）。<!DOCTYPE html><html lang="en"><head> <meta ch...
复制链接

扫一扫