用input做nav(导航)

　　今天就说一说我上周做后台导航栏所get到的小知识点。

　　　　众所周知网页导航栏都是用ul-li制作的 然后点击效果是由JS的onclick事件实现的（给每个li附加一个onclick事件，事件中（当点击发生时）把所有的li样式清空再将被点击的li附上点击样式）;

　　　　但是我在网上找的一个模板是用纯css制作的 他的导航栏每一栏都是一个input单选框，我觉得这个设计很巧妙。
　　　　他为什么这么做呢 因为导航栏也是单选的，基本需求是一样的，问题就是怎么让一个单选框长得更“像”一个导航栏。

　　先说说input-nav是怎么实现的

先放预览图

 

　　　　html:

<div class="bg">
    <input type="radio" checked="checked" name="name"><span>HOME</span><i class="xin"></i>
    <input type="radio" name="name"><span>HOME</span><i class="xin"></i>
    <input type="radio" name="name"><span>HOME</span><i class="xin"></i>
    <input type="radio" name="name"><span>HOME</span><i class="xin"></i>
    <input type="radio" name="name"><span>HOME</span><i class="xin"></i>
</div>

 

　　　  css:

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #1ABC9C;
        }
        .bg{
            width: 150px;
            height: 800px;
            background-color: #f0f0f0;
            position: absolute;
            left: 200px;
            top: 100px;
        }
        .bg input{
            opacity: 0;
            filter: alpha(opacity=0);
            position: absolute;
        }
        input[checked="checked"]{
            color:red;
        }
        input:hover + span,input:checked + span{
            background-color: #fff;
            color:#1ABC9C;
        }
        input:checked + span + i:before,input:checked + span + i:after{
            background:#1ABC9C;
        }
        .bg>span,.bg>input{
            background: #f0f0f0;
            display: block;
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            z-index: 9;
        }
        .bg > span{
            /*过度动画*/
            -webkit-transition: all .4s;
               -moz-transition: all .4s;
                 -o-transition: all .4s;
                    transition: all .4s;
        }
        .xin:before,.xin:after {
            /*心形图标*/
            content: "";
            width: 8px;
            height: 14px;
            position: absolute;
            background: #000;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
            margin-top: -30px;
            margin-left: 25px;
        }
        .xin:after {
            margin-left: 17px;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

　　　　一个单选框的样式是这样的，如何把单选框前边的碍事的点干掉呢？ opacity: 0;filter: alpha(opacity=0);(详见css17-19) 其实前边的点就是<input type="radio">(他的width不管多大，这个点都会水平居中，    　　　  height就是这个点的直径！);

 　　　剩下的点击效果 就是input[checked="checked"] 还有input:checked等css选择器轻松解决！

　　　 

这么怪癖的想法肯定不止我想到。为什么没有流行起来呢！

　　　　1.这个点击效果啊一刷新就没咯(虽然ul-li的也会消失，刷新页面点击效果不消失得用后台语言实现....);

　　　　2.这种方法比较适合ajax，因为input外边或者后边都不能放一个a标签去跳转(要么影响点击效果，要么影响跳转！);

　　　　3.兼容性问题 其他还好说IE9.0……  ^o^

优点肯定也是有的

　　　　1.减少js DOM操作

　　　　2.觉得实现起来要比ul-li用js简单的多！

 

就这样。

input实现nav 预览 http://www.wangzhihui.cc/nav-input.html

ulli实现nav预览 http://www.wangzhihui.cc/nav-ulli.html

源码都在网页上，查看源码！