+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: help drop down menu not working (/thread-242362.html)
help drop down menu not working - matt6950 - 2024-11-25
Hi,
I am trying to modify my theme with limited coding knowledge, basiacally just by seeing how the code has done it else where and try to replicate.
I am using Igame theme trying to add a new drop down menu called Data menu next to the already existing drop down menu called "more"
can you please look over this code to see what I am doing wrong?
<li><a href='javascript:;' id="extraslink"> More <i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
<li><a href='javascript:;' id="datamenu"> Data Menu <i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
</ul>
<br />
</div>
</div>
</div>
<div id="extraslink_popup" class="popup_menu" style="z-index: 99999; display: none;">
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/stats.php" class="popup_item">Forum stats</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/showteam.php" class="popup_item">Show team</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/search.php?action=getnew" class="popup_item">New topics</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/search.php?action=getdaily" class="popup_item">Todays topics</a>
</div>
<div class="popup_item_container">
</div>
</div>
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="center">
<div id="datamenu_popup" class="popup_menu" style="z-index: 99999; display: none;">
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=donate" class="popup_item">Donate</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=lottery" class="popup_item">Lottery</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/slots.php?action=getdaily" class="popup_item">Slot Machine</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=stealing" class="popup_item">Steal User Data</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}.newpoints.php?action=purchasecredits" class="popup_item">Buy Data</a>
</div>
</div>
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="center">
<div id="logo">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
</div>
RE: help drop down menu not working - matt6950 - 2024-11-26
got the menu working but the drop down menu is dropping down in the wrong place.
any help?
<div id="mainwidth">
<!-- Main Menu Container -->
<div id="main-menu-container">
<div id="main-menu">
<div class="bmenu">
<ul><li><a href="{$mybb->settings['bburl']}/index.php"><i style="font-size: 16px;" class="fa fa-home fa-fw"></i>Home</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php"><i style="font-size: 16px;" class="fa fa-search fa-fw"></i> {$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i style="font-size: 16px;" class="fa fa-users fa-fw"></i> Members</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="popup_item">Help docs</a></li>
<li><a href="#" id="extraslink"> More<i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
<li><a href="#" id="datamenu">Data Menu<i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
</ul>
<!-- More Menu -->
<div id="extraslink_popup" class="popup_menu" style="z-index: 99999; display: none;">
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/stats.php" class="popup_item">Forum stats</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/showteam.php" class="popup_item">Show team</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/search.php?action=getnew" class="popup_item">New topics</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/search.php?action=getdaily" class="popup_item">Today's topics</a>
</div>
</div>
<br />
<!-- Data Menu -->
<div id="datamenu_popup" class="popup_menu" style="z-index: 99999; display: none;">
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=donate" class="popup_item">Donate</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=lottery" class="popup_item">Lottery</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/slots.php?action=getdaily" class="popup_item">Slot Machine</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=stealing" class="popup_item">Steal User Data</a>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/newpoints.php?action=purchasecredits" class="popup_item">Buy Data</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
// Function to toggle visibility of the popup menu
function toggleMenu(triggerId, menuId) {
const trigger = document.getElementById(triggerId);
const menu = document.getElementById(menuId);
if (trigger && menu) {
trigger.addEventListener("click", function (e) {
e.preventDefault(); // Prevent default link action
// Toggle menu visibility
menu.style.display = (menu.style.display === "none" || menu.style.display === "") ? "block" : "none";
});
// Close menu if clicked outside
document.addEventListener("click", function (e) {
if (!menu.contains(e.target) && !trigger.contains(e.target)) {
menu.style.display = "none";
}
});
}
}
// Attach event listeners for each menu
toggleMenu("extraslink", "extraslink_popup");
toggleMenu("datamenu", "datamenu_popup");
});
</script>
<style>
.popup_menu {
position: absolute;
background-color: #fff;
border: 1px solid #ddd;
display: none; /* Hidden by default */
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.popup_item_container {
padding: 5px 0;
}
.popup_item_container a {
text-decoration: none;
color: #333;
display: block;
padding: 5px 10px;
}
.popup_item_container a:hover {
background-color: #f0f0f0;
}
</style>
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="center">
<div id="logo">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
</div>
</td>
<td> </td>
<td valign="center">
<div class="float_right">{$welcomeblock}</div>
</td>
</tr>
</table>
<div class="container">
<div id="content">
<div class="wrapper">
{$pm_notice}{$ougc_awards_requests}
{$remote_avatar_notice}
{$bannedwarning}
{$bbclosedwarning}
{$modnotice}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />
</script>