드롭다운 메뉴 적용관련 질문입니다.

드롭다운 메뉴 적용관련 질문입니다.

QA

드롭다운 메뉴 적용관련 질문입니다.

본문

드롭다운 메뉴를 만들고, 창을 띄워 적용시켜 보았습니다.

http://www.twolive.com/main1.php

 

잘 적용이 되었습니다. 그런데 문제는 저 창을 본 메인화면 index.php에 적용시키면 창은 뜨는데 드롭다운메뉴가 적용이 안됩니다.

 

http://www.twolive.com/index2.php

 

이 문제때문에 이것저것 많은 시간을 투자하였지만 해결방법을 모르겠습니다. ㅠㅠ

 

main1.php 소스코드


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="book/css/style.css">
</head>
<body>
<h2>아래 버튼 클릭하세요</h2>
<div>
<a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='block';"><img src="images/mbg.png"></a>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close"><a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='none';">×</a></span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <object width="100%" height="100%" data="http://www.twolive.com/book/main.html"></object>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
</body>
</html>

 

index.php 소스코드


<?php
include_once('./_common.php');
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
    require_once(G5_THEME_PATH.'/index2.php');
    return;
}
if (G5_IS_MOBILE) {
    include_once(G5_MOBILE_PATH.'/index2.php');
    return;
}
include_once(G5_PATH.'/head2.php');
?>
<!-- section 시작 { -->
   <div>
    <h2>아래 버튼 클릭하세요</h2>
    <a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='block';"><img src="images/mbg.png"></a>
    </div>
   
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close"><a href = "javascript:void(0)" onclick = "document.getElementById('myModal').style.display='none';">×</a></span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <object width="100%" height="100%" data="book/main.html"></object>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
   <!-- } section 끝 -->
<?php
include_once(G5_PATH.'/tail2.php');
?>

 

style.css


@charset "utf-8";
/* CSS Document */
/* Fixed sidenav, full height */
.sidenav {
  height: auto;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ede7dc;
  overflow-x: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 17px;
  color: #645637;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  line-height: 170%;
  cursor: pointer;
  outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #064579;
}
/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
  background-color: #866c43;
  color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #c2ab87;
  padding-left: 5px;
}
.dropdown-container a {
  font-size: 14px;
  line-height: 140%;
  color: white;
} 
/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
.modal-body {
  padding: 2px 16px;
  height: 700px;
}
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

 

해결책좀 부탁드립니다.

 

 

 

이 질문에 댓글 쓰기 :

답변 2

작성해주신 링크 둘다 클릭해서 드롭다운 버튼 클릭시 정상적으로 레이어 팝업뜨던데요??

브라우저는 크롬입니다.

답변 감사합니다.^^

레이어 팝업은 다 뜨고요. 레이어 팝업창에서 드롭다운이 적용이 안되요. 방금 확인해보니
크롬에서는 정상적으로 팝업창에서 드롭다운 적용되네요.
익스플로러에서는 팝업창에서 드롭다운이 적용이 안되네요..ㅠㅠ

크롬에서 둘다 정상적으로 팝업창에서 드롭다운 메뉴가 적용되는걸로 힌트를 얻어 해결했습니다.

 

메타 태그가 문제였습니다. 

 

<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">이 태그를 삭제하니

익스플로러에서도 드롭다운메뉴가 적용이 되네요.

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,027
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT