首页 » 前端笔记 » 自适应导航条的写法

自适应导航条的写法

admin 2019-05-17 98 views 0

扫一扫用手机浏览

在网站的制作过程中,导航条尤为重要,如何才能做出一个自适应的导航条呢?这里分别用到了html语言、css层叠样式表和JavaScript,请看下面代码。

1.html

<div class="nav" id="myBtn">
   <ul id="myDiv">
	  <li><a href="index.html">网站首页</a></li>
	  <li><a href="about.html">关于我们</a></li>
	  <li><a href="product.html">产品中心</a></li>
	  <li><a href="news.html">新闻资讯</a></li>
	  <li><a href="contact.html">联系我们</a></li>
   </ul>
</div>


2.css

/* 电脑版样式 */
@media (min-width: 640px) {
.nav{ width:100%; height:40px;}
.nav ul{ margin:0; padding:0; list-style:none;}
.nav ul li{ float:left; width:20%; height:40px; text-align:center; line-height:40px;}
.nav ul li a{ font-family:"微软雅黑"; font-size:14px; color:#000000;}
.nav ul li:hover a{ color:#FF0000;}
}

/* 手机版样式 */
@media (max-width: 640px) {
.nav{ width:100%; height:40px;}
.nav ul{ display:none; margin:0; padding:0; list-style:none; position:fixed; left:0; top:40px;}
.nav ul li{ width:100%; height:40px; text-align:center; line-height:40px;}
.nav ul li a{ font-family:"微软雅黑"; font-size:14px; color:#000000;}
.nav ul li:hover a{ color:#FF0000;}
}


3.JavaScript

var myBtn  = document.getElementById('myBtn');
var myDiv = document.getElementById('myDiv');
myBtn.onclick = function(){
    var val = myDiv.style.display;
    if(val == 'block'){
        myDiv.style.display = 'none'; //显示
    }else{
        myDiv.style.display = 'block'; //隐藏
    }
}


赞(2 打赏
  • 微信
  • 支付宝
  • QQ钱包

您的支持,是我继续努力的动力!

本文由晨美工作室原创并发布于晨美博客,若需转载请设置版权!

转载请注明本文地址:https://www.chenmei.cn/6.html

最后编辑于:2019/05/17作者: admin

相关文章

阿里云如何申请配置ssl证书

阿里云SSL证书,在云上签发各品牌数字证书,实现网站HTTPS化,使网站可信,防劫持、防篡改、防监听。并进行统一生命周期管理,简化...

前端笔记 2019-07-04 阅读131 评论0

使用CSS3实现表格隔行/隔列变色

废话少说,先看效果,如果不是你想要的,你可以撤了。这些都是css控制的,然后我们看下样式:table tr:nth-ch...

前端笔记 2019-05-17 阅读99 评论0

发表评论