묻고답하기

  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 남기남
a4print 관리자 화면에서 "에디터" 클릭하면 이렇게 에러가 나네요.ㅠㅠ  
공유 오류 좀 잡아주세요.. 부탁드립니다.. [3] file 2016.10.27 by 공유
김선달 간단한 css 좀 부탁드립니다. file  
내똥굴따 레이아웃 메인 로그인/관리 탭이 없습니다. [1] file 2016.08.29 by Str@wberry_dev
반장 질문드립니다 (셀렉트박스 타겟 지정)  
94blossom 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] file 2016.08.02 by 라자루스
덥붜 중고마켓 모듈 수정 file  
유인규408 admin 페이지 접속오류 [2] file 2016.06.15 by 유인규408
흑사탕 footer 고정 [8] 2016.06.14 by 흑사탕
yak**** 최근글 목록 클릭시 아이프레임내에서 출력문제  
ha****921ae xe/classes/db/DB.class.php on line 633 에러 문의 file  
피르 XE 새로 설치하는중입니다. [2] 2016.05.04 by 피르
BM 파일첨부에러 [1] file 2016.03.23 by 퍼니엑스이
Hi_Roy Edge 브라우저에서 제 게시판 툴바 중에 특수문자랑 미디어 삽입이 동작하지 않는데 해결방법을 모르겠네요. [1] 2016.03.21 by 퍼니엑스이
자스민 FLV 동영상 본문삽입문제 동움부탁드립니다 file  
세상의모든계산기 ckeditor style.js 에 div 관련 border-radius 를 적용하면 문제가 생깁니다. [4] file 2016.01.29 by 세상의모든계산기
린Plus 생 초보입니다....... 도와주세요 유챗 채팅방넣기.. file  
마법사 게시글 제목에 &amp #39 이렇게 붙습니다 [1] 2016.01.01 by DoorWeb
thdwjdtjr 메뉴바를 길게하고자 합니다 [1] file 2015.11.25 by DoorWeb
오뎅궁물 코어 1.8.3에서 변경된 CSS가 있나요? [5] 2015.11.18 by 오뎅궁물
태그 쓰기