묻고답하기

  2. Support
  3. 묻고답하기

드롭다운 메뉴바 길이...ㅠㅠㅠ

2015.08.17 13:34

bb

홈페이지를 만들고있는데 메뉴바를 만드는데 소스를 하나 다운받아서 수정해 사용하고 있습니다...

근데 그 메뉴 바 길이를 줄이려고 하는데 아무리 해도 안풀리네요 ㅠㅠ

(일단 전 엄청초보임...)

수정전 원메뉴는 메뉴바가 꽉차게 (이렇게) 보이고

GxXiUek.jpg

제가 하려는건 메뉴바 자체를 한 50%정도만 줄이려고합니다.

 

qxwAhOX.jpg

 

일단 소스코드는

  <link rel="stylesheet" href="styles.css"> 
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
  <script src="script.js"> 
  <title>CSS MenuMaker 
</head> 
<body> 

<div id='cssmenu'> 
<ul> 
    <li><a href='#'>Home</a></li> 
    <li><a href='#'>about</a>  </li> 
    <li><a href='#'>data</li> 
    <li><a href='#'>community</a>  </li> 
    <li><a href='#'>support</a> </li> 
    <li><a href='#>to</a> 
  
</div> 
</body> 


*css 소스는 

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a, 
#cssmenu #menu-button { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  list-style: none; 
  line-height: 1; 
  display: block; 
  position: relative; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
  content: "."; 
  display: block; 
  clear: both; 
  visibility: hidden; 
  line-height: 0; 
  height: 0; 
} 
#cssmenu #menu-button { 
  display: none; 
} 
#cssmenu { 
  font-family: Montserrat, sans-serif; 
  background: #333333; 
} 
#cssmenu > ul > li { 
  float: left; 
} 
#cssmenu.align-center > ul { 
  font-size: 0; 
  text-align: center; 
} 
#cssmenu.align-center > ul > li { 
  display: inline-block; 
  float: none; 
} 
#cssmenu.align-center ul ul { 
  text-align: left; 
} 
#cssmenu.align-right > ul > li { 
  float: right; 
} 
#cssmenu > ul > li > a { 
  padding: 17px; 
  font-size: 12px; 
  letter-spacing: 1px; 
  text-decoration: none; 
  color: #dddddd; 
  font-weight: 700; 
  text-transform: uppercase; 
} 
#cssmenu > ul > li:hover > a { 
  color: #ffffff; 
} 
#cssmenu > ul > li.has-sub > a { 
  padding-right: 30px; 
} 
#cssmenu > ul > li.has-sub > a:after { 
  position: absolute; 
  top: 22px; 
  right: 11px; 
  width: 8px; 
  height: 2px; 
  display: block; 
  background: #dddddd; 
  content: ''; 
} 
#cssmenu > ul > li.has-sub > a:before { 
  position: absolute; 
  top: 19px; 
  right: 14px; 
  display: block; 
  width: 2px; 
  height: 8px; 
  background: #dddddd; 
  content: ''; 
  -webkit-transition: all .25s ease; 
  -moz-transition: all .25s ease; 
  -ms-transition: all .25s ease; 
  -o-transition: all .25s ease; 
  transition: all .25s ease; 
} 
#cssmenu > ul > li.has-sub:hover > a:before { 
  top: 23px; 
  height: 0; 
} 
#cssmenu ul ul { 
  position: absolute; 
  left: -9999px; 
} 
#cssmenu.align-right ul ul { 
  text-align: right; 
} 
#cssmenu ul ul li { 
  height: 0; 
  -webkit-transition: all .25s ease; 
  -moz-transition: all .25s ease; 
  -ms-transition: all .25s ease; 
  -o-transition: all .25s ease; 
  transition: all .25s ease; 
} 
#cssmenu li:hover > ul { 
  left: auto; 
} 
#cssmenu.align-right li:hover > ul { 
  left: auto; 
  right: 0; 
} 
#cssmenu li:hover > ul > li { 
  height: 35px; 
} 
#cssmenu ul ul ul { 
  margin-left: 100%; 
  top: 0; 
} 
#cssmenu.align-right ul ul ul { 
  margin-left: 0; 
  margin-right: 100%; 
} 
#cssmenu ul ul li a { 
  border-bottom: 1px solid rgba(150, 150, 150, 0.15); 
  padding: 11px 15px; 
  width: 170px; 
  font-size: 12px; 
  text-decoration: none; 
  color: #dddddd; 
  font-weight: 400; 
  background: #333333; 
} 
#cssmenu ul ul li:last-child > a, 
#cssmenu ul ul li.last-item > a { 
  border-bottom: 0; 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li a:hover { 
  color: #ffffff; 
} 
#cssmenu ul ul li.has-sub > a:after { 
  position: absolute; 
  top: 16px; 
  right: 11px; 
  width: 8px; 
  height: 2px; 
  display: block; 
  background: #dddddd; 
  content: ''; 
} 
#cssmenu.align-right ul ul li.has-sub > a:after { 
  right: auto; 
  left: 11px; 
} 
#cssmenu ul ul li.has-sub > a:before { 
  position: absolute; 
  top: 13px; 
  right: 14px; 
  display: block; 
  width: 2px; 
  height: 8px; 
  background: #dddddd; 
  content: ''; 
  -webkit-transition: all .25s ease; 
  -moz-transition: all .25s ease; 
  -ms-transition: all .25s ease; 
  -o-transition: all .25s ease; 
  transition: all .25s ease; 
} 
#cssmenu.align-right ul ul li.has-sub > a:before { 
  right: auto; 
  left: 14px; 
} 
#cssmenu ul ul > li.has-sub:hover > a:before { 
  top: 17px; 
  height: 0; 
} 
@media all and (max-width: 900px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 

  #cssmenu { 
    width: 100%; 
  } 
  #cssmenu ul { 
    width: 100%; 
    display: none; 
  } 
  #cssmenu.align-center > ul { 
    text-align: left; 
  } 
  #cssmenu ul li { 
    width: 100%; 
    border-top: 1px solid rgba(120, 120, 120, 0.2); 
  } 
  #cssmenu ul ul li, 
  #cssmenu li:hover > ul > li { 
    height: auto; 
  } 
  #cssmenu ul li a, 
  #cssmenu ul ul li a { 
    width: 100%; 
    border-bottom: 0; 
  } 
  #cssmenu > ul > li { 
    float: none; 
  } 
  #cssmenu ul ul li a { 
    padding-left: 25px; 
  } 
  #cssmenu ul ul ul li a { 
    padding-left: 35px; 
  } 
  #cssmenu ul ul li a { 
    color: #dddddd; 
    background: none; 
  } 
  #cssmenu ul ul li:hover > a, 
  #cssmenu ul ul li.active > a { 
    color: #ffffff; 
  } 
  #cssmenu ul ul, 
  #cssmenu ul ul ul, 
  #cssmenu.align-right ul ul { 
    position: relative; 
    left: 0; 
    width: 100%; 
    margin: 0; 
    text-align: left; 
  } 
  #cssmenu > ul > li.has-sub > a:after, 
  #cssmenu > ul > li.has-sub > a:before, 
  #cssmenu ul ul > li.has-sub > a:after, 
  #cssmenu ul ul > li.has-sub > a:before { 
    display: none; 
  } 
  #cssmenu #menu-button { 
    display: block; 
    padding: 17px; 
    color: #dddddd; 
    cursor: pointer; 
    font-size: 12px; 
    text-transform: uppercase; 
    font-weight: 700; 
  } 
  #cssmenu #menu-button:after { 
    position: absolute; 
    top: 22px; 
    right: 17px; 
    display: block; 
    height: 4px; 
    width: 20px; 
    border-top: 2px solid #dddddd; 
    border-bottom: 2px solid #dddddd; 
    content: ''; 
  } 
  #cssmenu #menu-button:before { 
    position: absolute; 
    top: 16px; 
    right: 17px; 
    display: block; 
    height: 2px; 
    width: 20px; 
    background: #dddddd; 
    content: ''; 
  } 
  #cssmenu #menu-button.menu-opened:after { 
    top: 23px; 
    border: 0; 
    height: 2px; 
    width: 15px; 
    background: #ffffff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
  } 
  #cssmenu #menu-button.menu-opened:before { 
    top: 23px; 
    background: #ffffff; 
    width: 15px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
  } 
  #cssmenu .submenu-button { 
    position: absolute; 
    z-index: 99; 
    right: 0; 
    top: 0; 
    display: block; 
    border-left: 1px solid rgba(120, 120, 120, 0.2); 
    height: 46px; 
    width: 46px; 
    cursor: pointer; 
  } 
  #cssmenu .submenu-button.submenu-opened { 
    background: #262626; 
  } 
  #cssmenu ul ul .submenu-button { 
    height: 34px; 
    width: 34px; 
  } 
  #cssmenu .submenu-button:after { 
    position: absolute; 
    top: 22px; 
    right: 19px; 
    width: 8px; 
    height: 2px; 
    display: block; 
    background: #dddddd; 
    content: ''; 
  } 
  #cssmenu ul ul .submenu-button:after { 
    top: 15px; 
    right: 13px; 
  } 
  #cssmenu .submenu-button.submenu-opened:after { 
    background: #ffffff; 
  } 
  #cssmenu .submenu-button:before { 
    position: absolute; 
    top: 19px; 
    right: 22px; 
    display: block; 
    width: 2px; 
    height: 8px; 
    background: #dddddd; 
    content: ''; 
  } 
  #cssmenu ul ul .submenu-button:before { 
    top: 12px; 
    right: 16px; 
  } 
  #cssmenu .submenu-button.submenu-opened:before { 
    display: none; 
  } 
} 

 
일단 제가 한방법은  #cssmenu {width: 100%; 를 %를 줄여서 수정해봤는데.. 
구현되는건 바자체가 줄어드는게 아니라 cssmenu 안에 있는 각 div가 줄어들더라구요..ㅠㅜㅜ 
이건 해볼분들이 있으면 아실껍니다 ㅠㅠㅠ

그외에 ul il 요소 다 수정해봤는데....전혀 끄떡도 안하고 
css소스수정으로는 답이 안나와서 
그래서 div를 하나 더 만들어서 넓이를 50%를 주고 한번 감싸봤는데... 
창을 100%켤땐 줄어들긴 줄어드나... 

창을 조금만 줄이거나 해상도가 다르면 

tFgEut3.jpg 

옆에 공간이 저렇게 남았는데도 불구하고 저렇게 두줄이 되버립니다..
  
내가 원하는건 창이나 해상도가 작아저도 바 크기는 유지하는거거든요...

(딱 메뉴길이까지만이라도..메뉴길이가 창을 넘어가면 어쩔수 없지만....창이 조금만 작아저도 메뉴가 두줄이 됩니다..) 

자바스크립트와 제이쿼리는 제가 건드릴엄두가 안나고...ㅠㅠㅠ 
혹시 자바스크립트나 제이쿼리쪽에서 저렇게 설정이 된걸까요.. 
정말 답이 안나오네요 뭐가 문제일까요...

태그 연관 글
  1. [2023/08/23] 묻고답하기 쇼핑몰 기능 by livemedia
  2. [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요? by 가입명
  3. [2020/02/08] 묻고답하기 bootstrap dorpdown 검색창 by 나눔고딕a
  4. [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. by nothing *3
  5. [2018/07/01] 묻고답하기 레이아웃 및 문서페이지 스킨 설치안됨 by rusaka****
, , , , , , 이 게시물을
좋아요
목록
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
양키센스 홈페이지 접속시 갑자기 안되면서 모듈이 없다고 나오네요 ㅜㅜ  
멧　 벡업한 파일을 복구한 이후 로그인이 안됩니다. [1] 2011.06.29 by 송동우
Treasurej 여러조건의 block문 [1] 2011.07.07 by ForHanbi
sound4u Board EX사용, URL 링크를 클릭시 자동으로 게시판에 제목을 입력하게 할 수 있을까요? [4] 2011.07.21 by 송동우
연살 페이지 수정 오류 질문입니다  
까치™ 외부페이지 _post.mid, _get.mid 변수전달문제  
해피지영 xe_v3_default 최신 게시판에 링크를 넣으면 링크가 자동으로 걸리지 않아요  
장낙중 bodex게시판에서는 엮인글이 되는데 board게시판에서는 되지 않습니다. [2] 2011.08.17 by 장낙중
맑은여름 [100] 글의 내용이 안보이는 현상에 대하여.. file  
enzoy 위치한 페이지에 따라 top의 배경 그림을 바꾸려면 [1] 2011.08.31 by 송동우
freeism 하나의 게시판에 두 개의 레이아웃 적용 [1] 2011.09.01 by 송동우
쿠쿠리~* 회원DB이전시 비밀번호를 XE로 코딩할수 있나요? [2] 2011.09.02 by 쿠쿠리~*
네오브레이크 XE를 사용하는 대부분의 웹사이트의 오픈아이디(OpenID)가 작동을 안합니다.  
세죠위그이 모바일 레이아웃에서 헤더 스크립트 작성 문제  
musicnoir naverSyndication 문서 동기화가않됩니다  
Milano msg_module_does_not_exist 에러 1.5 설치후...  
♡체리쉬♡ 게시판에 댓글이있는데 안보여요.... [1] 2011.10.03 by 백성찬
♡체리쉬♡ 로그인만 아니어도 자꾸 이렇게 나와요 Err : "./system_message.html" template file does not exists [2] 2011.10.03 by Cody
♡체리쉬♡ 새롭게 만든 db에 전데이터를 옮기는 방법 [1] 2011.10.07 by 송동우
조이클럽 msg_module_does_not_exist 오류  
태그 쓰기