jquery菜单插件jGlideMenu特效代码

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

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

以下是 jquery菜单插件jGlideMenu特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<?xml version="1.0" encoding="gb2312" ?>
<!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" xml:lang="en-us">
<head>
    <title>jquery菜单插件jGlideMenu</title>
    <style type="text/css">
        body {
            font-family: verdana, arial, sans-serif;
            color: #535353;
            font-size: .62em;
            background: #f3f8f0;
        }

        #launch {
            font-family: tahoma,sans-serif;
        }

        a#launch {
            text-decoration: none;
            color: #535353;
        }

        a#launch:HOVER {
            text-decoration: underline;
            color: #f90;
        }

        .ifM_header {
            cursor: Move;
        }

        #overview a {
            color: darkgreen;
            text-decoration: none;
        }

        #overview a:HOVER {
            color: #f90;
        }

        #jGlide_001 {
            top: 100px;
            left: 10px;
            display: none; /* Hide Menu Until Ready(Optional) */
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/jGlideMenu.css" />
    <!-- Current Release of jQuery - at time of build -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- Remove the following line to disabled dragging-dropping / Also Edit CSS to Remove cursor:move from .jGM_header -->
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jQuery.jGlideMenu.067.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize Menu
            $('#jGlide_001').jGlideMenu({
                tileSource: '.jGlide_001_tiles',
                demoMode: true
            }).show();

            // Connect "Toggle" Link
            $('#switch').click(function () { $(this).jGlideMenuToggle(); });
        });
    </script>
</head>
<body>

    <!-- Menu Holder -->
    <div class="jGM_box" id="jGlide_001">

        This is Example One

        <!-- Tiles for Menu -->
        <ul id="tile_001" class="jGlide_001_tiles" title="Tile One" alt="Description for tile number one">
            <li rel="tile_002">Link One</li>
            <li rel="tile_003">Link Two</li>
            <li rel="tile_004">Link Three</li>
            <li><a href="#">Link to baidu 1</a></li>
            <li><a href="#">Link to baidu 2</a></li>
            <li><a href="#">Link to baidu 3</a></li>
            <li><a href="#">Link to baidu 4</a></li>
            <li><a href="#">Link to baidu 5</a></li>
            <li><a href="#">Link to baidu 6</a></li>
            <li><a href="#">Link to baidu 7</a></li>
            <li><a href="#">Link to baidu 8</a></li>
        </ul>
        <ul id="tile_002" class="jGlide_001_tiles" title="Tile Two" alt="Another Tile in This Example">
            <li rel="tile_005">Click Here</li>
            <li><a href="#">Link to Google</a></li>
        </ul>
        <ul id="tile_003" class="jGlide_001_tiles" title="Tile Three" alt="Third Tile is loaded up">
            <li><a href="#">Link to Google</a></li>
        </ul>
        <ul id="tile_004" class="jGlide_001_tiles" title="Search Engines" alt="Find your favorite search engine">
            <li><a href="#">Link to Google</a></li>
            <li><a href="#">Link to Yahoo!</a></li>
            <li><a href="#">Link to Ask.com</a></li>
        </ul>
        <ul id="tile_005" class="jGlide_001_tiles" title="Tile Five" alt="Active Spot Light Link">
            <li><a href="#">Link to ASL</a></li>
        </ul>
        <!-- Tiles for Menu -->
    </div>
</body>
</html>

JS代码(jQuery.jGlideMenu.067.min.js):

jQuery.jGlideMenu={
	useDropShadow:new Boolean(),useDragDrop:new Boolean(),defaultScrollSpeed:new Number(0),defaultScrollBackSpeed:new Number(0),slideRight:new Boolean(),useSmoothScrolling:new Boolean(),easeFx:new String(''),closeLinkMarkUp:new String(''),menuShowFx:new String(''),menuHideFx:new String(''),tileWidth:new Number(0),tileInset:new Number(0),itemsToDisplay:new Number(8),useTileURL:new Boolean(),tileSource:new String(''),URLParams:new Object(),loadImage:new String(''),loadImageStyle:new Object(),initialTile:new String(''),alertOnError:new Boolean(),captureLinks:new Boolean(),imagePath:new String(),tileCount:new Number(0),animation:new Boolean(),helperImage:new Boolean(),currentElement:new Object(),currentElementID:new String(''),hasDragDropSupport:new Boolean(),hasShadowSupport:new Boolean(),displayToggle:new Boolean(),tileScrollPosition:new Array(),smoothScrollTimer:new Array(),mouseHover:new Boolean(),demoMode:new Boolean(),initialize:function(o){
	return this.each(function(){
	jQuery.jGlideMenu.animation=false;
	jQuery.jGlideMenu.helperImage=false;
	jQuery.jGlideMenu.hasDragDropSupport=false;
	jQuery.jGlideMenu.hasShadowSupport=false;
	jQuery.jGlideMenu.tileCount=0;
	jQuery.jGlideMenu.displayToggle=false;
	jQuery.jGlideMenu.mouseHover=false;
	jQuery.jGlideMenu.demoMode=false;
	jQuery.jGlideMenu.currentElement=jQuery(this);
	if(this.id)jQuery.jGlideMenu.currentElementID=this.id;
	var s={
	itemsToDisplay:8,tileInset:7,tileWidth:227,useDropShadow:false,slideRight:true,useDragDrop:true,useSmoothScrolling:true,useTileURL:false,defaultScrollSpeed:750,defaultScrollBackSpeed:800,tileSource:'myTiles',URLParams:{
}
,closeLinkMarkUp:'Close',menuShowFx:'fadeIn',menuHideFx:'fadeOut',easeFx:'linear',loadImage:'img/ajax.gif',initialTile:'tile_001',alertOnError:false,captureLinks:true,loadImageStyle:{
	'position':'absolute','bottom':'10px','left':'10px','z-index':'999'}
,imagePath:'img/',demoMode:false}
;
	if(o)jQuery.extend(s,o);
	jQuery.jGlideMenu.checkFeatures();
	if(s.closeLinkMarkUp.length<1)s.closeLinkMarkUp='x Close';
	if(parseInt(s.itemsToDisplay)<1)s.itemsToDisplay=1;
	if(s.initialTile.length<0)jQuery.jGlideMenu.errorTrap('Invalid Configuration');
	for(i in s)jQuery.jGlideMenu[i]=s[i];
	if(jQuery.jGlideMenu.useTileURL==false&&jQuery.jGlideMenu.tileSource.length>0){
	jQuery(jQuery.jGlideMenu.tileSource).css('display','none');
	jQuery(jQuery.jGlideMenu.currentElement).children().not(jQuery.jGlideMenu.tileSource).remove();
}
else jQuery(jQuery.jGlideMenu.currentElement).html('');
	jQuery(jQuery.jGlideMenu.currentElement).append('<div class="jGM_header"><a href="#">'+jQuery.jGlideMenu.closeLinkMarkUp+'</a></div>').append('<div class="jGM_wrapper" id="jGM_wrapper_'+this.id+'"></div>');
	var img=document.createElement('img');
	img.src=jQuery.jGlideMenu.loadImage;
	img.style.display='none';
	img.id='jGM_helper'+jQuery.jGlideMenu.currentElementID;
	jQuery(jQuery.jGlideMenu.currentElement).append(img);
	jQuery('img#'+img.id).css(jQuery.jGlideMenu.loadImageStyle);
	jQuery.jGlideMenu.helperImage=true;
	if(jQuery.jGlideMenu.hasDragDropSupport==true&&jQuery.jGlideMenu.useDragDrop==true){
	if(jQuery.isFunction(jQuery('body').Draggable))jQuery(this).Draggable({
	handle:'.jGM_header'}
);
	elsejQuery(this).draggable({
	handle:'.jGM_header'}
);
}
if(jQuery.jGlideMenu.hasShadowSupport==true&&jQuery.jGlideMenu.useDropShadow==true){
	if(jQuery.isFunction(jQuery('body').dropShadow))jQuery(this).dropShadow();
	elsejQuery(this).shadow({
	color:'#cccccc'}
);
}
jQuery(jQuery.jGlideMenu.currentElement).find('div.jGM_header a').bind('click',function(){
	if(jQuery.jGlideMenu.displayToggle==true)return false;
	jQuery.jGlideMenu.toggleDisplay(true);
	return false;
}
);
	jQuery(this).hover(function(){
	jQuery.jGlideMenu.mouseHover=true;
}
,function(){
	jQuery.jGlideMenu.mouseHover=false;
}
);
	jQuery(document).keydown(function(e){
	return false;
	var key=e.charCode?e.charCode:e.keyCode?e.keyCode:0;
	if(key==32&&jQuery.jGlideMenu.mouseHover==false){
	jQuery.jGlideMenu.toggleDisplay();
	return;
}
if(jQuery.jGlideMenu.mouseHover==false)return false;
	switch(key){
	case 37:break;
	case 38:break;
	case 39:break;
	case 40:break;
	case 13:break;
	case 32:jQuery.jGlideMenu.toggleDisplay();
	return;
	break;
}
}
);
	jQuery.jGlideMenu.loadTile(jQuery.jGlideMenu.initialTile,jQuery.jGlideMenu.URLParams);
}
);
}
,toggleDisplay:function(r){
	jQuery.jGlideMenu.displayToggle=true;
	jQuery.jGlideMenu.mouseHover==false;
	if(jQuery(jQuery.jGlideMenu.currentElement).css('display')=='block')var toggle_value=0;
	elsevar toggle_value=1;
	jQuery(jQuery.jGlideMenu.currentElement).animate({
	opacity:toggle_value}
,'slow',function(){
	if(r==true){
	jQuery.jGlideMenu.scrollToTile(0,jQuery.jGlideMenu.defaultScrollBackSpeed);
	jQuery.jGlideMenu.tileScrollPosition[0]=0;
}
if(toggle_value>0)jQuery(this).css('display','block');
	elsejQuery(this).css('display','none');
	jQuery.jGlideMenu.displayToggle=false;
}
);
}
,checkFeatures:function(){
	jQuery.jGlideMenu.hasDragDropSupport=jQuery.isFunction(jQuery('body').Draggable);
	if(jQuery.jGlideMenu.hasDragDropSupport==false)jQuery.jGlideMenu.hasDragDropSupport=jQuery.isFunction(jQuery('body').draggable);
	jQuery.jGlideMenu.hasShadowSupport=jQuery.isFunction(jQuery('body').dropShadow);
	if(jQuery.jGlideMenu.hasShadowSupport==false)jQuery.jGlideMenu.hasShadowSupport=jQuery.isFunction(jQuery('body').shadow);
	return;
}
,parseURL:function(u){
	if(!$.browser.msie){
	return u;
}
if(u.indexOf('#tile_')<0){
	return u;
}
var bits=u.split('#');
	return'#'+bits[(bits.length-1)];
}
,countTiles:function(){
	jQuery.jGlideMenu.tileCount=parseInt(jQuery('div.jGM_tile').size());
}
,loadTile:function(u,p){
	var ptr=document.createElement('div');
	var ctr=jQuery.jGlideMenu.tileCount+1;
	ptr.id='jGM_tile_'+jQuery.jGlideMenu.currentElementID+'_'+ctr;
	if(jQuery.jGlideMenu.slideRight==true)var off=jQuery.jGlideMenu.tileWidth*jQuery.jGlideMenu.tileCount+jQuery.jGlideMenu.tileInset;
	elsevar off=jQuery.jGlideMenu.tileWidth*jQuery.jGlideMenu.tileCount*-1+jQuery.jGlideMenu.tileInset;
	jQuery('#jGM_wrapper_'+jQuery.jGlideMenu.currentElementID).append(ptr);
	jQuery('#'+ptr.id).addClass('jGM_tile').css({
	top:0,left:off+'px',height:'288px',width:'213px',position:'absolute',overflow:'hidden',margin:0,padding:0,border:0,display:'block'}
);
	var tmpl='<div style="height:100%;
	margin:0;
	border:0;
	width:100%;
	padding:0;
	text-align:center;
	">'+'<h3>Missing Tile</h3><p>Unable to locate the requested Tile</p></div>';
	if(jQuery.jGlideMenu.useTileURL==false){
	if(jQuery('ul#'+u).size()<1){
	jQuery.jGlideMenu.errorTrap('Invalid Tile Request');
	return false;
}
var title=jQuery('ul#'+u).attr('title');
	var desc=jQuery('ul#'+u).attr('alt');
	var items=jQuery('ul#'+u+' li').size();
	var links=[];
	jQuery('ul#'+u+' li').each(function(){
	if(jQuery('a',this).size()>0)links[links.length]=[jQuery('a',this).attr('href'),jQuery('a',this).text(),1];
	elselinks[links.length]=[jQuery(this).attr('rel'),jQuery(this).text(),0];
}
);
	var tmpl=jQuery.jGlideMenu.buildTile(title,desc,links);
}
else{
	if(jQuery.jGlideMenu.tileSource.length<1){
	jQuery.jGlideMenu.errorTrap('Invalid AJAX Request');
	return false;
}
var mon='img#jGM_helper'+jQuery.jGlideMenu.currentElementID;
	jQuery(mon).ajaxStart(function(){
	jQuery(this).animate({
	opacity:'show'}
,'fast');
}
).ajaxStop(function(){
	jQuery(this).animate({
	opacity:'hide'}
,'slow');
}
);
	p.tile=u;
	jQuery.ajax({
	type:"POST",url:jQuery.jGlideMenu.tileSource,data:p,async:false,success:function(xhtml){
	jQuery('body').append('<div id="jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+'" style="display:none;
	">'+xhtml+'</div>');
	if(jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u).size()<1){
	jQuery.jGlideMenu.errorTrap('AJAX:Invalid Tile Request');
	return false;
}
var title=jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u).attr('title');
	var desc=jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u).attr('alt');
	var items=jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u+' li').size();
	var links=[];
	jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u+' li').each(function(){
	if(jQuery('a',this).size()>0)links[links.length]=[jQuery('a',this).attr('href'),jQuery('a',this).text(),1];
	elselinks[links.length]=[jQuery(this).attr('rel'),jQuery(this).text(),0];
}
);
	jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile).remove();
	tmpl=jQuery.jGlideMenu.buildTile(title,desc,links);
	jQuery(mon).ajaxStart(function(){
}
).ajaxStop(function(){
}
);
}
,error:function(rslt){
	jQuery.jGlideMenu.errorTrap('Invalid AJAX Tile Request');
	jQuery(mon).ajaxStart(function(){
}
).ajaxStop(function(){
}
);
}
}
);
}
jQuery('#'+ptr.id).html(tmpl);
	jQuery('#'+ptr.id+' div.jGM_content a').bind('click',function(){
	var target='';
	target=jQuery.jGlideMenu.parseURL(jQuery(this).attr('href'));
	if(target.length<1){
	return false;
}
if(target.substr(0,1)=='#'){
	if(jQuery.jGlideMenu.animation==true)return false;
	var dest=target.substr(1,target.length-1);
	jQuery.jGlideMenu.loadTile(dest,jQuery.jGlideMenu.URLParams);
	return false;
}
else{
	if(jQuery.jGlideMenu.demoMode){
	alert('Navigation Requestion:'+target);
}
else{
	window.location.href=target;
}
if(jQuery.jGlideMenu.captureLinks==true)return false;
}
return true;
}
);
	jQuery.jGlideMenu.countTiles();
	if(jQuery.jGlideMenu.tileCount>1){
	jQuery('#'+ptr.id).append('<div class="jGM_back"><a href="#">&laquo;
	Back</a></div>');
	jQuery('#'+ptr.id+' div.jGM_back').bind('click',function(){
	if(jQuery.jGlideMenu.animation==true)return false;
	jQuery.jGlideMenu.scrollToTile((ctr-1),jQuery.jGlideMenu.defaultScrollBackSpeed);
	return false;
}
);
	if(jQuery.jGlideMenu.tileCount>2){
	jQuery('#'+ptr.id).append('<div class="jGM_reset"><a href="#">&laquo;
	Home</a></div>');
	jQuery('#'+ptr.id+' div.jGM_reset').bind('click',function(){
	if(jQuery.jGlideMenu.animation==true)return false;
	jQuery.jGlideMenu.scrollToTile(1,jQuery.jGlideMenu.defaultScrollBackSpeed);
	return false;
}
);
}
}
jQuery.jGlideMenu.tileScrollPosition[ctr]=0;
	jQuery.jGlideMenu.drawPagers(ptr.id,jQuery('#'+ptr.id+' .jGM_content a').size());
	if(jQuery.jGlideMenu.useSmoothScrolling==false){
	jQuery('#'+ptr.id+' .jGM_pager a').click(function(){
	var dir=1;
	if(jQuery(this).attr('rel')=='Up')dir=0;
	jQuery.jGlideMenu.scrollItems(dir);
}
);
}
else{
	jQuery('#'+ptr.id+' .jGM_pager a').hover(function(){
	var dir=1;
	if(jQuery(this).attr('rel')=='Up')dir=0;
	jQuery.jGlideMenu.smoothScrollTimer[jQuery.jGlideMenu.tileCount]=window.setInterval('jQuery.jGlideMenu.scrollItems('+dir+')',250);
}
,function(){
	window.clearInterval(jQuery.jGlideMenu.smoothScrollTimer[jQuery.jGlideMenu.tileCount]);
}
);
}
jQuery.jGlideMenu.scrollToTile(ctr,jQuery.jGlideMenu.defaultScrollSpeed);
}
,scrollItems:function(d){
	var x='#jGM_tile_'+jQuery.jGlideMenu.currentElementID+'_'+jQuery.jGlideMenu.tileCount;
	var s=jQuery(x+' .jGM_content a');
	var c=jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount];
	if(c<=0&&d==0)return;
	if(c+jQuery.jGlideMenu.itemsToDisplay>=jQuery(s).size()&&d==1)return;
	if(d==0)jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]--;
	elsejQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]++;
	jQuery(s).show();
	jQuery(x+' .jGM_content').children('a:lt('+jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]+')').hide();
	jQuery.jGlideMenu.drawPagers(x.substr(1,x.length),jQuery(s).size());
}
,drawPagers:function(p,c){
	jQuery('#'+p+' .jGM_pager').find('a').each(function(){
	if(jQuery(this).attr('rel')=='Up'){
	if(jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]>0)jQuery(this).css('display','block');
	elsejQuery(this).css('display','none');
}
else{
	if(jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]+jQuery.jGlideMenu.itemsToDisplay<jQuery('#'+p+' .jGM_content a').size())jQuery(this).css('display','block');
	elsejQuery(this).css('display','none');
}
}
);
}
,cleanTiles:function(n){
	var start=n+1;
	var stop=jQuery.jGlideMenu.tileCount;
	if(n>=stop)return false;
	for(var i=start;
	i<=stop;
	i++){
	jQuery('#jGM_tile_'+jQuery.jGlideMenu.currentElementID+'_'+i).remove();
	jQuery.jGlideMenu.tileScrollPosition[i]=0;
}
jQuery.jGlideMenu.countTiles();
	return;
}
,scrollToTile:function(n,s){
	jQuery.jGlideMenu.countTiles();
	var t=jQuery.jGlideMenu.tileCount;
	if(n>t)n=t;
	if(n<1)n=1;
	if(!s)s=jQuery.jGlideMenu.defaultScrollSpeed;
	var b=(jQuery.jGlideMenu.tileWidth*n)-jQuery.jGlideMenu.tileWidth;
	var a=(jQuery.jGlideMenu.slideRight==true)?b*-1:b;
	jQuery.jGlideMenu.animation=true;
	jQuery('div#jGM_wrapper_'+jQuery.jGlideMenu.currentElementID).animate({
	'left':a}
,s,jQuery.jGlideMenu.easeFx,function(){
	if(n<t)jQuery.jGlideMenu.cleanTiles(n);
	if(a!=0)a+='px';
	jQuery(this).css({
	'left':a}
);
	jQuery.jGlideMenu.animation=false;
}
);
}
,buildTile:function(t,d,l){
	if(jQuery.jGlideMenu.imagePath.length>1&&jQuery.jGlideMenu.imagePath.substr(-1,1)!='/')jQuery.jGlideMenu.imagePath+='/';
	var template=new String('');
	template='<div class="jGM_cats"><h1>'+t+'</h1><p class="jGM_desc">'+d+'</p></div>';
	template+='<div class="jGM_pager"><a href="#" rel="Up" title="Scroll Up" style="display:none"><img src="'+jQuery.jGlideMenu.imagePath+'arrow_up.gif" alt="Scroll Up"/></a></div>';
	template+='<div class="jGM_content">';
	for(var i=0;
	i<l.length;
	i++){
	var hash=(l[i][2]==1)?'':'#';
	var type=(l[i][2]==1)?'':' class="jGM_more"';
	template+='<a href="'+hash+l[i][0]+'"'+type+'>'+l[i][1]+'</a>';
}
template+='</div>';
	template+='<div class="jGM_pager"><a href="#" rel="Down" title="Scroll Down" style="display:none"><img src="'+jQuery.jGlideMenu.imagePath+'arrow_dn.gif" alt="Scroll Up"/></a></div>';
	return template;
}
,errorTrap:function(m){
	if(jQuery.jGlideMenu.alertOnError==true)alert(m);
	return;
}
}
jQuery.fn.jGlideMenu=jQuery.jGlideMenu.initialize;
	jQuery.fn.jGlideMenuToggle=jQuery.jGlideMenu.toggleDisplay;
	jQuery.fn.reverse=function(){
	return this.pushStack(this.get().reverse(),arguments);
}
;

CSS代码(jGlideMenu.css):

 .jGM_box{position:absolute;top:100px;left:100px;width:227px;height:317px;background:#fff;margin:0;padding:0;border:1px solid #ccc;overflow:hidden;}
.jGM_header{position:absolute;top:0;left:0;height:18px;width:227px;background:#d1d1d1;color:#fff;text-align:right;vertical-align:middle;line-height:18px;cursor:move;}
.jGM_header a{margin-right:12px;text-decoration:none;color:#fff;cursor:pointer;}
.jGM_header a:HOVER{color:#333;}
.jGM_wrapper{position:absolute;top:19px;left:0;width:2270px;height:288px;margin:0;padding:0;border:0;}
/* overflow:hidden;*/
 .jGM_tile{position:absolute;top:0;left:7px;width:213px;height:auto;overflow:hidden;margin:0;padding:0;border:0;display:block;}
.jGM_cats{width:100%;height:64px;overflow:hidden;vertical-align:middle;text-align:left;}
.jGM_cats h1{font-family:Bookman Old Style,Verdana,Arial,serif;font-size:1.8em;margin:0;padding:2px 0;line-height:1.8em;color:#414141;font-weight:normal;}
.jGM_cats p{font-family:verdana,tahoma,arial,sans-serif;font-size:1em;margin:0;padding:0;line-height:1.2em;color:#858585;font-weight:normal;}
.jGM_pager{height:18px;width:213px;line-height:18px;margin:0;border:0;padding:0;background:#f6f6f6;color:#fff;text-align:center;vertical-align:middle;}
.jGM_pager a{text-decoration:none;color:#fff;font-weight:bold;text-decoration:none;color:#fff;display:block;}
.jGM_pager a:HOVER{background:#d1d1d1;}
.jGM_pager img{border:0;margin:6px 0;}
.jGM_content{width:213px;height:150px;margin:1px 0;padding:0;border:0;overflow:hidden;}
.jGM_content a{text-decoration:none;color:#333;height:18px;width:100%;display:block;line-height:18px;padding:0 0 0 10px;background-color:#e6e7e9;margin:1px 0;}
.jGM_content a:HOVER{color:#fff;background-color:#f60;}
.jGM_more{background-image:url(../img/arrow.gif);background-repeat:no-repeat;background-position:203px 50%;}
.jGM_back{position:absolute;top:255px;right:0;height:18px;width:52px;background:#d1d1d1;color:#fff;line-height:18px;vertical-align:middle;text-align:center;margin:10px 0 0 0;padding:0;border:0;z-index:99;}
.jGM_back a{height:100%;width:100%;text-decoration:none;color:#fff;display:block;}
.jGM_back a{color:#fff;background:#d1d1d1;}
.jGM_back a:HOVER{color:#fff;background:#f60;}
.jGM_reset{position:absolute;top:255px;right:62px;height:18px;width:52px;background:#d1d1d1;color:#fff;line-height:18px;vertical-align:middle;text-align:center;margin:10px 0 0 0;padding:0;border:0;z-index:99;}
.jGM_reset a{height:100%;width:100%;text-decoration:none;color:#fff;display:block;}
.jGM_reset a{color:#fff;background:#d1d1d1;}
.jGM_reset a:HOVER{color:#fff;background:#f60;}

CSS代码(jGlideMenuNotAbsolute.css):

 .jGM_box{position:relative;width:227px;height:317px;background:#fff;margin:0;padding:0;border:1px solid #ccc;overflow:hidden;}
.jGM_header{position:absolute;top:0;left:0;height:18px;width:227px;background:#d1d1d1;color:#fff;text-align:right;vertical-align:middle;line-height:18px;/* cursor:move;*/
}
.jGM_header a{margin-right:12px;text-decoration:none;color:#fff;cursor:pointer;display:none;/* hide close link */
}
.jGM_header a:HOVER{color:#333;}
.jGM_wrapper{position:absolute;top:19px;left:0;width:2270px;height:288px;margin:0;padding:0;border:0;}
/* overflow:hidden;*/
 .jGM_tile{position:absolute;top:0;left:7px;width:213px;height:auto;overflow:hidden;margin:0;padding:0;border:0;display:block;}
.jGM_cats{width:100%;height:64px;overflow:hidden;vertical-align:middle;text-align:left;}
.jGM_cats h1{font-family:Bookman Old Style,Verdana,Arial,serif;font-size:1.8em;margin:0;padding:2px 0;line-height:1.8em;color:#414141;font-weight:normal;}
.jGM_cats p{font-family:verdana,tahoma,arial,sans-serif;font-size:1em;margin:0;padding:0;line-height:1.2em;color:#858585;font-weight:normal;}
.jGM_pager{height:18px;width:213px;line-height:18px;margin:0;border:0;padding:0;background:#f6f6f6;color:#fff;text-align:center;vertical-align:middle;}
.jGM_pager a{text-decoration:none;color:#fff;font-weight:bold;text-decoration:none;color:#fff;display:block;}
.jGM_pager a:HOVER{background:#d1d1d1;}
.jGM_pager img{border:0;margin:6px 0;}
.jGM_content{width:213px;height:150px;margin:1px 0;padding:0;border:0;overflow:hidden;}
.jGM_content a{text-decoration:none;color:#333;height:18px;width:100%;display:block;line-height:18px;padding:0 -10px 0 10px;background-color:#e6e7e9;margin:1px 0;}
.jGM_content a:HOVER{color:#fff;background-color:#f60;}
.jGM_more{background-image:url(../img/arrow.gif);background-repeat:no-repeat;background-position:right center;}
.jGM_back{position:absolute;top:255px;right:0;height:18px;width:52px;background:#d1d1d1;color:#fff;line-height:18px;vertical-align:middle;text-align:center;margin:10px 0 0 0;padding:0;border:0;z-index:99;}
.jGM_back a{height:100%;width:100%;text-decoration:none;color:#fff;display:block;}
.jGM_back a{color:#fff;background:#d1d1d1;}
.jGM_back a:HOVER{color:#fff;background:#f60;}
.jGM_reset{position:absolute;top:255px;right:62px;height:18px;width:52px;background:#d1d1d1;color:#fff;line-height:18px;vertical-align:middle;text-align:center;margin:10px 0 0 0;padding:0;border:0;z-index:99;}
.jGM_reset a{height:100%;width:100%;text-decoration:none;color:#fff;display:block;}
.jGM_reset a{color:#fff;background:#d1d1d1;}
.jGM_reset a:HOVER{color:#fff;background:#f60;}

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