Ways to ensure that my drop-down menu stays correctly positioned in line with my element?

I have successfully created a drop-down menu that appears when clicking on text with the class trigger to open it. However, I am facing an issue with aligning the menu correctly in my responsive page design: http://prntscr.com/7gw5ox

As I resize the page: http://prntscr.com/7gw5wd

Below is the HTML code for the drop-down menu placed at the bottom of my page:

    <div id="help-down-down-menu" class="drop-down-menu">
        <ul>
            <li>
                <a href="faq.php">Frequently Asked Questions</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
        </ul>
    </div>

Also, here is the footer code containing the text that triggers the drop-down menu:

    <div id="footer">
        <div class="wrapper">
            <ul>
                <li>
                    <span class="drop-down-menu-trigger" id="help">Help</span>
                </li>
            </ul>
            <span id="footer-copyright">
                <a href="./..">Coded by Dylan - ©2015-2016</a>
            </span>
        </div>
    </div>

Attached below is the JavaScript code snippet:

(function($)
{
    $(".drop-down-menu-trigger").click(function(e)
    {
        e.preventDefault();
        $(".drop-down-menu").css({"visibility": "visible"});
    });
})(jQuery);

And finally, the CSS styling for the drop-down menu:

.drop-down-menu
{
    background-color: #FFFFFF;
    box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    text-align: center;
    position: absolute;
    top: 150%;
    left: 500px;
    visibility: hidden;
}

.drop-down-menu:after
{
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #FFFFFF;
}

.drop-down-menu a
{
    display: block;
    color: #000000;
    padding: 10px;
}

.drop-down-menu a:hover
{
    background-color: #F5F5F5;
}

.drop-down-menu #faq:before
{
    content: "\f059";
    font-size: 18px;
    margin-right: 5px;
}

Answer №1

To make changes to your code, follow these instructions:

HTML : Update the HTML Code after Footer Comments as shown below:

<div class="drop-display">
    <div id="help-down-down-menu" class="drop-down-menu">
        <ul>
            <li>
                <a class="modal-window-trigger" name="modal-window-faq" id="faq" href="faq.php">Frequently Asked Questions</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
        </ul>
    </div>
</div>

<div id="footer">
    <div class="wrapper">
        <ul>
      <!-- +++++++++++++++++++++++++++++++++ ADDED & UPDATED +++++++++++++++++++++++++++++ -->
            <li>
                <span class="drop-down-menu-trigger" id="help" onclick="getPos(this)">Help</span>
            </li>
            <li>
                <span class="drop-down-menu-trigger" id="test" onclick="getPos(this)">Help</span>
            </li>
      <!-- +++++++++++++++++++++++++++++++++ ADDED & UPDATED +++++++++++++++++++++++++++++ -->
        </ul>
        <span id="footer-copyright">
            <a href="./..">Coded by Dylan - ©2015-2016</a>
        </span>
    </div>
</div>
<div id="modal-window-faq" class="modal-window">
    ...
    ...
    ... <!-- Your existing code here -->
</div>
<div id="expose-mask"></div>
<script src="javascript/scripts.js"></script>
</div>
</div>
</body>
</html>

CSS

1) Add Class: drop-display,

2) Remove 1 drop-down-menu class that was repeating and make necessary modifications.

.drop-display
{
    display: block;
    width: 100%;
    //text-align: center; REMOVE THIS LINE
    position: absolute; /* CHANGED FROM absolute */
    z-index: 999;
}

.drop-down-menu 
{
    display:inline-block;
    background-color: #FFFFFF;
    box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    text-align: center;
    position: relative; /* Change from absolute to relative */
}

JQuery

1) Add line to hide drop-down-menu on page load

2) Modify code for Visibility using fadeIn() OR fadeToggle()

$(".drop-down-menu").hide(); // Place at beginning of scripts.js file
function getPos(elems) 
{
    var x = elems.offsetLeft, y = elems.offsetTop;
    var curId = event.target.id;
    var hw = $("#" + curId ).width();
    var dw = $(".drop-down-menu").width();
    var dh = $(".drop-down-menu").height();
    var temp = dw/2;
    var tempx = hw/2;
    var xPos = x - temp + tempx;
    var yPos = y - dh - 20;
    $(".drop-display").css("left", xPos + "px");
    $(".drop-display").css("top", yPos + "px");

    $(".drop-down-menu").fadeToggle();
}

If you encounter any issues, don't hesitate to seek further assistance.

UPDATE :

HTML - Added another ul with onclick event

CSS - Removed text-align:center line and changed position to absolute.

JQuery - Complete overhaul

Answer №2

Try using jQuery to update the position when resizing.

var $menu = $('#help-down-down-menu');     
var $trigger = $('#help');

$(window).on('resize', setPosition);

var setPosition = function() {
  var offset = $trigger.offset().left;

  $menu.css('left', offset);
};

Something along those lines.

UPDATE

I apologize, but do not rely on jQuery for this task.

The issue lies in #help-down-down-menu being positioned absolute, but is actually relative to its parent element, #site-pusher.

Try moving #help-down-down-menu inside #footer-copyright.

HTML

<span class="drop-down-menu-trigger" id="help">
 Help

  <div id="help-down-down-menu" class="drop-down-menu" style="visibility: visible;">

     ...   

  </div>

</span>

CSS

#help {
  position: relative;
}
#help-down-down-menu {
  position: absolute;
  /* remove all other properties */
}

Begin with these adjustments.

Answer №3

To properly place the dropdown elements within the footer, you should first nest them inside the footer element. Next, apply a position: relative style to the footer element and utilize the following CSS properties:

    left: 50%;
    top: -90%;
    transform: translate(-50%, -90%);

This will effectively position the dropdown element as desired.

You can view an example on jsfiddle: https://jsfiddle.net/mf8mgw5d/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Basic AngularJS application, however I am receiving {{this is supposed to be the information}}

Building an angularjs app I have set up an asp.net mvc4 application and integrated the angularjs package using nuget. The Layout.cshtml file has been updated to look like this: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta ...

The onClick function designed to trigger the Material UI dialog box is experiencing functionality issues

Is there a bug in the component? The material-ui dialog-box sometimes pops up on button click and shows the target value perfectly, but other times it doesn't. I am passing the value on the icon onclick event - (e) and using it in the onClick function ...

Using React Native to display an SVG path inside an SVG viewbox

I'm working on incorporating a barcode scanner viewfinder with an SVG icon to enhance its appearance. However, I am facing difficulty in making the path element within the SVG take up the full width and height of the SVG. In my React Native project, I ...

Change a comma delimited string into a JSON formatted array

Is there a way to convert a string of comma separated values into valid JSON format using either PHP or jQuery? The comma separated strings are currently stored in a database and have the following structure: Singapore,Andora,Australia The desired outpu ...

JavaScript: exporting everything from ... causing excessive bloat in the build file

After building my react-app with create-react-app, I noticed a decline in performance. Here is the structure of my project: /store actions.ts reducers.ts /module1 module1.actions.ts module1.reducers.ts /moduleN moduleN.actions.ts m ...

The image on Bootstrap isn't showing up

Can someone please help me troubleshoot why my logo image is not showing up? I can't figure out why the min and max width/height parameters are not working as intended. Here is my HTML: <div class="container-fluid"> <div class="head"> ...

Combining :not() and :first-child in element selection is not supported

While working on CSS, I encountered an issue. I am using a combination of :not(.class) selector and :first-child selector. Individually they work fine. The row that should be red is not turning red. Here is the code snippet: table tr td { background: ...

Is there a way to obtain a user's screen size without relying on a physical device or measuring the diagonal?

I'm looking for a way to display something at its actual size on a browser. For instance, if something appears to be 20cm on the screen, I want it to truly measure up to 20cm. Some methods involve considering the diagonal resolution of the screen, li ...

React forms are experiencing issues with characters overlapping

Having trouble with overlapping label and input letters in my React form. Looking for: The appearance shown in the top image Experiencing: What is displayed in the bottom image Any solutions on how to resolve this issue? https://i.sstatic.net/Y3W2m.png ...

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

How come the back button does not initiate client-side navigation in a Next.js application?

In my Next.js application utilizing GraphQL to fetch articles from a server, I encountered an issue with dynamic routing when reloading the page while on an article and attempting to navigate back. The usual scenario works as expected: Index -> [slu ...

ReactJS fetching previous data through POST request

I am facing an issue while trying to replicate Google Translate. I have an API that sends and returns data as expected during the first translation attempt. However, after changing the text and attempting another translation, it sends the updated text but ...

Only displaying the VUE slot when the content meets a certain criteria

I have encountered a situation where I have two routes rendering the same component but with different data from an API source. The component in question has a child component called <base-section> that utilizes a v-if directive to determine whether ...

Tips for generating a server error during the retrieval of JS files

I'm a beginner in JavaScript and I've been given a task to send an email input from a form to a node server. Everything is working correctly, but there's one requirement I need to implement: Whenever the entered email is [email protec ...

Using HTML: The trick to obtaining selection offsets in relation to HTML tags

Let's say I have HTML code like this: <div> <p> start<span>span</span>end </p> </div> I am looking for a way to retrieve the offsets when text is selected, while still taking into account the presence of span ...

PHP DOMDocument - Script tag containing Chinese characters is improperly formatted

Can anyone help me figure out why my PHP DomDocument is converting Chinese characters inside a script tag to strange symbols in the output? <?php $html = <<<EOD <!DOCTYPE html> <html> <head> <script> ...

Encountering an error in React Native: Unable to access property 'length' as it is

Currently, I am working on developing a registration application and I have encountered some issues in the final phases when attempting to submit the new data to the server. Below is the script I am using: import React from 'react'; import React ...

Is there a way to make the div visible with just one click instead of two?

var sections = ["intro", "content"]; var visibleSectionId = null; function toggleVisibility(sectionId) { if (visibleSectionId == sectionId) { visibleSectionId = null; } else { visibleSectionId = sectionId; } hideInvisibleSe ...

Steps to activate checkbox upon hyperlink visitation

Hey there, I'm having a bit of trouble with enabling my checkbox once the hyperlink has been visited. Despite clicking the link, the checkbox remains disabled. Can anyone provide some guidance on how to get this working correctly? <script src=" ...

Having trouble with custom padding for b-sidebar in VueJS?

I am struggling with adding padding to the sidebar using bootstrap-vue. When I attempt to add padding in the browser devtools, it works perfectly fine. However, when trying to implement the same code, it doesn't reflect on the actual webpage. I tried ...