Not Solved help drop down menu not working
#1
Not Solved
This user has been denied support. This user has been denied support.
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>
					
Reply
#2
Not Solved
This user has been denied support. This user has been denied support.
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>&nbsp;</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>
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)