CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menu
Takabrycheri
Takabrycheri

Reputation: 26

Dropdown with JS

I'm working on my site by editing a template but there is a drop down menu that does not work. The drop-down menu CSS is missing. How can I fix it with CSS and/or with JS? Below is the HTML code:

<a href="#" id="ddnmenu">Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i></a>
<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
  <div class="popup_item_container">
    <a href="{$mybb->settings['bburl']}/usercp.php" class="popup_item">User Panel<i class="fa fa-user menuadj"></i></a>
  </div>
  <div class="popup_item_container">
    <a href="{$mybb->settings['bburl']}/usercp.php?action=profile" class="popup_item">Edit Profile<i class="fa fa-pencil menuadj"></i></a>
  </div>
  <div class="popup_item_container">
    <a href="{$mybb->settings['bburl']}/usercp.php?action=options" class="popup_item">Edit Options<i class="fa fa-cogs menuadj"></i></a>
  </div>
  <div class="popup_item_container">
    <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" class="popup_item">Edit Avatar<i class="fa fa-picture-o menuadj"></i></a>
  </div>
  <div class="popup_item_container">
    <a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" class="popup_item" style="padding-bottom: 4px;">Edit Signature<i class="fa fa-paint-brush menuadj"></i></a>
  </div>
  <div class="popup_item_container">
    <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="popup_item">{$lang->welcome_logout}!<i class="fa fa-power-off menuadj"></i>
                        </a>
  </div>
</div>

edit: I used the solution you suggested to me with jquery, but now there is another problem...

When the menu opens the side button moves beneath it, thus ruining the entire menu..

Before: enter image description here

After: enter image description here

How can I fix it?

Upvotes: 0

Views: 121

Answers (3)

Swarn Singh
Swarn Singh

Reputation: 134

Here is working code with jquery :

Add jquery library - https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Then put this code in script section : 

$(document).ready(function(){
  $('#ddnmenu').click(function(){
    $('#ddnmenu_popup').slideToggle();
  })
})

Add this css:

#ddnmenu_popup{
   position:absolute;
}

Upvotes: 1

JSON Derulo
JSON Derulo

Reputation: 17522

You need to set the style property via JavaScript.

HTML:

<a onclick="openDropdown()" href="#" id="ddnmenu">Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i></a>
<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
   ...
</div>

JS:

function openDropdown() {
    document.getElementById('ddnmenu_popup').style.display = 'block';
}

Upvotes: 0

Sridi.ENSI
Sridi.ENSI

Reputation: 17

You can use $( ".popup_menu" ).toggle(); on clicking on the link #ddnmenu. But first you should remove style="display: none;"

$( "#ddnmenu" ).click(function() {
   $( ".popup_menu" ).toggle();
});

Upvotes: 0

Related Questions