我怎样才能在按钮上方获得这个菜单？

问题描述 投票：0回答：1

目前的菜单出现在按钮下方和页脚内，而不是在其他内容之上或之上。我真的很感谢我在这里用谷歌搜索和搜索的任何帮助，但没有找到任何我能理解的帮助。

这是我的按钮和菜单，如果有人可以帮助我解决我做错的事情，我将不胜感激，谢谢您的时间。

<!doctype html>
<div id="menu-container" style="position: relative; display: inline-block;">
                        <a id="menu-toggle" class="pHiOh" href="javascript:void(0);">Settings</a><div class="j-menu">

    <div class="ja-menu">
    <a class="ja-menu-item" href="#">Search settings</a>
    <a class="ja-menu-item" href="#">Advanced search</a>
    <a class="ja-menu-item" href="#">Your data in Search</a>
    <a class="ja-menu-item" href="#">Search history</a>
    <a class="ja-menu-item" href="#">Search help</a>
    <a class="ja-menu-item" href="#">Send feedback</a>
     <div class="ja-divider"></div>
    <div class="ja-menu-item ja-toggle-container">
        <span>Dark theme:</span>
        <label class="ja-switch">
            <input type="checkbox" id="j-dark-theme-toggle">
            <span class="ja-slider round"></span>
        </label>
    </div>
</div>


<style>
.ja-menu {
    width: 154.5px;
    height: 238px
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0; /* Remove padding here and let .j-menu-item handle it */
    border-radius: 10px;
    box-sizing: border-box;
}

    .ja-menu-item {
    display: block;
    padding: 10px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s;
    ont-size: 14px;
    font-family: arial, sans-serif;
    color: #202124;
    box-sizing: border-box;
    
}
    .ja-menu-item-text {
    text-align: left; /* Align the text to the left */
}


.ja-menu-item:hover {
    background: #DADCE0;
}

.ja-divider {
    height: 1px;
    background-color: #DADCE0;
    margin: 0; /* This ensures the divider does not extend into the padding area */
}

.ja-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px; /* Maintain consistent padding with .j-menu-item */
}

.ja-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.ja-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ja-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.ja-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.ja-switch input:checked + .j-slider {
    background-color: #2196F3;
}

.ja-switch input:focus + .j-slider {
    box-shadow: 0 0 1px #2196F3;
}

.ja-switch input:checked + .j-slider:before {
    transform: translateX(26px);
}

</style>
<script>

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('menu-toggle');
    const menu = document.querySelector('.ja-menu');

    // Initially hide the menu
    menu.style.display = 'none';

    toggleButton.addEventListener('click', function() {
        // Toggle menu visibility
        if (menu.style.display === 'none') {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    });
});

</script>`
javascript html css menu settings
1个回答
0
投票

将以下内联样式添加到

ja-menu
。喜欢-

<div class="ja-menu" style="position: absolute; bottom: 100%;">


document.addEventListener('DOMContentLoaded', function() {
  const toggleButton = document.getElementById('menu-toggle');
  const menu = document.querySelector('.ja-menu');

  // Initially hide the menu
  menu.style.display = 'none';

  toggleButton.addEventListener('click', function() {
    // Toggle menu visibility
    if (menu.style.display === 'none') {
      menu.style.display = 'block';
    } else {
      menu.style.display = 'none';
    }
  });
});
<style>.ja-menu {
  width: 154.5px;
  height: 238px background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  border-radius: 10px;
  box-sizing: border-box;
}

.ja-menu-item {
  display: block;
  padding: 10px;
  justify-content: center;
  text-decoration: none;
  transition: background 0.3s;
  ont-size: 14px;
  font-family: arial, sans-serif;
  color: #202124;
  box-sizing: border-box;
}

.ja-menu-item-text {
  text-align: left;
  /* Align the text to the left */
}

.ja-menu-item:hover {
  background: #DADCE0;
}

.ja-divider {
  height: 1px;
  background-color: #DADCE0;
  margin: 0;
  /* This ensures the divider does not extend into the padding area */
}

.ja-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  /* Maintain consistent padding with .j-menu-item */
}

.ja-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.ja-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ja-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.ja-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.ja-switch input:checked+.j-slider {
  background-color: #2196F3;
}

.ja-switch input:focus+.j-slider {
  box-shadow: 0 0 1px #2196F3;
}

.ja-switch input:checked+.j-slider:before {
  transform: translateX(26px);
}
<div style="margin-top: 500px"></div>
<div id="menu-container" style="position: relative; display: inline-block;">
  <a id="menu-toggle" class="pHiOh" href="javascript:void(0);">Settings</a>
  <div class="j-menu">

    <div class="ja-menu" style="position: absolute; bottom: 100%;">
      <a class="ja-menu-item" href="#">Search settings</a>
      <a class="ja-menu-item" href="#">Advanced search</a>
      <a class="ja-menu-item" href="#">Your data in Search</a>
      <a class="ja-menu-item" href="#">Search history</a>
      <a class="ja-menu-item" href="#">Search help</a>
      <a class="ja-menu-item" href="#">Send feedback</a>
      <div class="ja-divider"></div>
      <div class="ja-menu-item ja-toggle-container">
        <span>Dark theme:</span>
        <label class="ja-switch">
            <input type="checkbox" id="j-dark-theme-toggle">
            <span class="ja-slider round"></span>
        </label>
      </div>
    </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.