响应式边栏导航 - 如何使用 CSS3 媒体查询来创建一个边栏导航。
引用示例
点击运行
自动执行
HTML 教程
JavaScript 教程
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul class="sidenav"> <li><a class="active" href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul> <div class="content"> <h2>响应式边栏导航实例</h2> <p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p> <p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p> <h3>重置浏览器窗口大小，查看效果。</h3> </div> </body> </html>
CSS
JAVASCRIPT
嵌入代码
