묻고답하기

  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 남기남
BEO 슬라이드 위젯 삽입 후 메뉴가 안보이네요 고수님들 부탁드립니다 [6] file 2022.06.17 by 인천한량
clara 홈페이지를 처음 제작해보는데 [3] file 2021.08.04 by J__
가입명 footer 하단에 고정하려면 어딜 수정해야 할까요?  
소라db952 cycle-pager 배너에 a 링크를 걸면 배너 이미지가 풀려요ㅠ [2] 2019.04.02 by 소라db952
Spooky 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. [1] 2019.03.29 by Spooky
퓨라 카메론 위젯에서 날짜부분을 올리고 싶어요. [1] file 2019.01.03 by 디자인클립
립샤 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 [1] 2018.10.15 by 르미
호돌이옆집아저씨 니코 위젯스타일 제목 색상을 바꾸고 싶어요?  
유자 메뉴바하고 이미지를 중앙에 고정하고싶어요.  
파도. 이미지 슬라이드에 a 링크 어떻게 넣나요? [7] 2017.02.14 by 외인
파도. 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 file  
너굴 업데이트 했더니.. 에러가 나고 아무것도 안떠요...ㅠㅠ 도와주세요..ㅠ [5] 2016.10.13 by 김전설
94blossom 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] file 2016.08.02 by 라자루스
스파모 로그인후 정보 표시 바꾸고 싶은데 도와주세요 [2] file 2015.12.14 by 스파모
ING 게시판 아이콘 정렬 [1] file 2015.10.16 by 키스투엑스이
별별 3차메뉴를 카테고리(분류) 자리에 대신 출력가능한가요?  
bb 드롭다운 메뉴바 길이...ㅠㅠㅠ [2] 2015.08.17 by DoorWeb
더블엠씨 스케치북 게시판(웹진형 카드디자인)의 목록의 글자를 키우고 싶습니다. 5시간째 방황중입니다 .ㅜㅜ [9] file 2015.07.31 by 더블엠씨
태그 쓰기