Position dropdown elements using absolute alignment

Question

Position dropdown elements using absolute alignment

I am attempting to replicate the drop-down menu style used on Twitter. Here is an example of what I am trying to achieve:

(Click on the language option).

To accomplish this, I have implemented the following HTML:

<a href="#language">English</a>
<div class="popup" id="language">
  <ul>
    <li>Portuguese</li>
    <li>English</li>
    <li>French</li>
  </ul>
</div>

Example: http://codepen.io/mdmoura/pen/upIjv.

I have two main objectives:

1 - Make sure the drop-down menus line up properly with their respective links;

2 - Allow for the option to align the drop-down menus to the left or right of their triggers.

Does anyone have any suggestions on how to accomplish this?

Thank you, Miguel

jquery css

Answer 1

Answer №1

To make your popups work correctly, add the class 'relative' to your triggers (.popup{ position: relative; } and assign the class 'absolute' to the dropdowns (.popup ul{ position: absolute; }). This will allow you to position the drop downs within the boundaries of the triggers using properties such as left:, right;, etc.

Answer 2

To make your popups work correctly, add the class 'relative' to your triggers (.popup{ position: relative; } and assign the class 'absolute' to the dropdowns (.popup ul{ position: absolute; }). This will allow you to position the drop downs within the boundaries of the triggers using properties such as left:, right;, etc.

Answer 3

Answer №2

To utilize absolute positioning, you need to ensure that the popup divs are placed inside the a tags.

  <a href="#language">English
  <div class="popup" id="language">
    <ul>
      <li>Portuguese</li>
      <li>English</li>
      <li>French</li>
    </ul>
  </div>
  </a>

Afterwards, you can position the a tags accordingly.

.wrap a {
  position: relative;
}

Next, adjust the positioning of the pop-up divs.

.popup {  
  border: 1px solid red;
  display: inline;
  display: none;
  background-color: #D0D0D0;
  color: #404040;
  position: absolute;
  padding: 0; 
  margin: 0;
  top: 100%;
}

Demo on Codepen

Answer 4

To utilize absolute positioning, you need to ensure that the popup divs are placed inside the a tags.

  <a href="#language">English
  <div class="popup" id="language">
    <ul>
      <li>Portuguese</li>
      <li>English</li>
      <li>French</li>
    </ul>
  </div>
  </a>

Afterwards, you can position the a tags accordingly.

.wrap a {
  position: relative;
}

Next, adjust the positioning of the pop-up divs.

.popup {  
  border: 1px solid red;
  display: inline;
  display: none;
  background-color: #D0D0D0;
  color: #404040;
  position: absolute;
  padding: 0; 
  margin: 0;
  top: 100%;
}

Demo on Codepen

Answer 5

Answer №3

Give this a shot:

$('button').on('click', function (event) {
    $('.modal').hide();
    var modal = $($(this).attr('data-target'));
    var position = $(this).position();

    $(modal).toggle();
    $(modal).css({
        'left': position.left,
        'top': position.top + 10
    })
    return false;
});

See the demo here

Answer 6

Give this a shot:

$('button').on('click', function (event) {
    $('.modal').hide();
    var modal = $($(this).attr('data-target'));
    var position = $(this).position();

    $(modal).toggle();
    $(modal).css({
        'left': position.left,
        'top': position.top + 10
    })
    return false;
});

Position dropdown elements using absolute alignment

Answer №1

Answer №2

Answer №3

See the demo here

Similar questions

Ensure to close the Ajax request from PHP before the script finishes executing

How to invoke a Struts 2 action synchronously using JavaScript

Can a fixed position element disregard its parent?

Calculate how frequently an element showcases a particular style

showing text from chosen selection with an additional element included in the output

Insert a new column at the start of the data table

Vertical alignment with flexbox not functioning properly in Internet Explorer 11

The second jQueryUI datepicker instance flickers and vanishes when the show() function is triggered

Images that adapt to different screen sizes

Straining data in text input fields using bootstrap

Having trouble with $.post request to a different domain in a node.js/express app running on port 8081

The navigation bar expands in height as the media width changes

Exploring the Depths of HTML with Jquery

Opening a dialogue box upon clicking a table row

Blank vertical gap among columns within Bootstrap 4

"Enhance security with the choice of NFC login on our web-based

Accessing XML files locally via JavaScript on Chrome or Internet Explorer, with compatiblity for Android mobile devices as well

What is the best way to instruct jQuery to disregard an empty server response?

Enhance your Morris.js charts by incorporating detailed notes and annotations

Sticking Table Headers in Bootstrap 4