묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
드롭다운 메뉴바 길이...ㅠㅠㅠ
2015.08.17 13:34
홈페이지를 만들고있는데 메뉴바를 만드는데 소스를 하나 다운받아서 수정해 사용하고 있습니다...
근데 그 메뉴 바 길이를 줄이려고 하는데 아무리 해도 안풀리네요 ㅠㅠ
(일단 전 엄청초보임...)
수정전 원메뉴는 메뉴바가 꽉차게 (이렇게) 보이고
제가 하려는건 메뉴바 자체를 한 50%정도만 줄이려고합니다.
일단 소스코드는
<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%켤땐 줄어들긴 줄어드나...
창을 조금만 줄이거나 해상도가 다르면
옆에 공간이 저렇게 남았는데도 불구하고 저렇게 두줄이 되버립니다..
내가 원하는건 창이나 해상도가 작아저도 바 크기는 유지하는거거든요...
(딱 메뉴길이까지만이라도..메뉴길이가 창을 넘어가면 어쩔수 없지만....창이 조금만 작아저도 메뉴가 두줄이 됩니다..)
자바스크립트와 제이쿼리는 제가 건드릴엄두가 안나고...ㅠㅠㅠ
혹시 자바스크립트나 제이쿼리쪽에서 저렇게 설정이 된걸까요..
정말 답이 안나오네요 뭐가 문제일까요...
태그 연관 글
- [2023/08/23] 묻고답하기 쇼핑몰 기능
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2020/02/08] 묻고답하기 bootstrap dorpdown 검색창
- [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. *3
- [2018/07/01] 묻고답하기 레이아웃 및 문서페이지 스킨 설치안됨
댓글 2
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
현우찡 | 게시판 첨부파일 비회원이도 다운받을 수 있도록 [2] | 2015.08.18 by 현우찡 |
socialskyo | DDOS 공격을 받는다고 합니다. [4] | 2015.08.18 by 기진곰 |
라웅 |
스케치북 하단 질문이요!
[3]
![]() | 2015.08.18 by 라자루스 |
한인헤럴드 | 1.2.4 버전에서 최신버전으로 업데이트 [1] | 2015.08.18 by 닉이 |
hellojdy | 중고마켓플레이스...목록이.....ㅁㄴ이럼냐더맺ㄷ로 [1] | 2015.08.18 by 닉이 |
홍찬 | captcha_membe 오류 메세지 수정 | |
꾸링 |
다음 크롤링이 이상하지 않으신가요..?
![]() | |
이터넬 | 조회수 수정방법입니다(1.8.1 사용중) [4] | 2015.08.17 by 이터넬 |
꾸링 | html에 php를 불러들이는 방법. [5] | 2015.08.17 by 꾸링 |
세핀 | <내용을 입력하세요> 안뜨게 할 수 없나요? | |
잊미 | 설치된 레이아웃은 24개인데 생성된 레이아웃은 12개 | |
XESTUDIO | php 채팅 프로그램 질문 [2] | 2015.08.17 by YJSoft |
thdwjdtjr |
프로필이미지에서 물음표 지우는 방법
[2]
![]() | 2015.08.17 by thdwjdtjr |
bb | 문서페이지에 js나 css파일링크시 경로... | |
bb | 드롭다운 메뉴바 길이...ㅠㅠㅠ [2] | 2015.08.17 by DoorWeb |
뉴질맨 | url 이미지는 섬네일로 나오지 않나요? [8] | 2015.08.17 by 뉴질맨 |
뵤로뤙 | 기초적인 주소에 대한 질문입니다. [1] | 2015.08.17 by SeungXE |
이온디 | xe에서 modernizr라는 js 라이브러리를 사용하나요? [3] | 2015.08.17 by SeungXE |
py**** | 누리고 쇼핑몰 기능 업그레이드 가능하신분 연락 부탁드립니다. [1] | 2015.08.17 by YJSoft |
garnecia | $oDB 로 시작하는 구문이 존재하는 함수는 다 오류가 납니다. |
자바스크립트나 제이쿼리가 아니라, CSS 수정으로 해결될 수 있습니다. 그리고 반응형 레이아웃이라서 크기에 따른 변화가 생기는 것 같은데, 한번 감싸는 div의 크기를 500~600px로 잡아보세요.