How to add Submenus to the Jump menus

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
thecomputerchap
Veteran Member
Posts: 47
Joined: 2016-08-28 10:37

How to add Submenus to the Jump menus

Post by thecomputerchap » 2023-01-31 10:32

Hi all,

I thought I'd contribute as I've not posted in a while! I really wanted to add submenus to one of my jump menus. I created a new group in the AppGini app called 'Reports' and found that I had 19 reports to add to it! This is how to do it...

1) In your links-navmenu.php, add the names of the submenus themselves (the names need to be unique to any other parent menu items) like this...

// Reports Menu
$navLinks[] = array(
'url' => "#",
'title' => "By Leads",
'groups' => array('*'), // groups allowed to see this link, use '*' if you want to show the link to all groups
'icon' => 'resources/table_icons/bullet_green.png',
'table_group' => 1, // optional index of table group, default is 0
);
$navLinks[] = array(
'url' => "#",
'title' => "By Sales",
'groups' => array('*'), // groups allowed to see this link, use '*' if you want to show the link to all groups
'icon' => 'resources/table_icons/bullet_green.png',
'table_group' => 1, // optional index of table group, default is 0
); $navLinks[] = array(
'url' => "#",
'title' => "By Count",
'groups' => array('*'), // groups allowed to see this link, use '*' if you want to show the link to all groups
'icon' => 'resources/table_icons/bullet_green.png',
'table_group' => 1, // optional index of table group, default is 0
);


2) To create the submenu items in the 3 above submenus above, add the following to your footer-extras.php...

$j(document).ready(function() {

$j('.dropdown-menu > li > a:contains("By Leads")').html($j('.dropdown-menu > li > a:contains("By Leads")').html()+'<i class="glyphicon glyphicon-menu-right" style="float: right; top: 8px; right: 5px;"></i>'+
'<ul class="dropdown-menu submenu" role="menu">'+
'<li><a href="mypage.php">Sources</a></li>'+
'<li><a href="mypage.php">Signatories</a></li>'+
'<li><a href="mypage.php">Magazines</a></li>'+
'<li><a href="mypage.php">Mailchimp</a></li>'+
'<li><a href="mypage.php">Financial Advisors</a></li>'+
'<li><a href="mypage.php">Reps</a></li>'+
'<li><a href="mypage.php">Closers</a></li>'+
'</ul>'
);

$j('.dropdown-menu > li > a:contains("By Sales")').html($j('.dropdown-menu > li > a:contains("By Sales")').html()+'<i class="glyphicon glyphicon-menu-right" style="float: right; top: 8px; right: 5px;"></i>'+
'<ul class="dropdown-menu submenu" role="menu">'+
'<li><a href="mypage.php">Date</a></li>'+
'<li><a href="mypage.php">Customers</a></li>'+
'<li><a href="mypage.php">Sources</a></li>'+
'<li><a href="mypage.php">Signatories</a></li>'+
'<li><a href="mypage.php">Magazines</a></li>'+
'<li><a href="mypage.php">Mailchimp</a></li>'+
'<li><a href="mypage.php">Financial Advisors</a></li>'+
'<li><a href="mypage.php">Reps</a></li>'+
'<li><a href="mypage.php">Closers</a></li>'+
'<li><a href="mypage.php">Active Sales</a></li>'+
'</ul>'
);

$j('.dropdown-menu > li > a:contains("By Count")').html($j('.dropdown-menu > li > a:contains("By Count")').html()+'<i class="glyphicon glyphicon-menu-right" style="float: right; top: 8px; right: 5px;"></i>'+
'<ul class="dropdown-menu submenu" role="menu">'+
'<li><a href="mypage.php">Statuses</a></li>'+
'<li><a href="mypage.php">Groups</a></li>'+
'</ul>'
);
});


3) Now add the following to the bottom of your css file...

.navbar ul.dropdown-menu {
overflow-y: unset !important;
}

.navbar .dropdown-menu li {
position: relative !important;
}

.navbar .dropdown-menu li a:hover > .submenu {
display: block;
}

.submenu {
display: none;
top: 0px;
}

ul.submenu {
top: -13px;
position: absolute !important;
left: 140px !important;
}

ul.submenu > li a {
padding: 5px !important;
border-radius: 10px;
}


I've attached what it looks like.

Have fun! :D

Dazzy.
Attachments
appgini.png
appgini.png (49.36 KiB) Viewed 1151 times

Post Reply