本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3实现智能手机中的带箭头菜单

本文介绍如何使用CSS 3实现一个智能手机中常用的带箭头菜单效果,实现效果如下所示。

本示例中的HTML代码如下所示:

<ul>
    <li><a href="#">菜单项一</a></li>
    <li><a href="#">菜单项二</a></li>
    <li><a href="#">菜单项三</a></li>
    <li><a href="#">菜单项四</a></li>
</ul>

本例中的CSS代码如下所示。

* { 
    margin: 0; 
    padding: 0;
}
a {
    display: block;
    position: relative;
    padding: 10px 25px 10px 10px;
    border-bottom: 1px solid #D9D9D6;
    background: #FFF;
    color: #0C0;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    margin: -4px 0 0 0;
    border-top: solid 2px #093;
    border-right: solid 2px #093;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

制作右部箭头的关键之处在于使用after伪元素选择器插入一个6px*6px的伪元素,使用border-top样式属性与border-right样式属性制作直角并将其旋转45度。

接下来介绍如何实现具有右向三角形效果的菜单,效果如下所示。

HTML代码同前所述,CSS样式代码如下所示:

* { 
    margin: 0; 
    padding: 0;
}
a {
    display: block;
    position: relative;
    padding: 10px 25px 10px 10px;
    border-bottom: 1px solid #D9D9D6;
    background: #FFF;
    color: #0C0;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    margin: -3px 0 0 0;
    border-top: 8px solid #0c0;
    border-left: 8px solid transparent;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}