大小搬家,公司工廠,機器,鋼琴金庫,垃圾處理
估價送箱,全省回程,品質保證
防水工程專業通馬桶、抽水肥、清水溝
任何問題一切搞定,七天滿意保證

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 實作側邊滑入選單

房東:阿凱
發表時間:2011-03-22
[檢舉]


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Simple Slide Menu</title>

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"

            type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var h = [];

            for (var i = 1; i < 7; i++)

                h.push("<li class=\'item\'>Item" + i + "</li>");

            $("#menu ul").html(h.join("\\n"));

            function slideLeft() {

                var $m = $("#menu");

                $m.animate({ "left": -$m.width(), opacity: 0 }, 500);

            }

            $("#handle").click(function () {

                var $m = $("#menu"), $c = $("#main");

                if ($m.position().left > 0)

                    slideLeft();

                else

                    $m.show().animate({ left: $c.position().left, opacity: 1 }, 500);

            });

            $("li.item").live("click", function () {

                slideLeft();

                $("#main").text($(this).text());

            });

        });

    </script>

    <style type="text/css">

        #main { width: 400px; height: 300px;  background-color: Gray;

                text-align: center; color: White; }

        #handle { position: absolute; z-index: 9; top: 8px; left: 0px;

                  cursor: pointer; width: 10px; height: 150px;

                  background-color: Green; }

        #menu { display: none; position:absolute; z-index: 1;

                top: 8px; left: -150px; background-color: Yellow;

                width: 100px; height: 150px; 

                border-right: 2px solid #444444; border-bottom: 2px solid #444444; }

        li.item { color: Blue; text-decoration: underline; cursor: pointer; }

    </style>

</head>

<body>

<div id="main"></div>

<div id="handle"></div>

<div id="menu"><ul></ul></div>

</body>

</html>


 


 


\"\"


想看Live Demo的人可以到這裡






  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: