安徽11选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%);
}

 

  • 紫光阁中共中央国家机关工作委员会 2019-02-20
  • 凤凰网之夜X戛纳电影节-群星闪耀版 2019-02-19
  • 办婚礼、不打烊 新招频出能否让实体书店“回暖”? 2019-02-19
  • 【视频】致敬父亲节—父爱如山 一路相伴 2019-02-19
  • 孙东生会见俄罗斯代表团 2019-02-18
  • 江西日报社社长王晖祝贺人民日报创刊70周年 2019-02-18
  • 女排小鬼当家大逆转德国队 安家杰带队三人发挥惊艳 2019-02-18
  • 第531期:大豆异黄酮对人体有5大好处 什么食物含量多? 2019-02-18
  • 烽火中国—光明日报、光明网纪念抗战胜利70周年特别策划 2019-02-17
  • 世卫将“游戏障碍”列为新疾病 哪些症状可被确诊? 2019-02-17
  • 全媒体传播:半岛都市报融合转型的关键词 2019-02-17
  • 瞩望上海合作组织青岛之约(钟声) 2019-02-16
  • 郑州市中医院院长、党委副书记刘宝琴被查 2019-02-16
  • 抗战期间陕甘宁边区的人口 2019-02-15
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-02-15
  • 808| 790| 727| 931| 788| 671| 348| 344| 35| 30|