首页>服务器运维>站长技能提升>CSS3 Admin Menu
回复
« 返回列表
htkxcg
htkxcg
U途骑士
U途骑士
  • UID41348
  • 粉丝1
  • 关注0
  • 发帖数1
  • 铜币12枚
  • 威望12点
  • 贡献0点
写私信
阅读：2600回复：0

[CSS3技术]CSS3 Admin Menu

楼主#
更多 发布于：2014-12-19 05:00
[tr][td]这一个个人信息面板导航效果，整个效果展示的是个人相关信息的菜单项，以及搜索功能。在这个案例中使用的CSS3属性相对较多，有transition做的过渡动画效果、有transform做的3D旋转动画、@font-face实现的icon效果，gradient制作的双色块导航背景。而其中运用的最好的是CSS3的选择器，整个案例中使用了多个CSS3选择器，来控制需要选择的元素，比如说“:not”选择器，“nth-children()“选择器，详细的请看Demo的整个实现过程。

图片：1610322mkhsxcv1n11kmrm.jpg




HTML CODE


结构很简单，就是一个无序列表：



 

     
    [*]Home
     
    [*]
     Search
     
     
     
     

     
    [*]Inbox 2
     
    [*]Add New
     
    [*]Updates 8
     
    [*]Howdy
    Eva.
     






不同之处是，在搜索菜单项中，还有一个下拉结构



 Search
 
 
 
 

 



和平时制作下拉菜单效果的结构略有不同，这个案例中，将整个搜索表单放在了链接标签内。


CSS3 CODE


整个案例的CSS代码并不复杂，只是CSS3的选择器使用的稍为多一些。我们一步一步来看：


body {
 background-color: #d9d9d9;
}
a {
 color: #fff;
}
a:hover {
 color: #fff;
 text-decoration: none;
}
.demo {
 width: 960px;
 margin: 40px auto 0;
}
.menu-function {
 position: relative;
 background-image: -*-linear-gradient(top,#3d3d3d 50%,#373737 51%);/*制作双色块背景图片*/
}
.menu-function li {
 float: left;
 height: 40px;
}
.menu-function li a {
 position: relative;
 display: block;
 padding: 0 20px 0 40px;
 line-height: 40px;
}



这部分代码是用来实现导航的初步布局效果，整个效果之中，使用了gradient渐变属性制作了一个双色块的背景图片：


background-image: -*-linear-gradient(top,#3d3d3d 50%,#373737 51%);



注意，这是从上到下的双色块，第一个色是多0到50%之间，第二个色块是51%到100%之间。


/*设置除最后一个列表项下的所有span元素的样式*/
.menu-function li:not(:last-child) span {
 display: inline-block;
 padding: 0 3px;
 height: 14px;
 line-height: 14px;
 color: #fff;
 border-radius: 2px;/*设置圆角*/
 box-shadow: 0 -1px 0 #6cb6e9,0 1px 0 #24548e;/*设置阴影*/
 background-image: -*-linear-gradient(top,#2b95e0,#2175d7);/*设置渐变背景*/
}
/*设置除最后一个列表项下的所有a元素样式*/
.menu-function li:not(:last-child) a {
 line-height: 20px;
 border-left: 1px solid #222a30;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 transition: all .3s ease-out;/*设置动画过渡效果*/
 transform-style: preserve-3d;/*设置3D旋转遮照面*/
}



这里就有点意思了，意思之处是他的选择器”li:not(:last-child)“,他表示的意思是”选择除最后一个列表项的所有列表项“


/*最后一个列表向右浮动*/
.menu-function li:last-child {
 float: right;
}
/*设置第一个列表项下a元素样式*/
.menu-function li:first-child a {
 font-size: 0;
 padding-left: 25px;
}
/*设置最后一个列表项下img元素样式*/
.menu-function li:last-child img {
 width: 30px;
 height: 30px;
 margin-left: 2px;
 vertical-align: middle;
 box-shadow: 0 -1px 0 rgba(0,0,0,.2);/*设置阴影*/
 border-radius: 2px;/*设置圆角*/
}
/*设置最后一个列表项下span元素样式*/
.menu-function li:last-child span {
 color: #a3c8ea;
}



这几个选择器应该很容易理解，就是第一元素和最后一个元素的伪类选择器。


.menu-function li a:before,
.drop-down button[type="button"]:before {
 position: absolute;
 left: 15px;
 font-family: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 font-smoothing: antialiased;
 font-size: 18px;
 vertical-align: middle;
}
.menu-function li:nth-child(1) a:before {
 content: "21";/*代表首页的icon*/
}
.menu-function li:nth-child(2) a:before,
.drop-down button[type="button"]:before {
 content: "7d";/*代表搜索放大器的icon*/
}
.menu-function li:nth-child(3) a:before {
 content: "63";/*代表评论信息的icon*/
}
.menu-function li:nth-child(4) a:before {
 content: "e022";/*代表google plus的icon*/
}
.menu-function li:nth-child(5) a:before {
 content: "38";/*代表文件夹的icon*/
}



这里是通过伪类”:before“配合@font-face属性制作的字体icon。在这里我们使用了”icomoon“字体，至于这个字体哪来的，我们在前而有整理过，这里不在多说。可能大家会问，代表icon的编号是怎么来的，这个在字体库有一个对照表，可以查询出对应的icon编号，至于这样的编号是怎么来的，说实话我也不清楚，只有设计者知道。另外这里还使用了”nth-child“选择器，来选择不同的列表项下的a元素。当然，使用这个关键之处还有@font-face调用服务器上的字体库：


@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
 url('fonts/icomoon.svg#icomoon') format('svg'),
 url('fonts/icomoon.woff') format('woff'),
 url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}



这个很关键了。没有font-face是无法实现icon的效果。


.menu-function li:not(:last-child) a:hover {
 color: #555;
 border-left: 1px solid transparent;
 background-color: #fff;
}



设置除最后一个列表项下所有a元素的样式，使用的选择器方法前面有介绍过。


/*设置搜索列表项悬浮时下拉搜索表单样式*/
.menu-function li a:hover .drop-down {
 display: block;
 transform: rotateX(0deg);/*X轴旋转odeg*/
}
/*设置下接搜索表单样式*/
.drop-down {
 position: absolute;
 top: 30px;
 left: 0;
 margin-left: -1px;
 width: 300px;
 padding: 20px;
 background-color: #fff;
 transition: all 0.3s ease-in;/*过渡动画效果*/
 transform: rotateX(-90deg);/*X轴旋转-90deg*/
 backface-visibility: hidden;
}
/*设置文本框样式*/
.drop-down input[type="text"] {
 width: 100%;
 height: 30px;
 padding-left: 5px;
 border: 1px solid #ddd;
 border-radius: 2px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;/*设置阴影*/
 background-color: none;
 box-sizing: border-box;/*改变盒模型*/
 transition: all 0.3s ease-in;/*过渡动画效果*/
}
/*设置搜索按钮样式*/
.drop-down button[type="button"] {
 position: absolute;
 top: 22px;
 right: 22px;
 width: 24px;
 height: 26px;
 border: none;
 background-color: transparent;
}
.drop-down button[type="button"]:before {
 font-size: 14px;
 top: 6px;
 left: 6px;
 color: #747474;
}
input[type="text"]:focus{
 outline: 0 none;
 border-color: rgba(82, 168, 236, 0.8);
 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}



整个搜索表单使用了transform、transition、box-shadow等属性制作，其中还使得了属性选择器来控制表单元素的样式。


整个案例的CSS代码：


body {
 background-color: #d9d9d9;
}
a {
 color: #fff;
}
a:hover {
 color: #fff;
 text-decoration: none;
}
.demo {
 width: 960px;
 margin: 40px auto 0;
}
.menu-function {
 position: relative;
 background-image: -*-linear-gradient(top,#3d3d3d 50%,#373737 51%);
}
.menu-function li {
 float: left;
 height: 40px;
}
.menu-function li a {
 position: relative;
 display: block;
 padding: 0 20px 0 40px;
 line-height: 40px;
}
.menu-function li:not(:last-child) span {
 display: inline-block;
 padding: 0 3px;
 height: 14px;
 line-height: 14px;
 color: #fff;
 border-radius: 2px;
 box-shadow: 0 -1px 0 #6cb6e9,0 1px 0 #24548e;
 background-image: -*-linear-gradient(top,#2b95e0,#2175d7);
}
.menu-function li:not(:last-child) a {
 line-height: 20px;
 border-left: 1px solid #222a30;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 transition: all .3s ease-out;
 transform-style: preserve-3d;
}
.menu-function li:last-child {
 float: right;
}
.menu-function li:first-child a {
 font-size: 0;
 padding-left: 25px;
}
.menu-function li:last-child img {
 width: 30px;
 height: 30px;
 margin-left: 2px;
 vertical-align: middle;
 box-shadow: 0 -1px 0 rgba(0,0,0,.2);
 border-radius: 2px;
}
.menu-function li:last-child span {
 color: #a3c8ea;
}
.menu-function li a:before,.drop-down button[type="button"]:before {
 position: absolute;
 left: 15px;
 font-family: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 font-smoothing: antialiased;
 font-size: 18px;
 vertical-align: middle;
}
.menu-function li:nth-child(1) a:before {
 content: "21";
}
.menu-function li:nth-child(2) a:before,.drop-down button[type="button"]:before {
 content: "7d";
}
.menu-function li:nth-child(3) a:before {
 content: "63";
}
.menu-function li:nth-child(4) a:before {
 content: "e022";
}
.menu-function li:nth-child(5) a:before {
 content: "38";
}
.menu-function li:not(:last-child) a:hover {
 color: #555;
 border-left: 1px solid transparent;
 background-color: #fff;
}
.menu-function li a:hover .drop-down {
 display: block;
 transform: rotateX(0deg);
}
.drop-down {
 position: absolute;
 top: 30px;
 left: 0;
 margin-left: -1px;
 width: 300px;
 padding: 20px;
 background-color: #fff;
 transition: all 0.3s ease-in;
 transform: rotateX(-90deg);
 backface-visibility: hidden;
}
.drop-down input[type="text"] {
 width: 100%;
 height: 30px;
 padding-left: 5px;
 border: 1px solid #ddd;
 border-radius: 2px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
 background-color: none;
 box-sizing: border-box;
 transition: all 0.3s ease-in;
}
.drop-down button[type="button"] {
 position: absolute;
 top: 22px;
 right: 22px;
 width: 24px;
 height: 26px;
 border: none;
 background-color: transparent;
}
.drop-down button[type="button"]:before {
 font-size: 14px;
 top: 6px;
 left: 6px;
 color: #747474;
}
input[type="text"]:focus{
 outline: 0 none;
 border-color: rgba(82, 168, 236, 0.8);
 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
 url('fonts/icomoon.svg#icomoon') format('svg'),
 url('fonts/icomoon.woff') format('woff'),
 url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}







演示：http://www.w3cplus.com/demo/css3/adminMenu/index.html


下载：adminMenu.zip


[/td][/tr]
喜欢11 评分0
回复
游客
关于UPUPW帮助中心技术问答手机浏览相关链接

©2013-2023 UPUPW绿色服务器平台 保留所有权利. 官方唯一网址UPUPW.NET 请勿用此环境运行非法站点，UPUPW不承担相关责任！ [京] ICP备07028424号-2

UPUPW ANK V1.1.8正式版驱动 - 页面执行时间0.04141秒

返回顶部