Блог

Главная - Вопросы по программированию - Как отобразить выпадающее меню или любой раздел на правом краю экрана

Как отобразить выпадающее меню или любой раздел на правом краю экрана

#html #jquery #css #bootstrap-4

#HTML #jquery — запрос #css — файл #bootstrap-4 #jquery #css

Вопрос:

Я пытаюсь отобразить меню, которое должно отображаться с правого края экрана.

У меня уже был скрипт для отображения меню в том месте, где пользователь нажимает. Для этого меню я вычел несколько пикселей из координаты, по которой пользователь нажал. Но мне это не нравится по двум причинам:

  • Я хочу, чтобы мое меню всегда отображалось в статическом положении справа (скажем 10px )
  • Я не хочу кодировать, где мне нужно найти правый край экрана и вычесть ширину моего меню, так как это не будет зависеть от устройства.

Я пробовал с right: 10; , но это, как ни странно, похоже, не работает. Есть идеи?

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

        // co-ordinates 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;
    });

Код:
https://jsfiddle.net/7ysp46xv/8 /

Ответ №1:

Вам не нужно устанавливать много CSS в jQuery в выпадающем меню — классы начальной загрузки уже настроили большую часть этого, чтобы работать так, как вы хотите.

В Bootstrap есть класс с именем show , который вы уже добавляете в меню в своем jQuery. Вам просто нужно внести в него несколько небольших изменений — вы можете добавить их в пользовательский класс:

 #cross-menu.show {
    right: 10px; 
    left:  auto; /* remove the left position so it won't use the full screen*/
    top:   auto; /* remove the position 100% */
}

Затем все, что вам нужно сделать в jQuery, это применить show класс:

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

Рабочий пример:

 $('#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>

Ответ №2:

Повозился с вашим кодом. Это то, что в итоге сработало:

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

Ответ №3:

Попробуйте это:

 $('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>Stick a tags inside the LIs to create a menu</aside>

Ответ №4:

Я думаю, что это решит вашу проблему. Во-первых, я не рекомендую, чтобы выпадающие списки имели position: «fixed», если это не необходимо, вместо этого вы можете использовать position: absolute;

Теперь, глядя на ваше требование, вместо вычитания ширины слева, вы можете использовать left: auto; и right: 5%; (независимо от%, который вам нужен). Это также будет адаптироваться к разной ширине устройства.

ВАШ КОД: позиция: «исправлена», вверху: «calc (3.5rem)», слева: слева,

ИЗМЕНЕНИЯ, КОТОРЫЕ я ПРЕДЛАГАЮ: позиция: «абсолютная», вверху: «вычисление (3.5rem)», слева: «авто», справа: «5%»

Я надеюсь, что это может вам помочь.