周六的html学习

导航栏的设计准备让他固定在页面的顶端，然后可以隐藏这样子的设置position属性为fixed，然后设定各项参数即可。

.menu{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        margin: 0;
        /* 区别于relative，fixed各种参数需要手动设置 */
        text-align:center;
        background-color: white;
    }

透明度变化，在hover中设置opacity参数，为了不瞬间变化在初始设置时加入
transition: opacity .5s ease-in-out;达到淡入淡出的效果
运行后发现整个导航栏都会淡入淡出，看起来很费眼睛，所以专门做另一个负责淡入淡出透明变化的导航栏
原先的就把他直接设置成高度0防止挡住menubar的判定区域

但是menu-item的高度还是存在，所以要让他屏蔽鼠标事件,以及超链接可以响应鼠标事件

.menu li.menu-item{
        line-height:50px;
        width: 80px;
        display:inline-block;
        margin:0 20px 0 0;
        pointer-events: none;
    }
.menu li.menu-item a{
        text-align: center;
        text-decoration: none;
        color:black;
        opacity: 1;
        pointer-events: visible;
    }

但是吧，超链接响应了，menubar就无法响应……

重新整理思路，我们可以把menubar放在menu里面和menu-item并列置底，z-index:-1;，这样可以使用menu:hover控制鼠标在menu范围内都可以触发，最终达到了我想要的效果
（注意：CSS中只能父元素hover控制子元素，不能控制无关元素，要实现只能用JS）
代码如下

.menu,.menu .menubar{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        margin: 0;
        padding: 0;
        text-align:center;
        /* 固定在上方作为导航栏，因此各种参数需要手动设置 */
    }
    .menu .menubar{
        z-index: -1;
        height:50px;
        opacity:0;
        background-color: white;
        transition: opacity 0.5s ease-in-out;
    }
    .menu .menu-item{
        line-height:50px;
        width: 80px;
        /* 导航栏菜单的行高宽度 */
        display:inline-block;
        margin:0 20px 0 0;
        pointer-events: none;
    }
    .menu .menu-item a:link,a:visited{
        text-align: center;
        text-decoration: none;
        /* 文字居中，去除超链接下划线 ,居中放在item中也可以*/
        color:black;
        opacity: 1;
        pointer-events: visible;
    }

    .menu:hover .menubar
    {
        opacity: .8;
        box-shadow:0 0 2px 2px rgba(172,172,172,.4);
        /* 透明度变化以及阴影效果 */
    }

猜你喜欢