JS、CSS实现HTML自适应网页顶部top导航样式示例

最新推荐文章于 2022-02-10 16:57:47 发布

u014789708

最新推荐文章于 2022-02-10 16:57:47 发布

阅读量5.4k

点赞数

分类专栏： javascript 文章标签：自适应网页导航菜单 html自适应菜单 js css自适应导航菜单自适应顶部导航菜单html js css

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.csdn.net/u014789708/article/details/106338051

版权

本文提供了一个示例，展示了如何利用JavaScript和CSS来实现HTML自适应网页的顶部导航菜单。通过结合JS的动态响应和CSS的样式控制，确保导航菜单在不同设备上都能良好显示。

摘要由CSDN通过智能技术生成

JS、CSS实现HTML自适应网页顶部top导航样式示例

HTML：

<div class="topnav" id="myTopnav">
  <a href="#home">首页</a>
  <a href="#news">产品</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系方式</a>
  <a href="#about">关于我们</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<div style="padding-left:16px">
  <h2>js、css 响应式导航实例</h2>
  <p>浏览器打开，改变此网页全屏状态查看效果</p>
</div>

css：

body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px