jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼
更新時(shí)間：2015年08月27日 16:01:20 作者：企鵝
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼。分享給大家供大家參考。具體如下：
這里演示了三種背景顏色左右滑動(dòng)jquery菜單導(dǎo)航效果，IE下有問(wèn)題，本菜單使用了CSS3的部分屬性，因此建議使用火狐或Chrome等瀏覽器獲取最佳效果。當(dāng)把鼠標(biāo)移到菜單上的時(shí)候，對(duì)應(yīng)菜單項(xiàng)的背景會(huì)變化，而且本菜單具有圓角的效果。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/
具體代碼如下：
<!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>三種背景顏色左右滑動(dòng)菜單導(dǎo)航</title>
<style>
.webwidget_menu_glide{
padding: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
border-radius-topright: 10px;
border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
border-radius-bottomright: 10px;
border-radius-bottomleft: 10px;
border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
width: 100px;
height: 20px;
background-color: fuchsia;
position: absolute;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
border-radius-topright: 10px;
border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
border-radius-bottomright: 10px;
border-radius-bottomleft: 10px;
border-radius:10px;
}
.webwidget_menu_glide ul{
padding: 0px;
margin: 0px;
font-family:Arial;
}
.webwidget_menu_glide ul li{
float: left;
list-style: none;
position: relative;
text-align: center;
margin-right: 10px;
width: 100px;
}
.webwidget_menu_glide ul li a{
color: black;
text-decoration: none;
font-weight: bold;
}
.webwidget_menu_glide ul li ul{
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-khtml-border-radius-bottomright: 7px;
-khtml-border-radius-bottomleft: 7px;
border-radius-bottomright: 7px;
border-radius-bottomleft: 7px;
border-radius:7px;
padding-bottom: 5px;
position: absolute;
z-index: 999999;
display: none;
}
.webwidget_menu_glide ul li ul li{
-moz-border-radius-topright: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-khtml-border-radius-topright: 0px;
-khtml-border-radius-topleft: 0px;
border-radius-topright: 0px;
border-radius-topleft: 0px;
border-radius:0px;
margin: 0px;
float: none;
border:none;
word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
padding-left: 5px;
padding-right: 5px;
font-weight: normal;
}
</style>
</link>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function(a){
a.fn.webwidget_menu_glide=function(p){
var p=p||{};
var f=p&&p.menu_text_size?p.menu_text_size:"12px";
var g=p&&p.menu_text_color?p.menu_text_color:"blue";
var h=p&&p.menu_margin?p.menu_margin:"10px";
var i=p&&p.menu_width?p.menu_width:"100px";
var j=p&&p.menu_height?p.menu_height:"20px";
var k=p&&p.menu_sprite_color?p.menu_sprite_color:"red";
var l=p&&p.menu_background_color?p.menu_background_color:"black";
var m=p&&p.sprite_speed?p.sprite_speed:"fast";
f += "px";
h += "px";
i += "px";
j += "px";
var n=a(this);
if(n.children("ul").length==0||n.find("li").length==0){
n.append("Require menu content");
return null
}
s_m(n.children("ul").children("li"),h,i,j);
s_m_t_c(n.find("a"),g,j,f);
n.css("background-color",l);
if(n.children("ul").children("li").is(".current")){
var o=n.children("ul").children("li").filter(".current").offset()
}else{
var o=n.children("ul").children("li:first").offset()
}
var q=o.left+'px';
s_m_s_c(n.find(".webwidget_menu_glide_sprite"),k,i,j,q);
n.children("ul").children("li").hover(function(){
var b=$(this).offset();
var c=b.left+'px';
n.find(".webwidget_menu_glide_sprite").stop().animate({
left:c
},m)
},function(){
n.find(".webwidget_menu_glide_sprite").stop().animate({
left:q
},m)
});
n.children("ul").children("li").children("ul").children("li").hover(function(){},function(){});
function s_m_t_c(a,b,c,d){
a.css("color",b);
a.css("line-height",c);
a.css("font-size",d)
}
function s_m(a,b,c,d){
style="margin-right:"+b+"; width: "+c+"; height: "+d+";";
a.attr("style",style)
}
function s_m_s_c(a,b,c,d,e){
a.css("background-color",b);
a.css("width",c);
a.css("height",d);
a.css("left",e)
}
}
})(jQuery);
</script>
</head>
<body>
<table width="600">
<tr>
<td><h2>Demo1</h2>
<br/>
<br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide1").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide1" });
});
</script>
<div id="webwidget_menu_glide1" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="current"><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">More...</a></li>
</ul>
<div style="clear: both"></div>
</div></td>
</tr>
<tr>
<td><h2>Demo2</h2>
<br/>
<br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide2").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#CCC", menu_sprite_color:"#666", menu_background_color:"#000", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide2" });
});
</script>
<div id="webwidget_menu_glide2" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="current"><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">More...</a></li>
</ul>
<div style="clear: both"></div>
</div></td>
</tr>
<tr>
<td><h2>Demo3</h2>
<br/>
<br/>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide3").webwidget_menu_glide({menu_width:"100", menu_height:"23", menu_text_size:"12", menu_text_color:"#FFF", menu_sprite_color:"#86C7EF", menu_background_color:"#0F67A1", menu_margin:"2", sprite_speed:"normal", container:"webwidget_menu_glide3" });
});
</script>
<div id="webwidget_menu_glide3" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="current"><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">More...</a></li>
</ul>
<div style="clear: both"></div>
</div></td>
</tr>
</table>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
- Jquery帶搜索框的下拉菜單
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- jQuery點(diǎn)擊彈出下拉菜單的小例子
- jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開(kāi)的菜單效果代碼
- 用jquery寫(xiě)的菜單從左往右滑動(dòng)出現(xiàn)
- 基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼
- jquery插件實(shí)現(xiàn)堆疊式菜單
相關(guān)文章
下面小編就為大家?guī)?lái)一篇使用jQuery和ajax代替iframe的方法(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Jquery通過(guò)JSON字符串創(chuàng)建JSON對(duì)象
這篇文章主要介紹了Jquery如何通過(guò)JSON字符串創(chuàng)建JSON對(duì)象,并附詳細(xì)示例，需要的朋友可以參考下2014-08-08
jQuery插件 tabBox實(shí)現(xiàn)代碼
最近對(duì)js以及jq產(chǎn)生了濃厚的興趣，看到j(luò)q有很多很好用的插件，功能各異，包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。2010-02-02
JQuery 1.6發(fā)布 性能提升，同時(shí)包含大量破壞性變更
JQuery 1.6剛剛發(fā)布了，有幾處性能和跨瀏覽器兼容性的改進(jìn)，專(zhuān)門(mén)重寫(xiě)了屬性模塊2011-05-05
Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西2012-07-07
jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JQuery fileupload插件實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了JQuery fileupload插件實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2016-03-03
很多人可能都會(huì)遇到在調(diào)試的時(shí)候用了return了false，可為什么還會(huì)提交呢？這個(gè)問(wèn)題我最近也碰到了，嘗試了多次也沒(méi)有用，后來(lái)終于發(fā)現(xiàn)了其中的問(wèn)題，下面分享處理給大家，讓同樣遇到這個(gè)問(wèn)題的朋友們能夠看看，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
jquery+html5爛漫愛(ài)心表白動(dòng)畫(huà)代碼分享
這篇文章主要介紹了jquery+html5爛漫愛(ài)心表白動(dòng)畫(huà)，七夕你表白了嗎，如果還沒(méi)有的話，抓緊來(lái)學(xué)習(xí)學(xué)習(xí)吧，祝小伙伴們表白成功。2015-08-08