这篇文章主要为大家展示了“HTLM5+css3如何实现简单的导航菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTLM5+css3如何实现简单的导航菜单”这篇文章吧。
简单的导航菜单
用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如何实现简单的导航菜单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
