前端新手项目练习50projects50days——隐藏搜索栏（hidden-search）

本项目介绍了一个搜索栏项目，默认隐藏，仅显示搜索图标按钮，点击图标可以显示搜索栏，再次点击又会重新隐藏。

hidden-search.png

Html 部分定义了搜索栏。

<!DOCTYPE html>
<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8" />
    <!-- 虚拟窗口设置，宽度为设备宽度，缩放比例为1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入外部CSS(主要是引入字体图标)，并添加完整属性和跨域设置 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" 
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" 
        crossorigin="anonymous" />
    <!-- 引入本地CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- 标题 -->
    <title>Hidden Search</title>
</head>
<body>
    <!-- 实际显示区域 -->
    <div class="search">
        <!-- 左侧文本，默认隐藏-->
        <input type="text" class="input" placeholder="Search...">
        <!-- 右侧按钮 -->
        <button class="btn">
            <i class="fas fa-search"></i>
        </button>
    </div>
    <!-- 引入本地js-->
    <script src="script.js"></script>
</body>

js部分为搜索图标所在的按钮添加了一个点击监听事件，用来为搜索栏元素添加或者去除active类名。

const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('.input')

// 按钮监听点击事件
btn.addEventListener('click', () => {
    // 切换类名active
    search.classList.toggle('active')
    // 使输入框聚焦
    input.focus()
})

CSS 部分采用弹性布局，主要是为搜索栏添加了一个过渡效果，可以改变宽度。

* {
    box-sizing: border-box; /* 采用 border-box 方式计算元素宽高*/
}

body {
    /* 背景图案为渐变颜色 */
    background-image: linear-gradient(90deg, #7d5fff, #7158e2);
    font-family: sans-serif;  /* 字体 */
    display: flex;   /* 布局方式采用弹性布局 */
    align-items: center;  /* 元素在容器垂直方向居中对齐，用于display: flex中 */
    justify-content: center;  /* 元素在容器水平方向居中对齐，用于display: flex中 */
    height: 100vh;  /* 高度为视口高度 100% */
    overflow: hidden; /* 元素溢出部分隐藏 */
    margin: 0;  /* 元素外边距为0 */
}

.search {
    position: relative; /* 使用相对位置 */
    height: 50px; /* 元素高度为50px */
}

.search .input {
    background-color: #fff; /* 设置背景颜色为白色 */
    border: 0; /* 边框宽度为 0 */
    font-size: 18px; /* 字体大小为 18px */
    padding: 15px; /* 内边距为 15px */
    height: 50px; /* 高度为 50px */
    width: 50px; /* 宽度为 50px */
    transition: width 0.3s ease; /* 过渡效果用于宽度，持续0.3s，使用ease（先快后慢） */
}

.btn {
    background-color: #fff; /* 设置背景颜色为白色 */
    border: 0; /* 边框宽度为 0 */
    cursor: pointer; /* 设置光标样式为一只手 */
    font-size: 24px; /* 字体大小为 24px */
    position: absolute; /* 使用绝对位置 */
    top: 0; /* 顶部偏移为0 */
    left: 0; /* 左侧偏移为0 */
    height: 50px; /* 高度为50px */
    width: 50px; /* 宽度为50px */
    transition: transform 0.3s ease; /* 过渡效果为 0.3s的转换，使用ease（先快后慢）*/
}

.btn:focus,
.input:focus {
    outline: none; /* 没有外边框 */
}

.search.active .input {
    width: 200px; /* 宽度为200px */
}

.search.active .btn{
    transform: translateX(198px); /* 横轴移动 198px */
}

最终效果如下所示：

hidden-search.gif

最后编辑于：2022.07.18 15:56:52