大图背景悬停导航菜单

栏目: Html · 发布时间: 5年前

核心属性

padding-top: 40% 为菜单项的背景预留空间

background-size: cover 背景图完全覆盖背景区域，但是可能会有部分看不到

:hover + transition + opacity + z-index 悬停显示子菜单的动画效果

@media + flex-direction: row 自适应小屏幕，使菜单项内容水平排列

本文使用了不写闭合标签的方法来去除inline-block元素之间的间隙。

```
<div class="menu">
```
```
<h1>欢迎来到旧金山</h1>
```
```
<dl>
```
```
<dt><a href=#>攻略</a>
```
```
<dd>
```
```
<a href=#>
```
```
景点，天气，路线等
```

<img src=https://pics.codecolor.cn/responsive-panel-menu/view-from-st-regis.jpg alt>

```
</a>
```
```
<dt><a href=#>旅行</a>
```
```
<dd class=tours>
```
```
<a href=#>
```

如何周游：通过陆地、海洋和天空

<img src=https://pics.codecolor.cn/responsive-panel-menu/market-streetcar.jpg alt>

```
</a>
```
```
<dt><a href=#>宾馆</a>
```
```
<dd class=hotels>
```
```
<a href=#>
```

住在哪里？价格要适合符合预算

<img src=https://pics.codecolor.cn/responsive-panel-menu/st-regis-pool.jpg alt>

```
</a>
```
```
<dt><a href=#>事件</a>
```
```
<dd class=events>
```
```
<a href=#>
```

从购物市场到年度活动和各种音乐会

<img src=https://pics.codecolor.cn/responsive-panel-menu/wrapped-boxes.jpg alt>

```
</a>
```
```
</dl>
```
```
</div>
```

```
* {
```
```
box-sizing: border-box;
```
```
}
```
```
body {
```
```
margin: 0;
```
```
background: #101;
```
```
}
```
```
div a {
```
```
color: #fff;
```
```
text-decoration: none;
```
```
}
```
```
h1 {
```
```
position: absolute;
```
```
width: 100%;
```
```
padding: 0 1rem;
```
```
margin-top: 3rem;
```
```
color: #fff;
```
```
font-size: 3rem;
```
```
line-height: 1;
```
```
font-weight: 100;
```
```
text-align: center;
```
```
z-index: 1;
```
```
transition: .3s;
```
```
}
```
```
dl {
```
```
position: relative;
```
```
margin-top: 0;
```
```
padding-top: 40%;
```

background-image: url(https://pics.codecolor.cn/responsive-panel-menu/golden-gate.jpg);

```
background-size: cover;
```
```
}
```
```
dt {
```
```
display: inline-block;
```
```
width: 25%;
```
```
padding: .5rem;
```
```
text-align: center;
```
```
background: rgba(0,0,0,0.5);
```
```
}
```
```
dt a {
```
```
display: block;
```
```
font-size: 1.2rem;
```
```
}
```
```
dd {
```
```
position: absolute;
```
```
top: 0;
```
```
left: 0;
```
```
width: 25%;
```
```
height: 40vw;
```
```
margin: 0;
```
```
opacity: 0;
```
```
background: rgba(255,0,0,0.4);
```
```
transition: .65s opacity;
```
```
}
```
```
dd.tours {
```
```
left: 25%;
```
```
background: rgba(255,255,0,0.4);
```
```
}
```
```
dd.hotels {
```
```
left: 50%;
```
```
background: rgba(255,0,255,0.4);
```
```
}
```
```
dd.events {
```
```
left: 75%;
```
```
background: rgba(0,255,255,0.4);
```
```
}
```
```
dd a {
```
```
display: flex;
```
```
flex-direction: column;
```
```
padding: 1.4rem;
```
```
font-size: 1.2rem;
```
```
opacity: 0;
```
```
transition: .7s .3s;
```
```
}
```
```
dd a img {
```
```
display: block;
```
```
width: 100%;
```
```
height: auto;
```
```
margin-top: 1rem;
```
```
margin-bottom: 5rem;
```
```
}
```
```
div:hover h1, div:focus h1 {
```
```
opacity: 0;
```
```
z-index: 0;
```
```
}
```

dt:hover + dd, dt:hover + dd a, dt:focus + dd, dt:focus + dd a {

```
opacity: 1;
```
```
}
```

dd:hover, dd:focus, dd:hover a, dd:focus a {

```
opacity: 1;
```
```
}
```
```
@media screen and (max-width: 700px) {
```
```
dd {
```
```
width: 100% !important;
```
```
left: 0 !important;
```
```
pointer-events: none;
```
```
}
```
```
dd a {
```
```
flex-direction: row;
```
```
justify-content: none;
```
```
padding: 0;
```
```
height: 100%;
```
```
}
```
```
dd a img {
```
```
margin-top: 0;
```
```
margin-left: 3rem;
```
```
height: 100%;
```
```
}
```
```
}
```
```
@media screen and (max-width: 500px) {
```
```
h1 {
```
```
font-size: 1.5rem;
```
```
margin-top: 1.5rem;
```
```
}
```
```
}
```

以上所述就是小编给大家介绍的《大图背景悬停导航菜单》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

产品经理全栈运营实战笔记

林俊宇 / 化学工业出版社 / 49.8元

本书凝结作者多年的产品运营经验，读者会看到很多创业公司做运营的经验，书中列举了几十个互联网产品的运营案例去解析如何真正做好一个产品的冷启动到发展期再到平稳期。本书主要分为六篇：互联网运营的全面貌；我的运营生涯；后产品时代的运营之道；揭秘刷屏事件的背后运营；技能学习；深度思考。本书有很多关于产品运营的基础知识，会帮助你做好、做透。而且将理论和作者自己的案例以及其他人的运营案例结合起来，会让读者更容易......一起来看看《产品经理全栈运营实战笔记》这本书的介绍吧!

码农工具

大图背景悬停导航菜单

核心属性

产品经理全栈运营实战笔记

Base64 编码/解码

XML、JSON 在线转换

RGB CMYK 转换工具