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!
Dazzy.
How to add Submenus to the Jump menus
-
- Veteran Member
- Posts: 47
- Joined: 2016-08-28 10:37
How to add Submenus to the Jump menus
- Attachments
-
- appgini.png (49.36 KiB) Viewed 1207 times