JS·经典·炫彩菜单(动画效果) for jquery

 

body 
{
    font-size:12px;    
}
.menuBox
{
    width:50%;
    height:auto;
    margin:0 auto;
}
.menuBox ul
{
    margin:0px;
    padding:0px;    
}
.menuBox ul li
{
    float:left;
    display:block;
    width:18%;
    height:30px;            
    line-height:25px;
    list-style:none;    
    margin-right:1px;
}
.menuBox ul li a
{
    display:block;
    width:100%;
    height:100%;
    background-color:Black;
    color:White;
    text-decoration:none;        
    text-align:center;    
}
.menuBox ul li a:hover
{
    display:block;
    width:100%;
    height:100%;
    background-color:Silver;
    color:Red;
    text-decoration:none;    
}

.menuSelected
{
    display:block;
    width:100%;
    height:100%;
    background-color:Silver;
    color:Red;
    text-decoration:none;
}
.chideMenuForShow
{        
    width:200px;
    position:absolute;
    height:auto;
    border:1px solid #ccc;
    float:right;
    background-color:Silver;
    
}

 

<div class='menuBox'>
        <ul id='ul_menu'>
            <li>
                <a href='#'>menu1</a>
                <div class="chideMenuForShow">
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                    <div>menu1</div>
                </div>
            </li>
            <li>
                <a href='#'>menu2</a>
                <div class="chideMenuForShow">
                    <div>menu2</div>
                    <div>menu2</div>
                    <div>menu2</div>
                    <div>menu2</div>
                    <div>menu2</div>
                    <div>menu2</div>
                </div>
            </li>
            <li>
                <a href='#'>menu3</a>
                <div class="chideMenuForShow">
                    <div>menu3</div>
                    <div>menu3</div>
                    <div>menu3</div>
                    <div>menu3</div>
                    <div>menu3</div>
                </div>
            </li>
            <li>
                <a href='#'>menu4</a>
                <div class="chideMenuForShow">
                    <div>menu4</div>
                    <div>menu4</div>
                    <div>menu4</div>
                    <div>menu4</div>
                    <div>menu4</div>
                    <div>menu4</div>
                </div>
            </li>
            <li>
                <a href='#'>menu5</a>
                <div class="chideMenuForShow">
                    <div>menu5</div>
                    <div>menu5</div>
                    <div>menu5</div>
                    <div>menu5</div>
                    <div>menu5</div>
                    <div>menu5</div>
                </div>
            </li>            
        </ul>
    </div>

 

 

/*
 menu for javascript
 author:mr·zhong
 date:2010-01-25
*/

/*判断当前子菜单显示或隐藏*/
var MenuShowOrHide = false;

$(function(){
    SetMenuID();
    BindMenuHoverEval();
    BindChideMenuHoverEval();
});

/*
 设置主、子菜单按钮ID
*/
function SetMenuID(){
    var id = 1;
    
    $('#ul_menu a').each(function(){
        $(this).attr("id","a_" + id);
        var chideObj = $(this).next();
        chideObj.attr("id","ChideMenu_a_" + id);
        chideObj.hide();
         id++;
    });
}

/*
 设置菜单颜色样式
*/
function SetMenuColor(menuID,isSelected){
    if(isSelected) $("#" + menuID).addClass("menuSelected");
    else $("#" + menuID).removeClass("menuSelected");
}

/*
 设置子菜单显示或隐藏
*/
function ShowOrHideChideMenu(menuID,isShow){
    var obj = $("#" + menuID);
    if(isShow)
    {                
        obj.slideDown("slow");
    }
    else obj.hide("slow");
}

/*
 绑定主菜单鼠标事件
*/
function BindMenuHoverEval(){    
    $("#ul_menu a").each(function(){
       $(this).hover(function(){
            ShowOrHideChideMenu("ChideMenu_" + $(this).attr("id"),true);
            MenuShowOrHide = true;
       },function(){          
            MenuShowOrHide = false;                        
            setTimeout('Hide("ChideMenu_' + $(this).attr("id") +'")',500);            
       }); 
    });
}

/*
 绑定子菜单鼠标事件
*/
function BindChideMenuHoverEval(){
    $("#ul_menu .chideMenuForShow").each(function(){
       $(this).hover(function(){            
            MenuShowOrHide = true;
       },function(){                        
            MenuShowOrHide = false;              
            Hide($(this).attr("id"));            
       }); 
    });            
}

/*
 隐藏子菜单
*/
function Hide(id){        
    if(!MenuShowOrHide) ShowOrHideChideMenu(id,false);
}

 

 

 

Demo 下载地址 https://files.cnblogs.com/keke/菜单.rar