CSS与媒体查询实现网页导航功能（附代码）

附上效果图，如果大家感觉不错，请参考实现代码：

代码如下，复制即可使用：

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title Document /title  style  body { background: #801638; body, body * { margin: 0; padding: 0; font-family: Roboto , sans-serif; font-weight: normal; transition: all .3s ease 0s; /* Background colours */ p + p article:nth-child(1) { background: #c22326; p + p article:nth-child(2) { background: #f37338; p + p article:nth-child(3) { background: #fdb632; p + p article:nth-child(4) { background: #027878; p + p article:nth-child(5), p + p { background: #801638; /* Main layout */ html, body, p + p { width: 100vw; height: 100vh; p + p { list-style: none; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow: hidden; /* Articles */ p + p article { flex: initial; width: 20%; height: 100%; text-align: center; color: #fff; text-decoration: none; vertical-align: bottom; box-sizing: border-box; padding: 2vh 1vw; position: relative; /* Big Headings */ body p:first-child { position: fixed; bottom: 8vh; background: #fff; width: 100%; text-align: center; padding: .5rem; z-index: 2; body p:first-child h1, body p:first-child h2 { margin: 0; padding: 0; /* Hover interaction */ p + p:hover article { flex: initial; width: 10%; p + p article:hover { width: 60%; article p { opacity: 0; transition: opacity .2s ease 0; p + p article:hover p { opacity: 1; transition: opacity .3s ease .3s; /* navigation */ p + p article h2 { bottom: 2vh; position: absolute; text-align: center; width: 100%; margin: 0; font-size: 3vh; /* Article layouts */ article p { text-align: left; width: 58vw; article p p, article p p h2, article p h3 { margin: 0 0 1em 0; article p p { width: 40vw; @media (max-width: 900px) { p + p article { padding: 2vh 3vw; p + p article h2 { transform: rotate(90deg); bottom: 23vh; min-width: 12em; text-align: left; transform: rotate(-90deg); transform-origin: 0 0 0; opacity: 1; p + p article:hover h2 { opacity: 0; article p p { width: 50vw; article p { max-height: calc(72%); overflow-y: auto; /style  /head  body  h1 我在这,谁敢动我。 /h1  h2 我是你们大哥的头 /h2  article  h2 大哥的小弟一 /h2  h3 大哥的小弟一 /h3  p 身高180 /p  p 体重120 /p  /article  article  h2 大哥的小弟二 /h2  h3 大哥的小弟二 /h3  p 身高160 /p  p 体重100 /p  /article  article  h2 大哥的小弟三 /h2  h3 大哥的小弟三 /h3  p 身高175 /p  p 体重180 /p  /article  article  h2 大哥的小弟四 /h2  h3 大哥的小弟四 /h3  p 身高180 /p  p 体重110 /p  /article  article  h2 大哥的小弟五 /h2  h3 大哥的小弟五 /h3  p 身高180 /p  p 体重150 /p  /article  /body  /html 

相信看了本文案例你已经掌握了方法，更多精彩请关注php 其它相关文章！

推荐阅读：

Node调试工具使用详解

webpack打包压缩js与css步骤详解

以上就是CSS与媒体查询实现网页导航功能（附代码）的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。