二十七、响应式布局练习- 美图导航栏1

news2024/11/14 17:17:41

准备工作
界面结构开发
样式设计 - style.less

一、准备工作

开发响应式设计的网页需要注意以下几点：
1.移动端优先 - 先写完移动端的界面，再写网页。因为现在都是手机用的比较多；
2.渐进增强 - 当移动端写完后，再慢慢增强pc端的功能；

要开发的手机大小的界面：

二、界面结构开发

分析：手机宽度下的网页元素，导航栏3个元素，左边菜单，中间标题，右边用户。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 网站如果需要再pc端用，reset需要重置下，不是的话，可以不用reset -->
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../fa/css/all.min.css">
    <link rel="stylesheet" href="./meitu/style.css">
</head>
<body>

    <!-- 外部容器 -->
    <div class="top-bar">
        <!-- 1.左侧菜单 -->
        <div class="left-menu">
            <!-- 创建菜单图标 3条线的图标，待会通过css来添加动画效果，从3条线变成一个叉 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>

             <!-- 创建弹出层的菜单 -->
             <ul class="nav">
                <li><a href="#">手机</a></li>
                <li><a href="#">美容仪器</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">企业网站</a></li>
                <li>
                    <a href="#"><i class="fas fa-search"></i></a>
                    <span>搜索 Meitu.com</span>
                </li>
             </ul>

        </div>
        <!-- 2.logo -->
        <!-- 他可以点所以是用a标签，点击后回到主页所以是 href="/" -->
        <h1 class="logo">
            <a href="/">美图手机</a>
        </h1>

    

        <!-- 3.用户信息 -->
        <div class="user-info">
            <!-- 就是一个超链接，所以用# -->
            <a href="#">
                <i class="fas fa-user"></i>
            </a>
        </div>

    </div>

</body>
</html>

用户信息用的是雪碧图，2x（2倍图），比他真实的图标大小，大了一倍，所以待会需要缩小下。

三、样式设计 - style.less

因为我们的菜单列表是后面点击左侧按钮在展示，所以在写样式前，先把这个菜单nav注释藏起来，不影响我们外面大局的布局。


        <div class="left-menu">
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>

             <!-- 创建弹出层的菜单 -->
             <!-- <ul class="nav">
                <li><a href="#">手机</a></li>
                <li><a href="#">美容仪器</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">企业网站</a></li>
                <li>
                    <a href="#"><i class="fas fa-search"></i></a>
                    <span>搜索 Meitu.com</span>
                </li>
             </ul> -->

        </div>

1、导航条的外部容器


.top-bar{
    height: 48px;
    background-color: #000;

    //3. 导航条的左右两个icon离边框都有间距
    padding: 0 14px;

    //4. 导航条上3个元素是横向排列，且垂直方向居中
    display: flex;
    align-items: center;
    
    //5. 3个元素的距离空白是分配到他们之间
    justify-content: space-between;
}

2.设置左侧导航图标

.left-menu{
    .menu-icon{
        // 因为li里面没有东西，所以设置了背景颜色后看不到，需要在设置点宽高才行
        width: 18px;
        height: 48px;
        position: relative;
        // 制作3条杠，然后通过定位，来控制他们的位置
        li{
            background-color: #bfa;
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;
        }
        // 3条杠分别不同的位置
        li:nth-child(1){
            top:18px;
        }
        li:nth-child(2){
            top:24px;
        }
        li:nth-child(3){
            top:30px;
        }
    }
}

  // 把li里面的背景颜色去掉，就完美了
        li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;
        }

3. 把图标三转换成X

a. 现在要做图标转换成x的动画，中间的线要消失,隐藏第二条线

可以用visibility: hidden; 或者 opacity: 0;
因为转换过程有个淡入淡出的过渡效果，所以旋转opacity: 0;

  li:nth-child(2){
            top:24px;
            // 隐藏
            opacity: 0;   
        }

b. 接下来两条线交叉，涉及到变形，上面线往下旋转，下面的线往上旋转

 li:nth-child(1){
            top:18px;
            //向下旋转
            transform:rotateZ(45deg);
        }
  li:nth-child(3){
            top:30px;
            //向上旋转
            transform:rotateZ(-45deg);

        }

c.优化x

问题：因为旋转的点在中心位置，所以导致转出来是 > 样式，不是 x 样式。
优化：修改变形的原点让他变成x。

  li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;

            // 修改变形的原点 让他变成x
            transform-origin: left center;
        }

d. 优化x：当变成x后，可能交叉点不是很中心，就只有自己试旋转角度，这里实处为40deg

        li:nth-child(1){
            top:18px;
            //当变成x后，可能交叉点不是很中心，就只有自己试旋转角度
            transform:rotateZ(40deg);
        }

  		li:nth-child(3){
            top:30px;
            transform:rotateZ(-40deg);
        }

完整代码

//设置左侧导航图标
.left-menu{
 
    .menu-icon{
        width: 18px;
        height: 48px;
        position: relative;
        li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;
            transform-origin: left center;
        }
        li:nth-child(1){
            top:18px;
            transform:rotateZ(40deg);
        }
        li:nth-child(2){
            top:24px;
            opacity: 0;    
        }
        li:nth-child(3){
            top:30px;
            transform:rotateZ(-40deg);
        }
    }
}

e.制作从三变成 x 的动画效果

无js参与，所以我们用hover 模拟下,当鼠标移动到三，他立马变成 X

        li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;
            transform-origin: left center;

            // 从三到X，加上过渡效果动画
            transition: 0.5s;
        }
     //这里的3条杠，原始的位置
        li:nth-child(1){
            top:18px;
        }
        li:nth-child(2){
            top:24px;
            
        }
        li:nth-child(3){
            top:30px;

        }


        // 因为这里没有让js参与交互，所以先用hover来代替做下效果,当鼠标移入menu-icon, 从三 变成  X
        &:hover{

            li:nth-child(1){
                transform:rotateZ(40deg);
            }
            li:nth-child(2){
                opacity: 0; 
            }
            li:nth-child(3){
                transform:rotateZ(-40deg);
            }

        }

4. 把图标三转换成X，这部分css最终完整代码

//二、设置左侧导航图标
.left-menu{
    //图标
    .menu-icon{
        width: 18px;
        height: 48px;
        position: relative;
        li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;

            transform-origin: left center;
            transition: 0.5s;
        }
        li:nth-child(1){
            top:18px;
        }
        li:nth-child(2){
            top:24px;  
        }
        li:nth-child(3){
            top:30px;
        }

        &:hover{

            li:nth-child(1){
                transform:rotateZ(40deg);
            }
            li:nth-child(2){
                opacity: 0; 
            }
            li:nth-child(3){
                transform:rotateZ(-40deg);

            }

        }


    }
}