喜马拉雅部分导航栏实现

最新推荐文章于 2024-05-21 18:20:21 发布

罪岁.

最新推荐文章于 2024-05-21 18:20:21 发布

阅读量129

点赞数

分类专栏： javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_46936691/article/details/130393364

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html

<!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>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="nav">
        <a href="#" class="nav-a"><img src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"></a>
        <div class="nav-one">
            <a href="#" class="one-a1"><span>发现</span></a>
            <div class="a2-box">
                <a href="#" class="one-a2">
                    <span>频道</span>
                    <div class="triangle"></div>
                </a>
                <div class="pull">
                    <div class="pull-list">
                    </div>
                </div>
            </div>
            <a href="#" class="one-a3"><span>电台</span></a>
            <div class="line"></div>
        </div>
        <div class="search-box">
            <form class="search-f">
                <input type="text" placeholder="专辑/声音/主播" class="search">
                <span>
                    <i class="iconfont icon-sousuo"></i>
                </span>
                <div class="disnone">
                    <ul>
                        <li class="sear-title">热门搜索</li>
                        <li class="sear-item">遮天</li>
                        <li class="sear-item">牛大宝</li>
                        <li class="sear-item">吞噬星空</li>
                        <li class="sear-item">米小圈快乐西游记</li>
                        <li class="sear-item">刘兰芳评书</li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
   <script src="js/index.js"></script> 
</body>
</html>

css

.nav{
    width: 1080px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.nav-a{
    display: flex;
    width: 154px;
    height: 60px;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
}
.nav-a img{
    width: 154px;
}
.nav-one{
    margin-left: 10px;
    height: 60px;
    line-height: 60px;
    width: 225px;
    display: flex;
    align-items: center;
    position: relative;
}
.nav-one .one-a1{
    margin-left: 5px;
    display: block;
    color: #72727b;
    width: 80px;
    text-align: center;
}
.nav-one .one-a1 span{
    color: #40404c;
    font-size: 16px;
}

.one-a2{
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
}
.one-a2 span{
    color: #72727b;
    font-size: 14px;
}
.one-a3{
    display: block;
    color: #72727b;
    width: 80px;
    font-size: 14px;
    text-align: center;
}
.triangle{
    content: '^';
    position: relative;
    left: 5px;
    text-indent: -99999px;
    overflow: hidden;
    width: 7px;
    height: 7px;
    border: 1px solid #ccc;
    transform: rotate(135deg);
    display: inline-block;
    border-left: 0;
    border-bottom: 0;
    top: -2px;
    transition: transform .3s ease-in-out;
}
.triangle1{
    transform: rotate(-45deg);
    top: 0;
}
.pull{
    position: fixed;
    top: 60px;
    width: 1080px;
    height: 152px;
    left: 50%;
    margin-left: -540px;
    z-index: -2;
    line-height: 1.4;
    transition: all .3s ease-in-out;
    transform: translateY(-300px) translateZ(0);
}
.pull1{
    transform: translateY(0) translateZ(0);
}
.pull-list{
    width: 1080px;
    box-sizing: border-box;
    padding: 20px 0;
    background-color: #fbfbfc;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    min-height: 140px;
    text-align: left;
    padding-left: 40px;
}
.pull-item{
    color: #40404c;
    font-size: 13px;
    line-height: 1.4;
    display: inline-block;
    background: #ebebeb;
    border-radius: 12px;
    padding: 3px 16px;
    margin: 0px 16px 20px auto;
    width: 107px;
    text-align: center;
    box-sizing: border-box;
}
.pull-item:hover{
    color: #f86442;
}
.line{
    display: inline-block;
    height: 3px;
    width: 32px;
    bottom: 0;
    background: #f86442;
    position: absolute;
    bottom: 0;
    left: 30px;
    transition: all .3s ease-in-out;
}
.search-box{
    width: 360px;
    height: 100%;
    margin-left: 5px;
    vertical-align: top;
}
.search-f{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
}
.search{
    padding: 10px 70px 10px 20px;
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    border: 1px solid #f86442;
    border-radius: 54px;
    outline: 0;
    box-sizing: border-box;
}
.search-f span{
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f86442;
    background-image: linear-gradient(90deg,#ff9973 1%,#ff7251 99%);
    width: 60px;
    height: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    border-radius: 0 54px 54px 0;
    cursor: pointer;
}
.search-f span i{
    font-size: 20px;
}

.search:focus{
    border-color: #f86442;
    box-shadow: 0 0 0 2px rgba(249,123,94,.2);
}
.disnone{
    display: none;
}
.disnone ul{
    width: 271px;
    background: #fff;
    margin-left: 20px;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,.1);
}
.sear-title{
    padding: 5px 10px;
    color: #999;
    font-size: 14px;
}
.sear-item{
    position: relative;
    transition: all .2s;
    padding: 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.sear-item:hover{
    background: #f3f4f5;
    cursor: pointer;
}

//数据数组
var data = [
    {
        "text":"小说",
        "href":"https://www.ximalaya.com/channel/7/"
    },
    {
        "text":"儿童",
        "href":"https://www.ximalaya.com/channel/11/"
    },
    {
        "text":"相声小品",
        "href":"https://www.ximalaya.com/channel/9/"
    },
    {
        "text":"评书",
        "href":"https://www.ximalaya.com/channel/10/"
    },
    {
        "text":"娱乐",
        "href":"https://www.ximalaya.com/channel/13/"
    },
    {
        "text":"悬疑",
        "href":"https://www.ximalaya.com/channel/14/"
    },
    {
        "text":"人文",
        "href":"https://www.ximalaya.com/channel/17/"
    },
    {
        "text":"国学",
        "href":"https://www.ximalaya.com/channel/18/"
    },
    {
        "text":"头条",
        "href":"https://www.ximalaya.com/channel/24/"
    },

    {
        "text":"音乐",
        "href":"https://www.ximalaya.com/channel/19/"
    },
    {
        "text":"历史",
        "href":"https://www.ximalaya.com/channel/16/"
    },
    {
        "text":"感情",
        "href":"https://www.ximalaya.com/channel/20/"
    },
    {
        "text":"投资理财",
        "href":"https://www.ximalaya.com/channel/26/"
    },
    {
        "text":"个人提升",
        "href":"https://www.ximalaya.com/channel/31/"
    },

    {
        "text":"健康",
        "href":"https://www.ximalaya.com/channel/22/"
    },
    {
        "text":"生活",
        "href":"https://www.ximalaya.com/channel/21/"
    },
    {
        "text":"影视",
        "href":"https://www.ximalaya.com/channel/15/"
    },
    {
        "text":"商业管理",
        "href":"https://www.ximalaya.com/channel/27/"
    },
    {
        "text":"英语",
        "href":"https://www.ximalaya.com/channel/29/"
    },
    {
        "text":"少儿素养",
        "href":"https://www.ximalaya.com/channel/12/"
    },
    {
        "text":"科技",
        "href":"https://www.ximalaya.com/channel/28/"
    },
    {
        "text":"教育考试",
        "href":"https://www.ximalaya.com/channel/32/"
    },
    {
        "text":"体育",
        "href":"https://www.ximalaya.com/channel/25/"
    },
    {
        "text":"小语种",
        "href":"https://www.ximalaya.com/channel/30/"
    },
] 
//渲染数据到下拉框
var lists = document.querySelector(".pull-list")
var str=''
for(var i = 0;i<data.length;i++){
    str+=`
        <a href="${data[i].href}" class="pull-item">${data[i].text}</a>
    `
}
lists.innerHTML=str
//功能区
var triangle = document.querySelector(".triangle") //频道后三角
var a2 = document.querySelector(".a2-box") //频道
var a3 = document.querySelector(".one-a3") //电台
var pull = document.querySelector(".pull") //下拉框
var line = document.querySelector(".line") //下方滑动红线
a2.onmouseover = function(){   //鼠标进入事件
    triangle.classList.add("triangle1") //三角旋转
    pull.classList.add("pull1") //下拉框从上方划出
    line.style.left="100px" //红线滑动至
}
a2.onmouseout = function(){
    triangle.classList.remove("triangle1")
    pull.classList.remove("pull1")
    line.style.left="30px"
}
a3.onmouseover = function(){
    line.style.left="170px"
}
a3.onmouseout = function(){
    line.style.left="30px"
}

//搜索框聚焦样式
var ipt = document.querySelector(".search")
var dis = document.querySelector(".disnone")
ipt.onfocus = function(){
    console.log(dis);
    dis.style.display="block"
}
ipt.onblur = function(){
    dis.style.display=""
}