20选5走势图:jquery和css3定义的导航菜单 chrome, Safari Fancy menu with CSS3 and jQuery

作者:网络 来源:佚名 更新时间:2011-01-13 19:16:44 点击:

安徽25选5直播 www.by7yj.cn jquery和css3定义的导航菜单 Chrome, Safari Fancy menu with CSS3 and jQuery,Best viewed in a WebKit Browser (Safari and Chrome).

Fancy menu was made popular by devthought, it is develop on top of the Mootools library. And later a jQuery version of this menu called lavalamp was made popular by Ganesh. This time I will show you how to achieve the same effect using the CSS3 new features.

Note: Best viewed in a WebKit Browser (Safari and Chrome). This sample is just to demonstrate the capabilities of the new CSS3 features.

The HTML Markup

 

<div class="lavalamp" >
<ul>
<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="">Back to Article</a></li>

<li><a href="">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

 

As best practice we have to use the list elements for the menu item. The <div class="floatr"></div> is the element we have to animate.

The CSS

The following block of code is used for styling our div with the class of lavalamp. Some of the CSS3 features used to style the element such as border-radius, box-shadow, rgba and gradient.

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
}

 

The CSS code for the menu item.

ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

ul li a {
    padding: 0 20px;
    text-align: center;
    }

 

The CSS code for our floating/animated div element.

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

 

Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. The transition properties are used to animate smoothly from the old state to the new state over time.

Transition property syntax:

transition: property duration timing;

Property specifies the name of the CSS property to which the transition is applied. Duration defines the length of time that a transition takes and timing more like an easing function.

 

The Javascript

The javascript role in this example is to get the current position of the active element and the mouse position when you are hovering our menu and apply the necessary css with corresponding value to our element we are going to animate.

 

 

$(document).ready(function () {

 //get the current position of the active item
    var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
    var dwidth = $('.lavalamp li.active').width() + "px";

    //apply the current position of active item to our floatr element
    $('.floatr').css({
        "left": dleft+"px",
        "width": dwidth
    });

    $('.lavalamp li').hover(function(){

        var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";

        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate
        });

    },

    function(){

        var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).siblings('li.active').width() + "px";

        var sictranslate = "translate("+left+"px, 0px)";

        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate

        });

    }).click(function(){

        $(this).siblings('li').removeClass('active');

        $(this).addClass('active');

        return false;

    });

});

 

Add more variety of colors to our menu.

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-linear-gradient(top,rgb(190,64,120), rgb(177,24,91));
 border: 1px solid #841144;

}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-linear-gradient(top, rgb(64,181,197), rgb(7,165,187));
 border: 1px solid #2f8893;

}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-linear-gradient(top, rgb(255,199,79), rgb(255,188,43));
 border: 1px solid #c08c1f;

}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-linear-gradient(top, rgb(255,133,64), rgb(255,107,24));
 border: 1px solid #c04f11;

}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-linear-gradient(top, rgb(89,89,89), rgb(54,54,54));
 border: 1px solid #272727;

}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

 

Our menu is now ready. See the menu in action or download the code for you to experiment.

  • 点赞!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
  • 6| 111| 160| 223| 586| 682| 893| 557| 936| 466|