|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现
破洛洛文章简介:纯CSS打造可折叠树状菜单。
跟着CSS3的公布,外洋研讨正热火朝天,但在国际另有良多人抱着IE不撑持CSS3的设法,一直无动于中不愿往进修。可是汗青告知我们,好的器材势必流行,CSS3也终将也会替换CSS2,上面就和人人分享一个用CSS3打造的可折叠树状菜单。
间接上图:
树状菜单信任人人都不会生疏,我们一样平常用css+JS的体例来完成。而css3的到来,让我们挣脱JS的束厄局促,间接使用CSS3的“选择器“就可以完成可折叠树状菜单。
全体的代码良多,就不逐句逐句讲了,只把我以为主要的中央提出来讲说吧。
Html代码:- <li><labelfor="subsubfolder1">上级</label><inputid="subsubfolder1"type="checkbox"/><ol><liclass="file"><a>上级</a></li><li><labelfor="subsubfolder2">上级</label><inputid="subsubfolder2"type="checkbox"/><ol><liclass="file"><a>无穷级</a></li><liclass="file"><a>无穷级</a></li><liclass="file"><a>无穷级</a></li><liclass="file"><a>无穷级</a></li><liclass="file"><a>无穷级</a></li><liclass="file"><a>无穷级</a></li></ol></li></ol></li>
复制代码 完成的思绪是使用checkbox的checked值来判别上级栏目是不是睁开,CSS3的选择器中供应了:checked这个伪类,这个伪类供应我们,当元素具有checked这个值的时分就实行你的CSS。(很壮大是吧。有了CSS3我们会少写良多JS哦!)- <labelfor="subsubfolder1">上级</label><inputid="subsubfolder1"type="checkbox"/>
复制代码 当checkbox的具有checked值的时分就就让OL实际出来,到达我们想要的功效。
接上去看看CSS代码吧:- liinput{position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;}input+ol{display:none;}input+ol>li{height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;}lilabel{cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png)no-repeat0px1px;}input:checked+ol{background:url(toggle-small.png)44px5pxno-repeat;margin:-22px00-44px;padding:27px0080px;height:auto;display:block;}input:checked+ol>li{height:auto;}
复制代码 这段代码是树状菜单的中央:- input:checked+ol{background:url(toggle-small.png)44px5pxno-repeat;margin:-22px00-44px;padding:27px0080px;height:auto;display:block;}
复制代码 这个是讲当inoput具有了checked后它平级的OL具有的款式。
检察DEMO
利用IE9以下扫瞄就不必看了,请利用非IE扫瞄器。
(想让IE6+扫瞄器撑持也是能够滴,可是必要加JS来摹拟css3属性。外洋有良多牛人都写了让IE6+扫瞄器撑持部分CSS3的JS,比方PIE)
总结:
整体来讲,完成思绪很复杂,次要是使用CSS3的checked伪类来完成OL的埋没显现。不外遗憾的是IE巡游器不撑持CSS3,但我们不克不及由于IE的不撑持而保持对CSS3的研讨。在外洋CSS3和HTML5都是前端很抢手的话题,他们研讨的器材远远凌驾我们,但国际真正往实验的仍是未几,关于一个前端开辟职员来讲是一件很可悲的事。我以为CSS3应当引发我们的器重,不克不及让我们输在起跑线。让我们人人一同来推进CSS3的开展吧。
</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。 |
|