jQuery制作菜单

来源：互联网发布：旗袍淘宝专买长款旗袍编辑：程序博客网时间：2024/06/08 13:20

当然菜单还是用做活的比较好，这样写固定了在实际中并不实用。

下面介绍横向菜单和纵向菜单的做法：（直接复制的以前写的代码，JavaScript就没有另外引用）

HTML代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>菜单效果</title>    <link type="text/css" rel="Stylesheet" href="caidan.css"/>    <script type="text/javascript" src="jquery-1.3.1.js"></script>    <%--<script type="text/javascript" src="caidan.js"></script>--%>    <script type="text/javascript">        $(document).ready(function () {            $(".main>a").click(function () {                 var ulNode = $(this).next("ul");                ulNode.slideToggle();/*卷帘的感觉 也可以slidedown slideup单独设置*/                changeIcon($(this));            });            $(".mains").hover(function () {                $(this).children("ul").slideDown();                changeIcon($(this).children("a"));            },                function () {                    $(this).children("ul").slideUp();                    changeIcon($(this).children("a"));                });        });                  function changeIcon(mainNode){            if (mainNode) {                if (mainNode.css("background-image").indexOf("b.gif")>=0)                { mainNode.css("background-image", "url('a.gif')");}                else {                    mainNode.css("background-image", "url('b.gif')");                }            }        }    </script></head><body>        <ul>        <li class="main">            <a href="#">菜单项1</a>            <ul>                <li>                    <a href="#">子菜单项1</a>                </li>                <li>                    <a href="#">子菜单项2</a>                </li>            </ul>        </li>        <li class="main">            <a href="#">菜单项2</a>            <ul>                <li>                   <a href="#"> 子菜单项1</a>                </li>                <li>                    <a href="#">子菜单项2</a>                </li>            </ul>        </li>        <li class="main">           <a href="#"> 菜单项3</a>            <ul>                <li>                   <a href="#"> 子菜单项1</a>                </li>                <li>                   <a href="#"> 子菜单项2</a>                </li>            </ul>         </li>    </ul>    <br/>    <ul>        <li class="mains">            <a href="#">菜单项1</a>            <ul>                <li>                    <a href="#">子菜单项1</a>                </li>                <li>                    <a href="#">子菜单项2</a>                </li>            </ul>        </li>        <li class="mains">            <a href="#">菜单项2</a>            <ul>                <li>                   <a href="#"> 子菜单项1</a>                </li>                <li>                    <a href="#">子菜单项2</a>                </li>            </ul>        </li>        <li class="mains">           <a href="#"> 菜单项3</a>            <ul>                <li>                   <a href="#"> 子菜单项1</a>                </li>                <li>                   <a href="#"> 子菜单项2</a>                </li>            </ul>         </li>    </ul></body></html>

CSS代码：

ul li{       list-style:none;}ul{       padding:0;/*去除缩进 IE6,7去不掉，不会向左靠*/       margin：0；/*现在可以了*/}.main,.mains{        background-image:url(c.gif);        background-repeat:repeat-x;        width:120px;}li{        background-color:lightblue;}a{         text-decoration:none;         padding-left:20px;         display:block;/*a标记在整个图形上都有超链接手势，除了IE6*/          display：inline-block;/*IE6样式也同一但*/          width：100px;/*100=整个宽120减左padding  IE6空的背景也能显示超链接手势*/           padding-top:3px;            padding-bottom:3px;}.main a,.mains a{         color:white;          background-image:url(b.gif);          background-repeat:no-repeat;          background-position:3px center;}.main li a,.mains li a{          color:blue;           background-image:none;}.main ul,.mains ul{           display:none;}.mains{           margin-left:1px;           float:left;}

0 0