分享一款纯CSS3水平控制导航菜单和选择项

分享一款基于纯CSS3的水平控制导航菜单源码，它有3种不同的颜色风格，菜单数量的数量可以自己定义，鼠标点击按钮时背景色块将会缓慢移动到所在的菜单位置。


除了使用菜单，大家还可以用这个来做水平控制开关按钮。效果应该也很不错。我们可以用它来控制用户的选择项。
下面分享一下第一个菜单的源码

<nav class="segmented-control segmented-control--turquoise" style="width: 600px;">

<input type="radio" name="sc-0" id="sc-0-1" />
<input type="radio" name="sc-0" id="sc-0-2" checked="checked" />
<input type="radio" name="sc-0" id="sc-0-3" />
<input type="radio" name="sc-0" id="sc-0-4" />

<label for="sc-0-1" data-value="Lorem Ipsum">Lorem Ipsum</label>
<label for="sc-0-2" data-value="Cras justo">Cras justo</label>
<label for="sc-0-3" data-value="Tellus Etiam">Tellus Etiam</label>
<label for="sc-0-4" data-value="Lorem Pellentesque">Lorem Pellentesque</label>

</nav>

大家可以看到有四个是否选中的input隐藏在里面，类型都是radio的。鼠标点击相关的菜单选项时，表示用户已经选中这个选项。相应id的input就会checked选中。
再来看一段CSS3代码：

.segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after,
.segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after,
.segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before,
.segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before,
.segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after,
.segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after,
.segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before,
.segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before {
 left: 0;
}
.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after,
.segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after,
.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before,
.segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before,
.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after,
.segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after,
.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before,
.segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {
 left: 50%;
}

可以看到是通过相关CSS类的 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，再通过:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.通过控制left的像素位置的来实现颜色的变化位置和相应的移动位置。
[/i]源码下载 [/i]演示地址