Guide to showing a dropdown menu or any div on the right side of the screen

Question

Guide to showing a dropdown menu or any div on the right side of the screen

I need help with displaying a menu that should appear from the right edge of the screen.

Previously, I had a script to show the menu where the user clicked. However, for this specific menu, I adjusted the position by subtracting some pixels from the click coordinates. But I am not satisfied with this approach for two reasons:

I want the menu to always be displayed at a static distance from the right edge (let's say 10px)
I don't want to manually calculate the right edge of the screen and subtract the menu width as it may not work well on different devices.

I tried using right: 10; but it doesn't seem to work as expected. Any suggestions?

$('#cross').on('click', function (e) {

        // coordinates to display the menu
        var top = e.pageY;
        var left = e.pageX;
        left = left - 150;

        // Display the menu 
        $("#cross-menu").css({
            display: "block",
            position: "fixed",
            top: "calc(3.5rem)",
            left: left
        }).addClass("show");

        return false;
    });

Code: https://jsfiddle.net/7ysp46xv/8/

html jquery css bootstrap-4

Answer 1

Answer №1

Instead of overloading your jQuery code with unnecessary CSS settings for the dropdown menu, utilize Bootstrap classes which are designed to handle most styling aspects effectively.

By incorporating Bootstrap's existing class called show into your menu via jQuery, you only need to make minor adjustments utilizing a custom class:

#cross-menu.show {
    right: 10px; 
    left:  auto; /* removing the full-screen left position */
    top:   auto; /* removing the position at 100% */
}

To enable this behavior in jQuery, simply apply the show class as follows:

$('#cross').on('click', function (e) {
        $("#cross-menu").addClass("show");
});

Example in Action:

$('#cross').on('click', function (e) {
        $("#cross-menu").addClass("show");
});

.hamburger {
    height: 80%;
    width: 2rem;
    border: 1px solid white;
    padding: 0px 5px;
    border-radius: 5px;
}

.hamburger div {
        margin: 0.4rem 0px;
        border: 1px solid white;
        background-color: white;
        border-radius: 5px;
}

.link-simple {
  cursor: pointer;
}

#cross {
  cursor: pointer;
}

#cross-menu {
  background-color: gray;
  color: white;
}
#cross-menu.show {
top:auto;
right:10px;
left:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><html>
  <body>
    <nav class="navbar navbar-dark bg-dark justify-content-center text-light" style="height: 3.5rem;">

    <!-- Hamburger Menu-->
    <div class="col-2 col-sm-4 align-content-start">
        <div class="hamburger link-simple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <!-- Topic Name -->
    <div class="col-9 col-sm-4 text-center">
        <span class="navbar-brand mb-0 h1">Heading</span>
    </div>

    <!-- User Info / Menu -->
    <div class="col-1 col-sm-4 text-right align-content-end" id="cross">
        X
    </div>

</nav>

<div class="dropdown-menu dropdown-menu-sm" id="cross-menu">
    <a class="dropdown-item pl-3"><i class="fa fa-gear mr-4"></i>Settings</a>
    <a class="dropdown-item pl-3"><i class="fa fa-sign-out mr-4"></i>Logout</a>
</div>


  </body>
</html>

Answer 2

Instead of overloading your jQuery code with unnecessary CSS settings for the dropdown menu, utilize Bootstrap classes which are designed to handle most styling aspects effectively.

By incorporating Bootstrap's existing class called show into your menu via jQuery, you only need to make minor adjustments utilizing a custom class:

#cross-menu.show {
    right: 10px; 
    left:  auto; /* removing the full-screen left position */
    top:   auto; /* removing the position at 100% */
}

To enable this behavior in jQuery, simply apply the show class as follows:

$('#cross').on('click', function (e) {
        $("#cross-menu").addClass("show");
});

Example in Action:

$('#cross').on('click', function (e) {
        $("#cross-menu").addClass("show");
});

.hamburger {
    height: 80%;
    width: 2rem;
    border: 1px solid white;
    padding: 0px 5px;
    border-radius: 5px;
}

.hamburger div {
        margin: 0.4rem 0px;
        border: 1px solid white;
        background-color: white;
        border-radius: 5px;
}

.link-simple {
  cursor: pointer;
}

#cross {
  cursor: pointer;
}

#cross-menu {
  background-color: gray;
  color: white;
}
#cross-menu.show {
top:auto;
right:10px;
left:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><html>
  <body>
    <nav class="navbar navbar-dark bg-dark justify-content-center text-light" style="height: 3.5rem;">

    <!-- Hamburger Menu-->
    <div class="col-2 col-sm-4 align-content-start">
        <div class="hamburger link-simple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <!-- Topic Name -->
    <div class="col-9 col-sm-4 text-center">
        <span class="navbar-brand mb-0 h1">Heading</span>
    </div>

    <!-- User Info / Menu -->
    <div class="col-1 col-sm-4 text-right align-content-end" id="cross">
        X
    </div>

</nav>

<div class="dropdown-menu dropdown-menu-sm" id="cross-menu">
    <a class="dropdown-item pl-3"><i class="fa fa-gear mr-4"></i>Settings</a>
    <a class="dropdown-item pl-3"><i class="fa fa-sign-out mr-4"></i>Logout</a>
</div>


  </body>
</html>

Answer 3

Answer №2

After a bit of experimentation with your code, here's the modified version that worked perfectly:

$("#cross-menu").css({
    display: "block",
    position: "fixed",
    top: "calc(3rem)",
    right: "10px",
    left: 'auto',
    'max-width': "150px",
}).addClass("show");

Answer 4

After a bit of experimentation with your code, here's the modified version that worked perfectly:

$("#cross-menu").css({
    display: "block",
    position: "fixed",
    top: "calc(3rem)",
    right: "10px",
    left: 'auto',
    'max-width': "150px",
}).addClass("show");

Answer 5

Answer №3

Give this a shot:

$('button').click(function(){
  $('#menu').animate({
    right: 0
  }, 300);
});

$('li').click(function(){
  $('#menu').animate({
    right: -80
  }, 300);
});

*{box-sizing:border-box;}
body{margin:0;}
button{margin:10vh 0 0 49vw;}
#menu{
  position:fixed;
  width: 80px;
  top:10;
  right: -80px;
}
ul{margin:0;padding:0;list-style-type:none;border:1px solid red;}
li{
  padding: 10px 25px;
  border:1px solid green;
}
li:hover{
  cursor: pointer;
  background: #ccc;
}
aside{
margin-top:10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="menu">
  <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
  </ul>
</div>
<button>Show Menu</button>
<aside>Insert links inside the LIs to make a menu</aside>

Answer 6

Give this a shot:

$('button').click(function(){
  $('#menu').animate({
    right: 0
  }, 300);
});

$('li').click(function(){
  $('#menu').animate({
    right: -80
  }, 300);
});

*{box-sizing:border-box;}
body{margin:0;}
button{margin:10vh 0 0 49vw;}
#menu{
  position:fixed;
  width: 80px;
  top:10;
  right: -80px;
}
ul{margin:0;padding:0;list-style-type:none;border:1px solid red;}
li{
  padding: 10px 25px;
  border:1px solid green;
}
li:hover{
  cursor: pointer;
  background: #ccc;
}
aside{
margin-top:10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="menu">
  <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
  </ul>
</div>
<button>Show Menu</button>
<aside>Insert links inside the LIs to make a menu</aside>

Answer 7

Answer №4

My suggestion for solving your issue is to avoid using a fixed position for dropdowns unless absolutely necessary. Instead, consider using absolute positioning.

In regards to your specific requirement, rather than subtracting the left width, you can use left:auto; and right:5%; to accommodate different device widths.

YOUR CODE: position: "fixed", top: "calc(3.5rem)", left: left,

CHANGES I SUGGEST: position: "absolute", top: "calc(3.5rem)", left: "auto", right: "5%"

I hope these suggestions are helpful in resolving your problem.

Answer 8

My suggestion for solving your issue is to avoid using a fixed position for dropdowns unless absolutely necessary. Instead, consider using absolute positioning.

In regards to your specific requirement, rather than subtracting the left width, you can use left:auto; and right:5%; to accommodate different device widths.

YOUR CODE: position: "fixed", top: "calc(3.5rem)", left: left,

CHANGES I SUGGEST: position: "absolute", top: "calc(3.5rem)", left: "auto", right: "5%"

I hope these suggestions are helpful in resolving your problem.

Guide to showing a dropdown menu or any div on the right side of the screen

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Modifying the background color in HTML to match user input: A step-by-step guide

Preventing hyperlinks within a table from being recognized as the selected table row

Obtain the Xpath for the element with a certain tag located closest to the given element in its immediate surrounding

Engaging Resources for Introducing Children to Javascript Programming

Code in jQuery or JavaScript to retrieve precise node information for the currently selected form field, text, or image on a webpage

Using HTML strings in JavaScript code

How can you link a Razor Function to a JavaScript Variable?

Aligning images vertically within floated elements

The JavaScript code for summing two numbers is not functioning as expected

Sending a parameter to a form within Edge Animate

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

Steps for showcasing stars (1-5) based on the data stored in the database

The background image is not displaying correctly on mobile devices

Binding data to a dropdown menu

When attempting to parse a JSON feed with jQuery and innerHTML, the data fails to display

Is there a way to direct ASP.NET Ajax BeginForm?

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

Customize the text color across all sections of the application in ExtJS 6

Tips for grabbing the "Leave Page" button for unrecorded modifications within Firefox?

Jquery auto-suggest form validator