TargetId

The targetId property is used to define the target Id for Navigation Drawer. The drawer opens while you click on the specified target element.

  • html
  • <button id="drawerTarget" style="top:200px;left:600px;position:absolute"></button>
            
            <div id="navigationPane">
                    <ul>
                        <li>Settings</li>
                        <li>Read</li>
                        <li>Help</li>
                        <li>About</li>
                    </ul>
            </div>

    Add the following code in the script tag.

  • javascript
  • $("#navigationPane").ejNavigationDrawer({ position: "fixed", targetId: "drawerTarget", enableListView: true, listViewSettings: { width: 300 }});
            $("#drawerTarget").ejButton({text:"Open Drawer"});

    The following screenshots illustrates the output.

    ![](targetid_images\targetid_img1

    Before target click

    ![](targetid_images\targetid_img2

    After target click