jQuery UI导航菜单按钮特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI导航菜单按钮特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title>jQuery UI导航菜单按钮</title>
    <link rel='stylesheet' type='text/css' href='css/style.css' />
    <link rel="stylesheet" href="css/font-stylesheet.css" type="text/css" charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
    <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    <![endif]-->
    <link rel='stylesheet' type='text/css' href='css/jquery-ui.css' />
    <script type='text/javascript' src='js/jquery.min.js'></script>
    <script type='text/javascript' src='js/jquery-ui.min.js'></script>
    <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>


</head>

<body>
    <script src="js/plugins.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#showSimpleModal").click(function () {
                $("#pop-up-modal").fadeIn();
                return false;
            });
        });
    </script>
    <div id="main-container">

        <div class="header-text">
            <div id="logo"><a href="http://www.baidu.com/"><span class="displace">Live Tools</span></a></div>
        </div>

    </div><div class="clear"></div>




    <div id="bg-split">

        <div id="main-container">

            <div id="tool-menu-pane">

                <div id="tool-buttonbuilder-button" class="tool-button"><a href="http://www.baidu.com/"><span class="displace">Button Builder App</span></a><h3>Button Builder</h3></div>

                <div id="tool-formbuilder-button" class="tool-button"><a href="http://www.baidu.com/"><span class="displace">Form Builder App</span></a><h3>Form Builder</h3></div>

                <div id="tool-iconbuilder-button" class="tool-button"><a href="http://www.baidu.com/"><span class="displace">Icon Builder App</span></a><h3>Icon Builder</h3></div>

                <div id="tool-ribbonbuilder-button" class="tool-button"><a href="http://www.baidu.com/"><span class="displace">Ribbon Builder App</span></a><h3>Ribbon Builder</h3></div>
            </div>

        </div>

    </div><div class="clear"></div>




    <div id="main-container">

        <div class="footer-container">

            <div class="footer-info">
                <a href="#" id="showSimpleModal" title="Information"><span class="displace">Information</span></a>
            </div>

        </div>

    </div>
    <!--Video Modal-->
    <div id="pop-up-modal" class="modal">
        <div id="pop-up-modal-container">
            <div id="modal-bg">
                <div id="close-button"><a href="index.html" id="closeSimple"><span class="displace">Close</span></a></div>
                <div class="clear"></div>
                <div class="modal-info-container">

                    <h1>About<span class="red-dot">.</span></h1>
                    <div class="faq-question"> Live Tools are a collection of free online design apps that allow you to easily create your own ui elements with very little coding knowledge. As well as being able to create custom elements, you can also download your creations for use in your websites and online applications.</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(plugins.js):

window.log = function f(){
	log.history = log.history || [];
	log.history.push(arguments);
	if(this.console){
	var args = arguments,newarr;
	args.callee = args.callee.caller;
	newarr = [].slice.call(args);
	if (typeof console.log === 'object') log.apply.call(console.log,console,newarr);
	else console.log.apply(console,newarr);
}
}
;
	(function(a){
	function b(){
}
for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;
	!!(d=c.pop());
	){
	a[d]=a[d]||b;
}
}
)(function(){
	try{
	console.log();
	return window.console;
}
catch(a){
	return (window.console={
}
);
}
}
());

CSS代码(retina.css):

@charset "UTF-8";/* CSS Document */
#logo a{background:url(images/livetools-logo@2x.png) no-repeat top left;background-size:168px 300px;}
#tool-formbuilder-button a{background:url(images/form-btn@2x.png) no-repeat top left;background-size:312px 156px;}
#tool-formbuilder-button a:hover{background:url(images/form-btn@2x.png) no-repeat top right;background-size:312px 156px;}
#tool-buttonbuilder-button a{background:url(images/buttonbuilder-btn@2x.png) no-repeat top left;background-size:312px 156px;}
#tool-buttonbuilder-button a:hover{background:url(images/buttonbuilder-btn@2x.png) no-repeat top right;background-size:312px 156px;}
#tool-ribbonbuilder-button a{background:url(images/ribbon-btn@2x.png) no-repeat top left;background-size:312px 156px;}
#tool-ribbonbuilder-button a:hover{background:url(images/ribbon-btn@2x.png) no-repeat top right;background-size:312px 156px;}
#tool-iconbuilder-button a{background:url(images/iconbuilder-btn@2x.png) no-repeat top left;background-size:312px 156px;}
#tool-iconbuilder-button a:hover{background:url(images/iconbuilder-btn@2x.png) no-repeat top right;background-size:312px 156px;}
.footer-info a{background:url(images/info-btn@2x.gif) no-repeat top left;background-size:100px 51px;}
.footer-info a:hover{background:url(images/info-btn@2x.gif) no-repeat top right;background-size:100px 51px;}

CSS代码(style.css):

/* LiveTools Home by Norm - uiparade http://uiparade.com*/
*{margin:0;padding:0;}
body{font:14px 'Helvetica Neue',Helvetica,sans-serif;background:#e1e1e1;color:#858585;-moz-box-shadow:inset 0px 1px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px #ffffff;box-shadow:inset 0px 1px 0px #ffffff;}
body,html{height:100%;}
a{color:#f15755;text-decoration:none;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-o-transition:color .2s linear;-ms-transition:color .2s linear;transition:color .2s linear;}
ul{list-style:none;}
p{margin:15px 0;}
h1{color:#505b65;font-family:'MuseoSlab500';font-size:20px;margin:0 0 20px 0;font-weight:bold;}
h2{font-size:16px;margin:0;text-align:center;text-shadow:0 1px 0 #fff;font-weight:200;}
.clear{clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}
.displace{position:absolute;left:-5000px;}
.red-dot{color:#d13232;font-size:20px;}
#main-container{width:814px;margin:0 auto;}
#bg-split{width:100%;height:246px;border-top:1px solid #c5c5c5;border-bottom:1px solid #c5c5c5;-moz-box-shadow:0px 1px 0px #f6f6f6,inset 0px 1px 0px #f6f6f6;-webkit-box-shadow:0px 1px 0px #f6f6f6,inset 0px 1px 0px #f6f6f6;box-shadow:0px 1px 0px #f6f6f6,inset 0px 1px 0px #f6f6f6;}
/* Header Note -------------- */
#logo a{background:url(images/livetools-logo.png) no-repeat top left;display:block;text-decoration:none;height:300px;width:168px;border:0px;margin:0 auto 0 auto;}
.tool-title{float:left;margin:10px 0 0 5px;color:#505b65;text-shadow:0 1px 0 #fff;}
.tool-title h1{font-weight:200;font-size:25px;}
.header-text{width:814px;height:300px;float:left;font-size:16px;text-shadow:0 1px 0 #fff;text-align:center;margin:0 0 50px 0;}
/* Main Controls -------------- */
#tool-menu-pane{width:814px;height:145px;margin:7px 0;float:left;}
#tool-menu-pane h3{font-size:14px;font-weight:200;color:#929292;text-shadow:0 1px 0 #f6f6f6;text-align:center;padding:0;margin:18px 0 0 0;}
#controls{width:200px;padding:10px 20px 10px 20px;float:left;margin-right:20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:0px 1px 1px #a5a4a6;-webkit-box-shadow:0px 1px 1px #a5a4a6;box-shadow:0px 1px 1px #a5a4a6;background:#fdfdfd;background:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#f0f2f4));background:-webkit-linear-gradient(top,#fdfdfd,#f0f2f4);background:-moz-linear-gradient(top,#fdfdfd,#f0f2f4);background:-ms-linear-gradient(top,#fdfdfd,#f0f2f4);background:-o-linear-gradient(top,#fdfdfd,#f0f2f4);}
.tool-button{float:left;margin:23px 0 0 38px;text-align:center;width:156px;}
#tool-formbuilder-button a{display:block;text-decoration:none;background:url(images/form-btn.png) no-repeat top left;height:156px;width:156px;border:0px;margin:0 0 0 0;}
#tool-formbuilder-button a:hover{background:url(images/form-btn.png) no-repeat top right;}
#tool-buttonbuilder-button a{display:block;text-decoration:none;background:url(images/buttonbuilder-btn.png) no-repeat top left;height:156px;width:156px;border:0px;margin:0 0 0 0;}
#tool-buttonbuilder-button a:hover{background:url(images/buttonbuilder-btn.png) no-repeat top right;}
#tool-ribbonbuilder-button a{display:block;text-decoration:none;background:url(images/ribbon-btn.png) no-repeat top left;height:156px;width:156px;border:0px;margin:0 0 0 0;text-align:center;}
#tool-ribbonbuilder-button a:hover{background:url(images/ribbon-btn.png) no-repeat top right;}
#tool-iconbuilder-button a{display:block;text-decoration:none;background:url(images/iconbuilder-btn.png) no-repeat top left;height:156px;width:156px;border:0px;margin:0 0 0 0;text-align:center;}
#tool-iconbuilder-button a:hover{background:url(images/iconbuilder-btn.png) no-repeat top right;}
/* Footer -------------- */
.footer-container{margin:40px 0 0 0;width:814px;height:40px;vertical-align:central;text-align:center;}
.footer-info{width:51px;margin:12px auto 0 auto;font-size:16px;text-shadow:0 1px 0 #fff;text-align:center;}
.footer-info a{display:block;text-decoration:none;background:url(images/info-btn.gif) no-repeat top left;height:51px;width:50px;border:0px;margin:0 0 0 0;}
.footer-info a:hover{background:url(images/info-btn.gif) no-repeat top right;}
/*-----------------------------------------------------------------------------------*/
/*Modal popup/*-----------------------------------------------------------------------------------*/
.modal-info-container{margin:10px 20px 30px 20px;}
.question-container{margin:10px 10px 10px 10px;}
.faq-question{margin:0 0 40px 0;}
.modal-twitter{border-top:1px solid #e7e7e7;padding-top:10px;width:100%;text-align:center;}
#pop-up-modal{font-weight:200;width:100%;height:100%;left:0px;top:0px;right:0px;bottom:0px;position:fixed;background:url(images/overlay_bg.png) repeat;z-index:5;display:none;}
#pop-up-modal-container{width:580px;height:230px;padding:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:15% auto 0 auto;background:url(images/overlay_inner_bg.png) repeat;}
#modal-bg{background:#fcfcfc;height:100%;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:relative;}
#close-button{float:right;}
#close-button a{display:block;text-decoration:none;background:url(images/close-icon.gif) no-repeat top left;height:20px;width:20px;border:0px;margin:10px 10px 0 0;}
#close-button a:hover{display:block;text-decoration:none;background:url(images/close-icon.gif) no-repeat top right;height:20px;width:20px;border:0px;margin:10px 10px 0 0;}

附件:下载该文件资源,减少时间成本(增值服务)