Skip to content
Related Articles

Related Articles

Improve Article

How to design menu using jQuery EasyUI Mobile ?

  • Last Updated : 15 Dec, 2020

In this article, we will learn how to design menu list using jQuery EasyUI Mobile plugin. EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Example 1: The following example demonstrates simple menu using jQuery EasyUI Mobile plugin. 
 

html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,
          maximum-scale=1.0, user-scalable=no">
            
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
    <div class="easyui-navpanel" style="position:relative">
  
        <!-- m-title,m-toolbar class is used here-->
        <header>
            <div class="m-toolbar">
                <div class="m-title">Menu</div>
                <div class="m-right">
  
                    <!-- Icons taken from themes folder-->
                    <a href="javascript: void(0)" 
                        class="easyui-linkbutton"
                        data-options="iconCls: 'icon-search',
                            plain: true">
                    </a>
  
                    <!-- 'easyui-menubutton' class 
                        is used here-->
                    <a href="javascript:void(0)" 
                        class="easyui-menubutton" 
                        data-options="iconCls:'icon-more',
                                    menu: '#menuID',
                                   menuAlign: 'right',
                                   hasDownArrow: true">
                    </a>
                </div>
            </div>
        </header>
    </div>
  
    <div id="menuID" class="easyui-menu" 
        style="width:150px;">
        <div>New tab</div>
        <div>New Window</div>
  
        <!-- EasyUI Menu separator class -->
        <div class="menu-sep"></div>
        <div>History</div>
        <div>Bookmarks</div>
        <div>Downloads</div>
  
        <div class="menu-sep"></div>
        <div>Edit</div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div>Settings</div>
        <div data-options="iconCls: 'icon-remove'">
            Clear
        </div>
        <div>Exit</div>
    </div>
</body>
  
</html>

Output: 
 



 

Example 2: The following example demonstrates a menubar using the plugin. 
 

 

html




<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,
          maximum-scale=1.0, user-scalable=no">
            
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
    <div class="easyui-navpanel" 
        style="position:relative">
  
        <!-- m-title,m-toolbar class 
            is used here-->
        <header>
            <div class="m-toolbar">
                <div class="m-title">
                    <!-- easyui-menubutton class 
                        is used here-->
                    <a href="https://www.geeksforgeeks.org/" 
                        class="easyui-linkbutton"
                        data-options="plain:true,outline:true" 
                        style="width:70px">
                        Home
                    </a>
                    <a href="javascript:void(0)" 
                        class="easyui-menubutton" 
                        data-options="menu:'#menuID1',outline:true"
                        style="width:70px">
                        History
                    </a>
                    <a href="javascript:void(0)" 
                        class="easyui-menubutton" 
                        data-options="menu:'#menuID2',outline:true"
                        style="width:95px">
                        Bookmarks
                    </a>
                    <a href="https://www.geeksforgeeks.org/about/" 
                        class="easyui-linkbutton"
                        data-options="plain:true,outline:true" 
                        style="width:70px">
                        About
                    </a>
                </div>
            </div>
        </header>
    </div>
    <div id="menuID1" class="easyui-menu" 
        style="width:150px;">
          
        <div>New tab</div>
        <div>New Window</div>
          
        <!--EasyUI Menu separator class-->
        <div class="menu-sep"></div>
  
        <div>Edit</div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div>Settings</div>
        <div data-options="iconCls:'icon-remove'">
            Clear
        </div>
        <div>Exit</div>
    </div>
      
    <div id="menuID2" style="width:100px;">
        <div>History</div>
        <div>Downloads</div>
    </div>
</body>
  
</html>

Output: 
 

 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :