SIR
목록으로

드롭다운 메뉴 적용관련 질문입니다. 채택완료

침침노하는자
프로필 보기이 회원 글보기이 회원의 댓글보기
 6년 전 조회 2,505
답변 2
목록

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

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

 

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

 

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

 

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

 

main1.php 소스코드

Copy 
<!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';">&times;</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 소스코드

Copy 
<?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';">&times;</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

Copy 
@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;
}

 

해결책좀 부탁드립니다.

 

 

 

#css #메뉴 #php #드롭다운

답변 2개

채택된 답변
+20 포인트

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

브라우저는 크롬입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사합니다.^^

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

댓글을 작성하려면 로그인이 필요합니다.

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

 

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

 

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

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

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고