当前位置:编程学习 > JAVA >>

jQuery小试之菜单栏

 这次要写的是一对菜单栏:一横一纵,有淡入淡出的效果,同时随着鼠标点击指示图标修改。

        前台界面:

       \

        HTML代码:


[html] 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
        <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
        <script src="js/jquery.js" type="text/javascript"></script> 
        <script src="js/menu.js" type="text/javascript"></script> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <ul> 
                <li class="main"> 
                <a href="#">文件</a> 
                        <ul> 
                        <li><a href="#">新建</a></li> 
                        <li><a href="#">保存</a></li> 
                        </ul> 
                </li> 
                <li class="main"><a href="#">编辑</a> 
                <ul> 
                        <li><a href="#">复制</a></li> 
                        <li><a href="#">查找</a></li> 
                        </ul> 
                </li> 
                <li class="main"><a href="#">帮助</a> 
                <ul> 
                        <li><a href="#">检查更新</a></li> 
                        <li><a href="#">版本说明</a></li> 
                        </ul> 
                </li> 
        </ul> 
    </div> 
    <p>分割线————————分割线</p> 
 <div> 
        <ul> 
                <li class="hmain"> 
                <a href="#">文件</a> 
                        <ul> 
                        <li><a href="#">新建</a></li> 
                        <li><a href="#">保存</a></li> 
                        </ul> 
                </li> 
                <li class="hmain"><a href="#">编辑</a> 
                <ul> 
                        <li><a href="#">复制</a></li> 
                        <li><a href="#">查找</a></li> 
                        </ul> 
                </li> 
                <li class="hmain"><a href="#">帮助</a> 
                <ul> 
                        <li><a href="#">检查更新</a></li> 
                        <li><a href="#">版本说明</a></li> 
                        </ul> 
                </li> 
        </ul> 
    </div&g

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,