以下是一个简单实例,可以通过学习了解响应工菜单的制作。
html
<nav class="nav"> <ul> <li class="current"><a href="#">Portfolio</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Print Media</a></li> <li><a href="#">Graphic Design</a></li> </ul> </nav>
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 <li> items */ margin: 0; } .nav .current { display: block; /* show only current <li> item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本文首发公众号「 前端从进阶到入院 」,欢迎关注! 最近看到阿里前端技术专家狼...
先看页面效果。下面四个按钮分别表示开始、结束、暂停、继续 下面是帧动画图片素...
Etcd 是一个使用一致性哈希算法(Raft)在分布式环境下的 key/value 存储服务。 利...
TOP云 (west.cn)4月14日消息,上周知名出版社Dominion Enterprises对外宣称,...
在这个万物互联的时代,无论各行各业,官方网站几乎已经成为了企业必备的资产, ...
三拼 域名 ,代表的是三个汉字,可以说对于国人来讲想要记住三个字的品牌名称并...
乌克兰一家从事销售针织品企业启用Pinofino.top作为官网主 域名 ,该公司主要生...
问题:为什么不提倡将Word中的内容直接拷到网站的编辑器中? 解答:直接将Word中...
SkyWalking 是一个应用性能监控系统,特别为微服务、云原生和基于容器(Docker, ...
简介: 《实时数仓入门训练营》由阿里云研究员王峰、阿里云高级产品专家刘一鸣等...