安徽25选5投注:漂亮的纯css3定义的导航菜单 Nice Pure CSS3 Slick Menu

作者:网络 来源:佚名 更新时间:2011-01-10 15:53:17 点击:

安徽25选5直播 www.by7yj.cn 漂亮的纯css3定义的导航菜单 Nice Pure CSS3 Slick Menu,firefox3.6运行正常,ie6不支持css3,谨慎使用

In this article we are  trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.

Lets create the html used.

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>

<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>

<li><a href="#">Twitter @insic</a></li>
</ul>
</div>
</div>

 

Now the CSS.

Lets add a gradients using CSS3 gradient property into our wrapper div.

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}

 

The CSS code for the menu item.

ul {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }

ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

ul li a:hover {
    background: transparent none;
}

ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

 

  • 点赞!5名男子冰河接力救人 2个孩子成功获救 2018-12-15
  • 你所说的时候正是四两酒半仙处于姑娘的时候。四两酒半仙说,她俩当年一人一餐饭就要吃一斤半米,你说这亩产够四两酒半仙一年吃吗??[微笑] 2018-12-14
  • 图解2017民政工作成绩单:改革试点全面推进 1.6万留守儿童复学 2018-12-14
  • “四大发明”是什么制? 2018-12-13
  • 在战火中诞生的党中央机关报(连载一) 2018-12-13
  • 陕西守艺人丨传承自父亲的老油坊,是我人生的希望之光 2018-12-12
  • 儿童家具质量抽检三成不合格 家长选购需注意 2018-12-12
  • 学会了脆皮炸香蕉 再也不会把香蕉放到烂啦-美食资讯 2018-12-12
  • 高通出局 未来iPhone modem芯片将完全由英特尔提供 2018-12-11
  • 《中国气候变化蓝皮书》:年平均气温显著上升 2018-12-11
  • 回复@海之宁:其中跟你不对付的小寻子、真理论者都是批咱的主力军也!小海童鞋作何解释? 2018-12-11
  • 偶像玄幻剧陆续定档 悠长暑假荧屏满溢青春气息 2018-12-10
  • 蔡奇主持市委常委会会议 学习总书记对脱贫攻坚工作重要指示 2018-12-10
  • 河北一保时捷车主疑遭枪击 警方悬赏9万元通缉 2018-12-10
  • 端午节 收艾草(组图) 2018-12-09
  • 983| 771| 47| 128| 113| 760| 181| 276| 541| 430|