大图背景悬停导航菜单

栏目: 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;
```
```
}
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

ASP.NET 2.0开发指南

郝刚 / 人民邮电出版社 / 2006 / 88.0

本书紧紧围绕ASP.NET 2.0技术精髓展开深入讲解，全书分为6个部分，共18章。第1部分介绍基础知识，包括ASP.NET 2.0概述、Visual Studio 2005集成开发环境、创建ASP.NET应用程序和C# 2.0程序设计基础。第2部分讲解用户界面方面的特性，包括母版页、主题和皮肤、站点导航控件和其他新增服务器控件。第3部分探讨了数据访问方面的内容，包括数据访问技术概述、数据源控件、......一起来看看《ASP.NET 2.0开发指南》这本书的介绍吧!

码农工具

大图背景悬停导航菜单

核心属性

ASP.NET 2.0开发指南

在线进制转换器

HTML 编码/解码

SHA 加密