大图背景悬停导航菜单

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

核心属性

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;
```
```
}
```
```
}
```

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

查看所有标签

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

码农书籍

从规范出发的程序设计

[美] Carroll Morgan / 裘宗燕 / 机械工业出版社 / 2002-8 / 45.00元

本书详细论述了有关规范程序设计的内容，包括：程序和精化、谓词演算、选择、迭代、构造类型、模块和封装等，最后几章还包含了大量的实例研究和一些更高级的程序设计技术。本书提倡一种严格的程序开发方法，分析问题要用严格方式写出程序的规范，而后通过一系列具有严格理论基础的推导，最终得到可以运行的程序。本书是被世界上许多重要大学采用的教材，适于计算机及相关专业的本科生和研究生使用。一起来看看《从规范出发的程序设计》这本书的介绍吧!

码农工具

大图背景悬停导航菜单

核心属性

从规范出发的程序设计

RGB转16进制工具

在线进制转换器

RGB CMYK 转换工具