具有响应式效果的导航菜单
分类:实例代码
具有响应式效果的导航菜单属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用媒体查询实现了具有响应式效果的导航菜单。
代码非常的简单,目的是演示一下媒体查询的相关使用。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>前端教程网</title> <meta name="viewport" content="width=device-width"> <style> .MenuWrap { background-color: indigo; font-family: 'Oswald', sans-serif; font-size: 1rem; min-height: 2.75rem; display: flex; flex-direction: column; align-items: center; padding: 0 1rem; } @media (min-width: 31.25em) { .MenuWrap { flex-direction: row; } } .ListItem, .LastItem { color: #ebebeb; text-decoration: none; } @media (min-width: 31.25em) { .ListItem { margin-right: 1rem; } .LastItem { margin-left: auto; } } </style> </head> <body> <div class="MenuWrap"> <a href="#" class="ListItem">Home</a> <a href="#" class="ListItem">About Us</a> <a href="#" class="ListItem">Products</a> <a href="#" class="ListItem">Policy</a> <a href="#" class="LastItem">Contact Us</a> </div> </body> </html>
上面的代码演示简单的效果,更多内容参阅相关阅读。
相关阅读:
(1).@media可以参阅CSS3 Media Queries媒体查询一章节。
(2).flex布局可以参阅display:flex弹性布局一章节。
具有响应式效果的导航菜单,这样的场景在实际项目中还是用的比较多的,关于具有响应式效果的导航菜单就介绍到这了。