Question

我发布一个问题是因为我在编码时遇到了问题。

我想修改代码，使“商店”子菜单 div 位于顶部菜单（“商店”）及其对齐方式的中心。找了几次，试了几次，都失败了，所以发了。我会上传我想要的设计草图图片和代码。

如果您能看一下并解释如何使用特定代码修改代码，我将不胜感激。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">

    
    <style type="text/css">


        body{margin-top: 0px; margin-right: 0px; margin-left: 0px;}

        /*호버 메뉴 컬러 변화*/
        .active { background: #edd6bc }
        .hover { background: #edd6bc }


        button {position: relative; width: 30px; height: 30px; background: #edd6bc; border: none; }
        .random {position: absolute; width: 30px; height: 30px; cursor: move;}

        .container {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
        }

        header {
          display: grid;
          grid-template-columns: 1fr 7fr;
          grid-template-rows: 1fr 1fr;
          grid-template-areas: "logo nav" "logo notice";
        }

        .logo {
          grid-area: logo;
          padding: 10px;
          text-align: center;
          border-bottom: 1px solid black;
        }

        .notice {
          grid-area: notice;
          padding: 10px;
        }

        main {
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          grid-template-rows: repeat(8, 1fr);
        }

        main>div {
          padding: 10px;
          text-align: center;
        }

        nav {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          grid-area: nav;
        }

        nav a {
          padding: 10px;
          text-align: center;
        }
        
        /*shop과 서브메뉴 드랍*/

        li {    
          border-right: 1px solid black;    
          text-align: center;
          background-color: white;
          padding: 37px;
        }

        nav ul{
            list-style: none;
        }
        
        nav ul li {
            display: inline-block;
            list-style-type: none;
        }

        nav li > ul{
            display : none;
        }

        nav li > ul li{
            display: block;
        }

        nav  li > ul li a {
            color: #111;
            display: block;
            line-height: 2em;
            padding: 0.5em 2em;
            text-decoration: none;
        }

        nav li:hover {
            background-color: #edd6bc;
        }
        
        nav li:hover > ul{
            position: absolute;
            display : block;
        }


        li.music {
          list-style: none;
        }

        .sub_nav{width: 100%; border: 1px solid black;}

        .replat_mobile {
            display: none;
        }

        .center{
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile_nav{
            border-bottom: 1px solid black;
            padding: 24px;
        }




        @media screen and (max-width: 800px) {
        
            .gone{display: none;}
              
            .border_shop{border-right: none;}

            nav{width: 100vw;}
              
            .replat_mobile {
                clear: both;
                display: block;
                float: left;
                margin-left: 0px;
                width: 10px;          
            }

            .container {
              display: grid;
              grid-template-columns: 1fr;
              grid-template-rows: 1fr;
            }

            header {
              display: grid;
              grid-template-columns: 1fr 3fr;
              grid-template-rows: 1fr 1fr;
              grid-template-areas: "logo nav" "logo notice";
            }

            nav {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-area: nav;
            }

            .notice {
              grid-area: notice;
              padding: 10px;
            }

            nav a {
              padding: 10px;
              text-align: center;
            }

            main {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              grid-template-rows: repeat(4, 1fr);
            }

            main>div {
              padding: 10px;
              text-align: center;
            }


        }



    </style>

<!--전시 컬러칩 드레그 이동 z-index 변경-->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
          
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

        <script type="text/javascript">
          $(window).load(function(){
          $(document).ready(function() {
            var a = 3;
            $('.random').draggable({
           start: function(event, ui) { $(this).css("z-index", a++); }
        });
          $('body div').click(function() {
                $(this).addClass('top').removeClass('bottom');
                $(this).siblings().removeClass('top').addClass('bottom');
                $(this).css("z-index", a++);

            });
        });
        });
    </script>

</head>


<body>

    <div class="container">

<!--모바일 화면 비율애서만 보이는 nav bar-->
        <div class="replat_mobile" >
          <nav>
            
            <a class="center mobile_nav">
                <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button> 
            </a>
            
            <a class="center mobile_nav"> 
                <img style="height: calc(5vw);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg"> 
            </a>
            
            <a class="center mobile_nav">
            Eng
            </a>
          </nav>
        </div>


        <header>
          
          <div class="logo gone center" style="border-right: 1px solid black;">
            <img style="height: calc(2.3vw);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg">   
          </div>
          
          <nav>
            <a href="#" style="border-right: 1px solid black; " class="music center">About</a>
            <a href="#" style="border-right: 1px solid black; " class="music center">Exibition</a>
            
            <li class="music border_shop">
                <a href="#" class="music">Shop</a>
                <ul>
                <li a href="#" class="sub_nav" style="margin-top: 35px;">리플랫</li>
                <li a href="#" class="sub_nav" style="margin-top: 13px;">작품</li>
                <li a href="#" class="sub_nav" style="margin-top: 13px;">MD</li>
                </ul>
            </li>
            
            <a class="gone"></a>
            <a class="gone"></a>
            
            <a href="#" class="gone center" style="border-left: 1px solid black;" >
                <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button" class="gone"></button>
            </a>

            <a href="#" class="gone music center" style="border-left: 1px solid black;">Eng</a>
          
          </nav>
          
          <div class="notice" style="border-top: 1px solid black; border-bottom: 1px solid black;" >Space for Notice</div>
        
        </header>
        

        <!--전시 컬러칩-->

        <div a href="#" style="display: none; background: #6d97b4;" class="random" ></div>
            
        <div a href="#" style="display: none; background: #c9656f;" class="random" ></div>
            
        <div a href="#" style="display: none; background: #f1eb40;" class="random" ></div>
            
        <div a href="#" style="display: none; background: #00825c;" class="random" ></div>
            
        <div a href="#" style="display: none; background: #009ce0;" class="random" ></div>
            
        <div a href="#" style="display: none; background: #cee4a6;" class="random" ></div>
 
    </div>



    <script type="text/javascript">

            const btn = document.querySelector("button");
            const height = document.documentElement.clientHeight;
            const width = document.documentElement.clientWidth;
            const boxes = document.querySelectorAll(".random");

            btn.addEventListener("click", () => {
              Array.from(boxes).forEach(box => {
                const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
                const right = Math.floor(Math.random() * (width - 30) + 1) + "px";

                box.style.top = top;
                box.style.right = right;
              })
            });

            function showhide() {
              var x = document.querySelectorAll(".random");
              var i;
              for (i = 0; i < x.length; i++) {
                if (x[i].style.display === "block") {
                  x[i].style.display = "none";
                } else {
                  x[i].style.display =
                    "block";
                }
              }
            }

            //draggable

            function mouseDown(downEvent) {
              var box = downEvent.srcElement;
              var offX = box.getBoundingClientRect().left - downEvent.x;
              var offY = box.getBoundingClientRect().top - downEvent.y;
              document.onmousemove = e => {
                box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
                box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
              }
              document.onmouseup = e => {
                document.onmousemove = document.onmouseup = null;
              }
              return false;
            }

            Array.from(boxes).forEach(box => {
              box.onmousedown = mouseDown;
            })


            //호버 혹은 클릭 시, div 컬러 변화
            
            $(".music").hover(
                function() {
                    $(this).addClass("hover");
                }, function() {
                    $(this).removeClass("hover");
                }
            );

            $(".music").click(function() {
                $('#result').load('album_list_index.php');
                $(".music").removeClass("active");
                $(this).removeClass("hover").addClass("active");
            });
    
    </script>

</body>
</html>

Answer 1

您可以重新设计子菜单。

把它放在菜单之外，就像一个单独的元素。
然后很容易将它居中（使用开发工具检查这里的居中 -> https://www.studioborletto.it/）

Answer 2

带有下拉菜单的响应式 Topnav

enter link description here

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

以顶部菜单居中子菜单

2 个答案: