大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下CSS中如何实现自适应导航菜单,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联公司长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为鹤山企业提供专业的网站制作、网站设计,鹤山网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
html
css
.nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav ul li { margin: 0 5px 10px 0; padding: 0; list-style: none; float: left; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; } /* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }
页面小于600显示成一列
@media (max-width: 600px) { .nav { position: relative; min-height: 30px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all
看完了这篇文章,相信你对“CSS中如何实现自适应导航菜单”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!