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

HTML5+CSS3 欲思 0评论

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

pure-css3-hor-button-switch

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

下面分享一下第一个菜单的源码

<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的像素位置的来实现颜色的变化位置和相应的移动位置。

源码下载 演示地址

转载请注明:欲思博客 » 分享一款纯CSS3水平控制导航菜单和选择项

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (6)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址