풀다운 메뉴 반응형으로 만들기

풀다운 메뉴 반응형으로 만들기

QA

풀다운 메뉴 반응형으로 만들기

본문

안녕하세요. 풀다운 메뉴바를 구상했는데 해당 메뉴를 반응형으로 만들고 싶습니다. width를 100%로 감싸도 되지 않는데 어떤 부분이 문제인지 여쭙고 싶습니다.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>                                                                                                
<head>                                                                                                
<%@ page language="java" contentType="text/html; charset=euc-kr" %>
<%@ include file="../include/jstl.jsp"%>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');
body{
    width:100%;
}
.top{
  text-align: center; 
  margin: auto;
  width:100%;
}
.top_td {
  width:500px;
  color:gray;
}

.top_td span {
  cursor:pointer;
  font-size: 11px;
}

.top_btn>li{display:inline-block;}

/*img {display: block; margin: 0px auto;}*/
* {margin: 0; padding: 0; }
li {list-style: none; }
body {
  font-family: 'Nanum Gothic'; 
  width: 1663px; 
  margin: 0 auto; 
}
            
.topMenu { 
  position:relative; 
  width: 100%; 
  text-align: center; 
  height: 40px; 
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
}

.topMenu:after { 
  position:absolute; 
  content: ""; 
  display: block; 
  clear: both; 
}

.menu01>li {
 
  display:inline-block;  
  z-index:99; 
  width: 11.22%; 
  line-height: 40px;
  font-size: 14.5px;
  cursor:pointer;
  background-color:white;
  margin-left:-6px;
}

.menu01 span {
  font-size: 15px; 
  font-weight: 800; 
  text-align: center;
  color: black;
  cursor:pointer;
}

.menu01 span:hover {
  color: #bb0000;
  padding: 0px 0px 8px 0px;
  border-bottom: 5px solid #bb0000;
}

.dept01 li {
  color: black; 
  
}

.dept01 li:hover {
  color: #bb0000; 
  
}
       
.dept01 {
  display: none; 
  padding: 20px 0; 
  border-bottom: 1px solid #ccc;
  background-color:white;
  opacity: 0.95;
  
  
  
}
            
#nop {
  float: none; 
}
            
.none:after {
  content: ""; 
  display: block; 
  clear: both; 
  z-index:98;
  
}

.hidden{
    visibility:hidden;
}


</style>
</head>
<script type="text/javascript" src="/js/action_main.js"></script>
<script type="text/javascript" src="/js/action.js"></script>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).on('mouseenter', '.topMenu span', function() {
    $('.dept01').slideDown(300);
});
$(document).on('mouseleave', '.menu01', function () {
  if(!$(this).hasClass('topMenu')) {
    $('.dept01').slideUp(300);
  }
});
</script>
<!-- top -->
<body>
<div class="top_logo">
  
    <table class="top">
      <tr>
        <td class="top_td"></td>
        <td class="top_td"><a href="/index_ngk.jsp"><img id="logoImg" src="images/logo.png" border="0" alt="logo"></a></td>
        <td class="top_td" align="left">
              <span style="padding:1px 25px 0px 100px;">JOIN</span>
              <span style="padding:1px 25px 0px 0px;">LOGIN</span>
              <span style="padding:1px 25px 0px 0px;">MY PAGE</span>
              <span style="padding:1px 25px 0px 0px;">Q&A<span>
        </td>
      </tr>
      
    </table>
</div>
<div class="topMenu">
    <ul class="menu01">
    <li><span></span>
            <ul class="dept01">
                <li id="nop" class="hidden">sub01</li>
                <li id="nop" class="hidden">sub02</li>
                <li id="nop" class="hidden">sub03</li>
                <li id="nop" class="hidden">sub04</li>
                <li id="nop" class="hidden">sub05</li>
            </ul>
        </li>

이 질문에 댓글 쓰기 :

답변 1

구현되 html을 보면 답을 드릴수 있을거 같아요 -

답변을 작성하시기 전에 로그인 해주세요.
전체 33
QA 내용 검색

회원로그인

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