jquery侧边划出导航菜单特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jquery侧边划出导航菜单特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery侧边划出导航菜单</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        <!--

        /*Start slide out box*/
        div.box_button {
            height: 50px;
            width: 50px;
            text-align: center;
            vertical-align: middle;
            float: left;
            cursor: help;
        }

        div.box_main {
            height: auto;
            background-color: #EEE;
            float: left;
            border-top-width: thin;
            border-right-width: thin;
            border-left-width: thin;
            border-top-style: solid;
            border-right-style: solid;
            border-left-style: solid;
            border-top-color: #4D4D4D;
            border-right-color: #4D4D4D;
            border-left-color: #4D4D4D;
        }

        div.box_wrap {
            width: auto;
            float: left;
            clear: both;
            height: auto;
            position: absolute;
            left: -1px;
            top: 50px;
        }

        div.content {
            padding: 10px;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
        /*End slide out box*/


        /*Start drop down menu*/
        ul#menu, ul#menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 15em;
            width: 300px;
        }

        ul#menu a {
            display: block;
            text-decoration: none;
        }

        #menu li a img {
            margin-right: 5px;
        }

        ul#menu li {
            width: 300px;
        }

        ul#menu li a {
            color: #333;
            background-color: #eeeeee;
            font-family: Arial, Helvetica, sans-serif;
            border-bottom-width: thin;
            border-bottom-style: solid;
            border-bottom-color: #333;
            font-size: 36px;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
        }
        /*End drop down menu*/
        -->
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".box_main").hide();
            $('#menu ul').hide();

            $('#menu li a').click(function () {

                $(this).next().slideToggle('normal');

            });

            $('#box_link').toggle(

            function () {
                $('.box_main').show(function () {
                    $('.box_main').animate({
                        width: '300'
                    }, 500);
                });
                $('#box_img').attr("src", "close.png");
            },

            function () {
                $('.box_main').animate({
                    width: "0"
                }, 500, function () {
                    $('.box_main').hide();
                    $('#box_img').attr("src", "qm.png");
                });
            });

        });
    </script>
</head>
<body>
    <div class="box_wrap">
        <div class="box_main">

            <ul id="menu">
                <li>
                    <a href="#"><img src="faq.png" width="32" height="32" border="0" /><span>FAQ</span></a>

                    <ul>
                        <div class="content">
                            <p>
                                <strong>Q</strong>. What is this?<br />
                                <strong>A</strong>. A cool side bar for your website.
                            </p>
                            <p>
                                <strong>Q</strong>. How does it work.<br />
                                <strong>A</strong>. It uses CSS &amp; jQeuery.
                            </p>
                            <p>
                                <strong>Q</strong>. Who made it?<br />
                                <strong>A</strong>. Dave Earley did - <a style="font-size:16px; border:none;" href="http://www.baidu.com">www.baidu.com</a><br />
                                <br />
                            </p>
                        </div>
                    </ul>
                </li>

                <li>
                    <a href="#"><img src="contact.png" width="32" height="32" border="0" />Contact Us</a>
                    <ul>
                        <div class="content">
                            <form id="form1" name="form1" method="post" action="">
                                <label>
                                    Name<br />
                                    <input type="text" name="textfield" id="textfield" />
                                    <br />
                                    Email
                                    <br />
                                </label>
                                <label>
                                    <input type="text" name="textfield2" id="textfield2" />
                                    <br />
                                    Message
                                    <br />
                                    <textarea name="textarea" id="textarea" cols="20" rows="3"></textarea>
                                    <br />
                                </label>
                                <label>
                                    <input type="submit" name="button" id="button" value="Submit" />
                                </label>
                            </form>
                        </div>
                    </ul>
                    <a href="#"><img src="about.png" width="32" height="32" border="0" />About Us</a>

                    <ul>
                        <div class="content">
                            <p><strong>This is some about text.</strong></p>
                            <p>
                                This is some about text. This is some about text. This is some about text.
                                This is some about text. This is some about text.
                            </p>
                            <p>
                                This is some about text. This is some about text.
                                This is some about text. This is some about text. This is some about text. This is some about text.
                            </p>
                        </div>
                    </ul>
                </li>

                <li>
                    <a href="#"><img src="links.png" width="32" height="32" border="0" />Useful Links</a>
                    <ul>
                        <li><a style="font-size:18px;" href="http://www.baidu.com/">Yahoo!</a></li>
                        <li><a style="font-size:18px;" href="http://www.baidu.com/">Google</a></li>
                        <li><a style="font-size:18px;" href="http://www.baidu.com/">Ask.com</a></li>
                        <li><a style="font-size:18px;" href="http://www.baidu.com">Dave Earley's Blog</a></li>

                    </ul>
                </li>
            </ul>
        </div>
        <div class="box_button">
            <a style="display:block;" href="#" id="box_link">
                <img id="box_img" src="qm.png" width="50" height="50" border="0" />
            </a>
        </div>
    </div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)