Hôm nay thủ thuật blog violet chia sẻ các bạn một code khá hay

Các bạn xem demo nhé

http://caobang83.webng.com/sdilemenu/

Cách làm

B1. Download file tại đây:

http://caobang83.webng.com/sdilemenu/sdilemenu.zip

B1. Cho code sau vào thẻ head:

<link rel="stylesheet" href="sidetogglemenu.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script src="sidetogglemenu.js"></script>

<script>

jQuery(function(){ // on DOM load
    menu1 = new sidetogglemenu({  // initialize first menu example
        id: 'togglemenu1',

        source: 'togglemenu1.txt',
        marginoffset: 10
    })

    menu2 = new sidetogglemenu({  // initialize second menu example
        id: 'togglemenu2',
        position: 'right',
        source: 'togglemenu2.txt',
        revealamt: -5
    })
})

</script>

Chú ý thay link chỗ mình bôi đậm

B3. Cho code này vào chỗ mà bạn muốn hiển thị nhé:

<button onClick="menu1.toggle();" class="sideviewtoggle">Toggle Menu 1</button>
<button onClick="menu2.toggle()" class="sideviewtoggle">Toggle Menu 2</button>