吸引顧客視線,好的廣告招牌很重要
各式招牌客製設計、製作,現場免費估價請洽!
系統傢俱各式廠商輕鬆找,不怕你比價,免費刊登
鎖定客群,強力放送,品牌竄紅就靠這一招

首頁  •  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 人回應

    姓名:
    佈告內容:
    其他選項: