Responsive Layout

Responsive Layout is aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). In order to get responsive layout, you can add ej.responsive.css file in this sample. CDN link for the responsive CSS file is as follows.

http://cdn.syncfusion.com/17.2.0.46/js/web/responsive-css/ej.responsive.css

NOTE

Refer to the ej.responsive.css file after the ej.widgets.all.min.css file

Add the above css link in the code sample.

Add the following code in your HTML page.

  • 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
  • // Add the following code in your script section.
    /// <reference path="../tsfiles/jquery.d.ts" />
    /// <reference path="../tsfiles/ej.web.all.d.ts" />
    
    
    module MenuComponent {
        $(function () {
            var sample = new ej.Menu($("#menu"),{
        });
      });
    }

    The following screenshot displays the output on executing the above code

    ##Responsive in Desktop:

    When menu width is small and window width is normal as desktop ,only the overflown menu items will be moved inside menu popup.You can also set width and height for popup menu using overflowHeight and overflowWidth API

  • javascript
  • // Add the following code in your script section.
        $(function () {
            var sample = new ej.Menu($("#menu"),{
                width:"300px"
            });
        });

    The following output shows the output of the above code

    ##Responsive in Mobile or Tablet:

    Menu will be displayed in mobile or Tablet as shown in the below image:

    NOTE

    Window width below 767px is considered as Mobile or Tablet mode in our menu.