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.

Before target click

After target click