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;
}
js
//数据数组
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=""
}