Orientation

23 Nov 20175 minutes to read

It gets or sets the direction in which the Menu control renders and specifies the orientation of the normal menu. According to the orientation property the Menu control renders in horizontal or vertical.

Horizontal Menu

Horizontal orientation displays the menu items horizontally and it is the default orientation behavior of Menu control.
Width property is to set the width of the menu widget.

The following steps explains you the details on rendering the Menu control.

In an HTML page, add the <UL> and <LI> to configure Menu control.

HTML

<div>
    <ul id="menu">
        <li id="home">
            <a href="#">Home</a>
            <ul>
                <li><a>Foundation</a></li>
                <li><a>Launch</a></li>
                <li>
                    <a>About</a>
                    <ul>
                        <li><a>Company</a></li>
                        <li><a>Location</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="Services">
            <a>Services</a>
            <ul>
                <li><a>Consulting</a></li>
                <li><a>Outsourcing</a></li>
            </ul>
        </li>
        <li id="About"><a>About</a></li>
        <li id="Contact">
            <a>Contact us</a>
            <ul>
                <li><a>Contact number</a></li>
                <li><a>E-mail</a></li>
            </ul>
        </li>
        <li id="Careers">
            <a>Careers</a>
            <ul>
                <li>
                    <a>Position</a>
                    <ul>
                        <li><a>Developer</a></li>
                        <li><a>Manager</a></li>
                    </ul>
                </li>
                <li><a>Apply online</a></li>
            </ul>
        </li>
    </ul>
</div>

JAVASCRIPT

// Initialize the control in JavaScript.
    jQuery(function ($) {
        $("#menu").ejMenu({ width: 500 });
    });

The following screenshot displays the output of the above code.

Vertical Menu

You can also render Menu control in vertical direction using orientation. To set the vertical orientation of Menu control, replace the following script in the above sample code example.

Add the following code in your <script> section.

JAVASCRIPT

jQuery(function ($) {
        $("#menu").ejMenu({
            orientation: ej.Orientation.Vertical
        });
    });

The following screen shot displays the output of the above code.