There was a problem while developing 'Color Chip Random Placement Button', which is the main function of the website I am developing.
(1) First, the function of the color chip random placement button is to press this button to show or hide small squares placed in random locations.
There was a problem while applying the media query code for the mobile screen. For mobile design reasons, I have created another 'color chip random placement button' that can only be seen on the mobile screen. For this reason, there is a problem that small square color chips are not placed in random locations.
Only when the mobile screen ratio is present, the random color chip button is functionally normal and the curtain does not work if the desktop ratio is simultaneously. If I press the button on the desktop ratio, it is located at the top.
(2) Also, I would like to order a small square-string color chip to be randomly located only in the lower space, which code should I modify for this part?
(3) As for the coding problem, I would like to arrange the shop's submenu in the middle with the top menu, what should I do?
Before you give me your answer, I appreciate your help in advance.
And since I'm not a coding expert, I'd really appreciate it if you could give me a specific answer with a specific code.
I attach the design draft before and after pressing the color chip random placement button. I'd appreciate it if you could refer to the image and help me with coding.
<!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;
}
@media screen and (max-width: 800px) {
.gone{display: 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">
<div class="replat_mobile" >
<nav>
<a style="background-color: red;">
<button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button>
</a>
<a style="background-color: yellow;">
<img style="height: calc(20vw - 50px);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg">
</a>
<a style="background-color: blue;"> Eng </a>
</nav>
</div>
<header>
<div class="logo gone" style="border-right: 1px solid black;">Logo</div>
<nav>
<a href="#" style="border-right: 1px solid black; background-color:yellow;" class="music">About</a>
<a href="#" style="border-right: 1px solid black; background-color:yellow;" class="music">Exibition</a>
<li class="music">
<a href="#" class="music" style="background-color: yellow;">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" 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" 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>
Aucun commentaire:
Enregistrer un commentaire