如何解决以顶部菜单居中子菜单
我发布一个问题是因为我在编码时遇到了问题。
我想修改代码,使“商店”子菜单 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,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>
解决方法
您可以重新设计子菜单。
- 把它放在菜单之外,就像一个单独的元素。
- 然后很容易将它居中(使用开发工具检查这里的居中 -> https://www.studioborletto.it/)
带有下拉菜单的响应式 Topnav
<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.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()">☰</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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。