묻고답하기

  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 남기남
유형익 도와 주세요...ㅠㅠ file  
유형익 좀 도와주세요...ㅠㅠ [1] 2012.08.21 by jjjnnn
SCAC 카페24에서 간혈적 백지 현상 나타나는분 안계신가요? [2] 2012.08.23 by SCAC
유형익 로그인폼 크기 변경하려면...? file  
지나김 'specialists' 라는 단어가 들어가면 저장이 안됩니다. [7] 2014.02.09 by :DunhillBoy
임실치즈 안녕하세요 2차메뉴 가로로 만드는 법.. [4] 2014.04.10 by 닉이
こさき! 1.7.4.2 문의드립니다. [1] 2014.05.11 by 키스투엑스이
DaKi 조회수 방문자수 등의 오류  
Hi_Roy 테이블 안의 marquee 태그가 크롬에서 동작하지 않습니다. [3] 2015.02.14 by Hi_Roy
DJinside member 모듈 업데이트 오류, 설정 변경 오류 도와주세요 ㅠㅠㅠㅠ file  
티코GT 문서 모드가 쿼크로 나오는데 왜 그런건가요?  
티코GT 제이쿼리 소스를 적용하는데 익스플로러에서 문제가 발생하네요^^; [10] file 2015.04.01 by 돼지코구뇽
티코GT css에서 정렬은 어떻게 해야하나요? [1] 2015.04.16 by 부산민지아빠
Azpi 2차 메뉴가 있을 때만 특정 div를 출력하게 하려면 어떻게 해야하나요 [2] 2015.04.27 by Azpi
착한동구 트래픽위젯 설치좀 도와주세요  
JnCsoft xe1.8.2 처음 설치하는데, 오류 [9] 2015.06.02 by JnCsoft
한이파파 상자위젯 속에 관리자버튼이 들어가는 문제점(소스)  
www**** 통합검색시 상단 타이틀 없애는 방법좀 알려주세용.. [3] file 2015.06.23 by www****
www**** 스케치북 5 갤러리형에서 이미지 출력문제입니다. [2] file 2015.07.09 by www****
ImpactCC 6개의 칸으로 만들어진 div 만드는것좀 도와주세요..^^;; [5] file 2015.07.18 by iuloveiu
태그 쓰기