Adding drop down menu to a custom navbar

I have created a custom navigation bar called ''Services'' and I want to add a drop down menu on it with jQuery I have this code.

HTML

Code:

<div id="nav">
<a class="dropdown-toggle" href="#">Menu</a>
<ul class="dropdown">
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
  <li><a href="#">Menu Item 3</a></li>
  <li><a href="#">Menu Item 4</a></li>
</ul>
</div>

CSS

Code:


div#nav {
position: relative;
}
div#nav a {
 padding: 5px 15px 5px;
}
.dropdown-toggle {
 padding: 0;
background: #777;
}
ul.dropdown {
display: none;
position: absolute;
top: 100%;
margin-top: 5px;
padding: 5px 5px 0 0;
background: #777;
}
ul.dropdown li {
list-style-type: none;
}
ul.dropdown li a {
text-decoration: none;
padding: 0em 1em; display:
block;
}

jQuery for the drop down menu

Code:

$(function() { // Dropdown toggle
$('.dropdown-toggle').click(function() { $(this).next('.dropdown').slideToggle();
});

$(document).click(function(e)
{
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle'))
//{ $('.dropdown').hide(); }
  { $('.dropdown').slideUp(); }
});
});

Good evening!

I don't quite understand - what's the question? I tried to paste your code, for example, into AP - Display - Generalities - Message content and everything works.

Razor12345 wrote:Good evening!

I don't quite understand - what's the question? I tried to paste your code, for example, into AP - Display - Generalities - Message content and everything works.

The code works no problem with it.

The question is that I want to add a drop down menu to the custom navigation bar I created called ''Services''

For example this menu I want to add it to navbar ''Services'' at my forum https://forumservice.forumotion.com/

Code:


        <div id="nav">
        <a class="dropdown-toggle" href="#">Menu</a>
        <ul class="dropdown">
          <li><a href="#">Menu Item 1</a></li>
          <li><a href="#">Menu Item 2</a></li>
          <li><a href="#">Menu Item 3</a></li>
          <li><a href="#">Menu Item 4</a></li>
        </ul>
        </div>

So I did something like this I added a class

Code:

$(function() {
$('a.mainmenu:contains("Services")').addClass('dropdown-toggle');
});

Then the resat of the Javascript Code

Code:

$(function() {
$('.dropdown-toggle').click(function() { $(this).next('.dropdown').slideToggle();
});

$(document).click(function(e)
{
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle'))
//{ $('.dropdown').hide(); }
  { $('.dropdown').slideUp(); }
});
});

But the drop down menu doesn't show when you click at ''Services''

AP - Modules - Javascript codes management

Title: any
Placement: in the all pages
Code:

Code:

$(document).ready(function() {
 
$('a.mainmenu:contains("Services")').parent().css("position", "relative");
$('a.mainmenu:contains("Services")').addClass('dropdown-toggle');

  $('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    const dropdown = $(this).next('.dropdown');
    if (dropdown.is(':visible')) {
      dropdown.slideUp();
    } else {
      $('.dropdown').not(dropdown).slideUp();
      const dropdownHTML = $('<ul class="dropdown"><li><a href="#">Menu Item 1</a></li><li><a href="#">Menu Item 2</a></li><li><a href="#">Menu Item 3</a></li><li><a href="#">Menu Item 4</a></li></ul>');
      $(this).after(dropdownHTML);
      dropdownHTML.slideDown();
    }
  });
 
 $(document).click(function(e) {
    const target = e.target;
    const dropdown = $('.dropdown');
   
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle') && !$(target).is(dropdown) && !$(target).parents().is(dropdown)) {
      dropdown.slideUp();
    }
  });
});

In your CSS find this code:

Code:

ul.dropdown {
display: none;
position: absolute;
top: 100%;
margin-top: 5px;
padding: 5px 5px 0 0;
background: #777;
}

Replace by this:

Code:

ul.dropdown {
display: none;
position: absolute;
top: 100%;
margin-top: 5px;
padding: 5px 5px 0 0;
background: #777;
left: 0;
min-width: 150px;
max-width: 200px;
z-index: 10;
}

Result:

Very nice how about the default nav bar let just say the Memberlist I want to add some more drop down links there.

Code:

$(document).ready(function() {
 
$('a.mainmenu:contains("Services")').parent().css("position", "relative");
$('a.mainmenu[href="/memberlist"]').parent().css("position", "relative");
$('a.mainmenu:contains("Services")').addClass('dropdown-toggle');
$('a.mainmenu[href="/memberlist"]').addClass('dropdown-toggle');

  $('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    const dropdown = $(this).next('.dropdown');
    if (dropdown.is(':visible')) {
      dropdown.slideUp();
    } else {
      $('.dropdown').not(dropdown).slideUp();
      let dropdownHTML;
      if (e.target.innerText === 'Services') {
        dropdownHTML = $('<ul class="dropdown"><li><a href="#">Menu Item 1</a></li><li><a href="#">Menu Item 2</a></li><li><a href="#">Menu Item 3</a></li><li><a href="#">Menu Item 4</a></li></ul>');
      } else {
        dropdownHTML = $('<ul class="dropdown"><li><a href="#">Another Menu Item 1</a></li><li><a href="#">Another Menu Item 2</a></li><li><a href="#">Another Menu Item 3</a></li><li><a href="#">Another Menu Item 4</a></li></ul>'); 
      }
      $(this).after(dropdownHTML);
      dropdownHTML.slideDown();
    }
  });
 
 $(document).click(function(e) {
    var target = e.target;
    var dropdown = $('.dropdown');
   
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle') && !$(target).is(dropdown) && !$(target).parents().is(dropdown)) {
      dropdown.slideUp();
    }
  });
});

I added these lines to add the class and position the parent element of the Memberlist button

Code:

$('a.mainmenu[href="/memberlist"]').parent().css("position", "relative");
$('a.mainmenu[href="/memberlist"]').addClass('dropdown-toggle');

And added a check for the contents of the button pressed. If the button Services - the code creates and adds one menu. If different - the code creates and adds another menu.

Code:

let dropdownHTML;
      if (e.target.innerText === 'Services') {
        dropdownHTML = $('<ul class="dropdown"><li><a href="#">Menu Item 1</a></li><li><a href="#">Menu Item 2</a></li><li><a href="#">Menu Item 3</a></li><li><a href="#">Menu Item 4</a></li></ul>');
      } else {
        dropdownHTML = $('<ul class="dropdown"><li><a href="#">Another Menu Item 1</a></li><li><a href="#">Another Menu Item 2</a></li><li><a href="#">Another Menu Item 3</a></li><li><a href="#">Another Menu Item 4</a></li></ul>'); 
      }

Result:

I forgot to mention that the memberlist must still be clicked to the members list and the drop down menu must show when you click the little arrow that is after ''Members'' see at my forum https://forumservice.forumotion.com/

Pseudo-elements cannot be manipulated via JS/jQuery
You need to come up with a different logic for adding an element to the button.

I don't use Font Awesome icons - I add an image via jQuery and add class

Code: dropdown-toggle

to that image.

Code:

$('a.mainmenu:contains("Services")').parent().css("position", "relative");
$('a.mainmenu[href="/memberlist"]').parent().css("position", "relative");
$('a.mainmenu:contains("Services")').addClass('dropdown-toggle');

const memberListIcon = '<span class="memberlist__icon"><img src="https://2img.net/i/empty.gif" /></span>';
$('a.mainmenu[href="/memberlist"]').append(memberListIcon);
$('.memberlist__icon').addClass('dropdown-toggle');

You can try replacing the image with the Font Awesome icon.
If you're going to use an image, don't forget to add width to the image:

Code:

span.memberlist__icon img {
    width: 10px;
}

Full code:

Code:

$(document).ready(function() {
 
$('a.mainmenu:contains("Services")').parent().css("position", "relative");
$('a.mainmenu[href="/memberlist"]').parent().css("position", "relative");
$('a.mainmenu:contains("Services")').addClass('dropdown-toggle');

const memberListIcon = '<span class="memberlist__icon"><img src="https://2img.net/i/empty.gif" /></span>';
$('a.mainmenu[href="/memberlist"]').append(memberListIcon);
  $('.memberlist__icon').addClass('dropdown-toggle');

  $('.dropdown-toggle').click(function(e) {
    console.log(e.target);
    e.preventDefault();
    const dropdown = $(this).next('.dropdown');
    if (dropdown.is(':visible')) {
      dropdown.slideUp();
    } else {
      $('.dropdown').not(dropdown).slideUp();
      let dropdownHTML;
      if (e.target.innerText === 'Services') {
        dropdownHTML = $('<ul class="dropdown"><li><a href="#">Menu Item 1</a></li><li><a href="#">Menu Item 2</a></li><li><a href="#">Menu Item 3</a></li><li><a href="#">Menu Item 4</a></li></ul>');
      } else {
        dropdownHTML = $('<ul class="dropdown"><li><a href="#">Another Menu Item 1</a></li><li><a href="#">Another Menu Item 2</a></li><li><a href="#">Another Menu Item 3</a></li><li><a href="#">Another Menu Item 4</a></li></ul>'); 
      }
      $(this).after(dropdownHTML);
      dropdownHTML.slideDown();
    }
  });
 
 $(document).click(function(e) {
    var target = e.target;
    var dropdown = $('.dropdown');
   
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle') && !$(target).is(dropdown) && !$(target).parents().is(dropdown)) {
      dropdown.slideUp();
    }
  });
});

Thanks again this can be locked.

You are welcome!

Problem solved & topic archived. Please read our forum rules: ESF General Rules