这篇文章主要为大家展示了“HTLM5+css3如何实现简单的导航菜单”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTLM5+css3如何实现简单的导航菜单”这篇文章吧。
创新互联是一家专注于成都网站设计、网站建设、外贸网站建设与策划设计,庐山网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:庐山等地区。庐山做网站价格咨询:18980820575
简单的导航菜单
用html5 css3 的新语义标签来写一下这段导航菜单代码
html代码:
<nav> <ul> <li><a href="http://www.yangqq.com/" >网站首页</a></li> <li><a href="http://www.yangqq.com/download/">个人博客模板</a></li> <li><a href="http://www.yangqq.com/news/s/">慢生活</a></li> </ul> </nav>
CSS代码:
nav ul li { display:inline;margin-right:10px;} nav ul li a {color:#000;display:block;float:left;padding:5px;} nav ul li a:hover {background:#eee;color:black;} }
如果想选中的导航能高亮显示,可以加上一段js代码:
<script language="javascript"> var obj=null; var As=document.getElementById('nav').getElementsByTagName('a'); obj = As[0]; for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0) obj=As[i];} obj.id='nav_current' </script>
提示:为了让js能够获取到菜单的id取值,所以应该给html中的nav标签添加一个id
<nav id="nav">
高亮显示的样式nav_current 也应该在css中写上一段代码,比如:
#nav_current{background:#eee;color:red;}
以上是“HTLM5+css3如何实现简单的导航菜单”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页题目:HTLM5+css3如何实现简单的导航菜单
链接地址:https://www.cdcxhl.com/article12/jiscgc.html
成都网站建设公司_创新互联,为您提供全网营销推广、Google、网站排名、微信小程序、网站策划、标签优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联