묻고답하기

  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 남기남
너무잠이와요 insert xml 쿼리문 [2] 2018.01.15 by 너무잠이와요
너무잠이와요 스킨내에서 query 문 실행 [2] 2018.01.12 by 너무잠이와요
버들이291 [화면캡쳐 + 소스] 제로보드4 갤러리 게시판 질문드려요 [2] file 2017.10.28 by 버들이291
예스24 레이아웃 수정 좀 봐주세요 [2] file 2017.08.24 by 예스24
뒤늦게입문 휴대폰 전화번호 오류 file  
lifema**** list.html에서 letter-spacing 수정 문의드립니다 [2] 2017.03.13 by lifema****
포(Po) 우리 왭싸이트가 해킹당했다고 하네요... [1] 2017.03.02 by 기진곰
외도랑 게시판리스트 분류이동버튼 문의드립니다 [2] file 2017.03.02 by 외도랑
파도. 이미지 슬라이드에 a 링크 어떻게 넣나요? [7] 2017.02.14 by 외인
kare**** DB import 오류 좀 봐주세요ㅜㅜ(#2006 - MySQL server has gone away ) file  
그티 내용 직접 추가에서 html... [1] 2017.02.04 by 율랜
다함께 DB Table 생성을 해야 설치가 완료됩니다. file  
비제이티비 /modules/document/document.item.php 967줄 에러 file  
Ezzikr 레이어팝업소스.... 크롬에서 안되네요.  
a4print 관리자 화면에서 "에디터" 클릭하면 이렇게 에러가 나네요.ㅠㅠ  
94blossom 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] file 2016.08.02 by 라자루스
kara**** 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] 2016.07.06 by kara****
흑사탕 footer 고정 [8] 2016.06.14 by 흑사탕
김밥하늘 사이트 메뉴편집,디자인설정 출력안되는 현상 [8] file 2016.06.07 by 하얀밤
yak**** 최근글 목록 클릭시 아이프레임내에서 출력문제  
태그 쓰기