묻고답하기
서브 메뉴수정이 이렇게 힘든건가요?
2015.10.22 20:39
메뉴에 마우스를 올리면 2차 메뉴가 세로로 나열되는데(지금 xe 홈페이지 처럼)
이 2차메뉴를 가로로 나열되도록 만드려고 합니다.
저와같은 질문을 많은 사람들이 했는데, 대부분 답변들이 없거나 다른 수정에 대한 이야기를 하는 것 같습니다.
2차메뉴(서브메뉴)를 가로로 나타나게 하려면 어떻게 해야 하나요?
다시 한번 더 재질문을 해봅니다.... '')
-----------------------------------------------------------------------------
수년전 질문 및 댓글들을 보면서 수정을 해도..... 안됩니다.... '')
xe 공식 홈페이지 레이아웃을 가져다가 쓰고 있습니다.
중간에 float에 none을 left로 바꿔보기도 하고....
이것저것 설명대로 해보아도....
지금 이 xe 홈페이지 서브메뉴들처럼...... 마우스 오버시 서브 메뉴가 세로로 나타나네요.
어떻게 하면 서브메뉴가 가로로 나타나게 할 수 있을까요?
@charset "utf-8";
/* Layout */
hr{display:none}
form, fieldset{border:0;margin:0;padding:-20}
body{margin:0;padding:0}
.user_layout{width:960px;margin:0 auto}
.header:after{content:"";display:block;clear:both}
.header{zoom:1;background:#FEFFB7;padding:0}
.header .gnb{float:right}
.gnb ul{list-style:none;margin:0;padding:0;zoom:1}
.gnb ul:after{content:"";display:block;clear:both}
.gnb ul ul{display:none;position:absolute;left:0;top:38px;padding:5px 0;background:#FFFFFF;border:1px solid #444;border-top:0}
.gnb li{float:left;list-style:none;background:url(./images/default/bgGnbVr.gif) no-repeat left center;padding-left:2px;position:relative;white-space:nowrap}
.gnb li.first{padding:0;background:none}
.gnb li li{float:left;background:none;padding:0;left:0}
.gnb li a{float:left;padding:13px 15px 0 15px;height:25px;color:#187200;white-space:nowrap;text-decoration:none}
.gnb li a:hover,
.gnb li a:active,
.gnb li a:focus{color:#0000FF}
.gnb li.active a{font-weight:bold;color:#0000FF;background:url(./images/default/bgGnbOn.gif) no-repeat center bottom}
.gnb li li a{float:left;display:inline;padding:5px 15px !important;background:none !important;height:auto;font-weight:normal !important}
.gnb li li.active a{font-weight:bold !important}
.body{margin:20px 0;zoom:1;background:#FFF}
.body:after{content:"";display:block;clear:both}
.lnb{float:left;width:200px;background:#FFF}
.account{}
.content{float:right;width:740px;background:#FFF}
.footer{background:#ddd}
- [2019/09/15] 묻고답하기 XEDITION LNB 관련하여 몇가지 질문드립니다. *2
- [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 *1
- [2016/03/09] 묻고답하기 LNB메뉴 사이즈 조절 할 수 없을까요..? *1
- [2015/10/28] 묻고답하기 xe 스쿨보고 따라하는 중 메뉴바 서브매뉴 관련 *4
- [2015/07/10] 묻고답하기 메인메뉴 가운데 정렬 문으 드립니다. *2
댓글 12
-
부산민지아빠
2015.10.27 11:31
-
sage하늘
2015.10.27 11:37
답변에 감사드립니다.
질문을 쉽게 한다고 생각했었는데,
민지아빠님의 말씀처럼 제 질문이 부정확했네요.
1차 메뉴에 마우스를 오버시키면,
2차메뉴가 1차메뉴 바로 아래에 한 줄 가로로 길게 나타나기를 원한다는 뜻이었는데.....
대메뉴 오른쪽에 나와야 한다는 질문으로 보일수도 있었네요. 수정해서 질문을 다시 올려야겠습니다.
감사합니다.
------------------------------------------
댓글이 있어서 수정이 안되네요. 다시 질문올리겠습니다!
-
mindpainter
2015.10.27 19:02
.gnb li li {float: left}를 {float: none}으로 바꾸시면 됩니다. 안된다면 html문서상이나 다른 CSS에 영향을 받고 있는거구요.. 일반적으로 블록요소를 가로로 배치할때 float외에도 display: inline-block을 사용하기도 하니 잘 확인해 보세요.
참고로...
아무런 속성을 안주었을때의 li를 포함한 block 요소(div, ul, li, p 등)는 세로로 배치가 되는데,
.gnb ul, .gnb li는 .gnb내의 모든 ul, li의 속성을 정의하므로 ul, li가 다중으로 되어있을때는 불필요한 부분까지 정의가 되어 번거롭게 됩니다.현재같은 경우에는 ">"를 사용하여 가로로 배치하고 싶은 첫번째의 li에만 float 속성을 주시는게 더 좋습니다.
.gnb>ul>li {float: left}
이렇게 하면 그 안에 들어있는 li에 구지 float: none을 주지 않아도 알아서 세로로 배치가 됩니다.
-
sage하늘
2015.10.27 20:47
답변 감사드립니다.
그런데 설명대로 해도... 변하지가 않네요..... 휴........
가로로 서브메뉴 나타나게 하기가 이렇게나 힘든거네요.....
-
sage하늘
2015.10.27 21:12
찾았습니다.
.gnb li li {float:left} 를 none로 바꾸는 것 뿐 아니라.
.gnb li li a{float:left} 도 none로 바꾸어야 하네요.
float을 전부 none으로, display를 전부 inline으로 명령어를 입력해주니
서브메뉴가 가로로 나타납니다.
다만, 가로박스가..... 대메뉴의 왼쪽 위치부터 시작되다보니... 오른쪽으로 화면을 넘어가서 나오기도 하네요.
첫번째 메뉴에서는 괜찮고... 마지막 메뉴는 서브메뉴가 화면을 넘어가니.....
이 마지막 메뉴에 마우스 오버시킬 때, 가로박스가 왼쪽으로 조금 더 가게 만들면 될거 같아요.
이건 또 어떻게 해야하는지..... 아시면 알려주세요~!
-
mindpainter
2015.10.28 11:23
일반적으로 메뉴를 만들때..
<div class="gnb">
<ul>
<li><a>대메뉴</a>
<ul>
<li><a>소메뉴</a></li>
</ul>
</li>
<li><a>대메뉴</a>
<ul>
<li><a>소메뉴</a></li>
</ul>
</li>
</ul>
</div>.gnb>ul>li {height: 원하는 값px; float: left; position: relative}
.gnb>ul>li>ul {position: absolute; top: 100%; left: 0} 이것 이외의 나머지 코딩은 꾸미기 위한 것들 입니다.앞서 말씀드린데로 li는 기본적으로 세로로 배열이 되고 float이나 display: inline등을 주면 가로로 배열이 됩니다. display를 전부 inline을 주어서 세로로 배치가 되었다는건 오류입니다.
a태그는 li에 하나씩 밖에 없으므로 float의 영향을 받지 않아야 정상이므로 이것 또한 오류입니다.
눈에는 된것처럼 보이지만 다른것들을 건드리다 보면 문제가 될 가능성이 크기 때문에 말씀드렸구요..html이나 css는 컴퓨터 언어이기 때문에 지극히 논리적으로 접근하셔야 합니다^^;;
마지막 메뉴 처리하는건 제가 제시한 상단 CSS 예를 기준으로..
.gnb>ul>li>ul {position: absolute; top: 100%; left: 0} 밑에
.gnb>ul>li:last-child>ul {left: auto; right: 0} 추가하시면 되는데 이건 ie8이하에서는 적용이 안되니 ie8이하도 고려되야 한다면 jQuery등으로 하셔야 합니다. html상단에 추가해 주세요.<script>
jQuery(function($){
$('.gnb>ul>li:last-child>ul').css({
'left': 'auto',
'right': 0
});
});
</script> -
sage하늘
2015.10.28 15:22
친절한 설명에 감사드립니다.
이 메뉴 수정만 한달 이상 걸리네요.... 답변을 기다리고... 수정하고... 하다보니...
저녁에 들어가면 한 번 해봐야겠습니다.
그런데 질문 드릴 것이......
.gnb>ul>li>ul
이것이...... <gnb><ul><li><ul>을 줄여서 표현한건가요?
아니면 있는 그대로 '.gnb>ul>li>ul{position:.........' 입력해야 하는건가요?
-
mindpainter
2015.10.28 17:18
처음엔 다 그렇죠.. 뭐..
줄여서 표현한것 아니고,
.gnb>ul>li>ul... 이것 그대로 넣는거구요..
">"이 css에 쓰일때는 "바로 아래의 자식요소에만" 이란 뜻입니다. 이렇게 하면 자식요소가 가지고 있는 자식요소는 영향을 받지 않습니다.현재 막혀있는 부분은 구지 XE가 아니고 CSS 교재나 인터넷 검색을 통해서 배우시는게 더 좋을것 같아요.. 여긴 CSS등의 정보가 많지 않거든요..
-
sage하늘
2015.10.31 07:37
귀한 답변에 감사드립니다. 바빠서 이제서야 접속해서 수정해 봅니다.
그런데 문제가 생겼습니다.
.gnb>ul>li:last-child>ul {left: auto; right: 0}
이 소스를 넣어서 마지막 서브메뉴가 오른쪽 밖을 벗어나지 않게 만들었습니다. 감사합니다!
다만, 6개의 대메뉴중에 3,4,5,6번이 다 오른쪽을 넘어갑니다.
그래서 위에 소스에서 last 를 빼고 해보니... 도리어 마지막 서브메뉴도 넘어가버립니다.
메뉴를 부분적으로 수정할 수는 없나요?(지금 마지막 메뉴만 수정하듯이....)
일률적으로 서브메뉴를 오른쪽으로 만들어 버리면..... 첫번째 대메뉴 아래가 오른쪽으로 쏠리게 되니까요....
1,2 대메뉴는 서브메뉴가 왼쪽 으로 고정. 3,4 대메뉴는 서브메뉴가 가운데로, 5,6 대메뉴는 서브메뉴가 오른쪽으로 고정.
이렇게 만들수도 있나요?
이게 안된다면, 서브메뉴를 대메뉴 가로크기로 고정시켜서...
1~6번 대 메뉴위에 마우스 오버시 서브메뉴 박스는 서브메뉴제목글자와 관계없이 동일한 크기로 나오도록 할 수도 있나요?
-
mindpainter
2015.11.02 12:05
서브메뉴를 따로 따로 컨트롤 하는건 나중에도 계속 문제가 될꺼예요..
.gnb>ul>li {width: 원하는 값} 이렇게 하시면 서브 메뉴에 width가 적용될 것 같은데요.. 이렇게 하셔서 해결이 되시면 다행이지만.. 계속 말씀드리지만 기본 설계에 문제가 있는걸 문제가 생길때마다 후 처리하는건 또다른 문제가 생기게 될 뿐입니다. 코드도 점점더 복잡해 지구요..
-
sage하늘
2015.11.07 06:18
답변에 감사합니다. 바빠서 이제서야 점검해보는데.....
수정은 안되네요,.....
기본 설계에 문제가 있으면, 그 부분을 수정해서 고쳐놓고 싶은데....
어디가 문제인지도 모르겠네요.
태그로 시작해서, 프레임을 배우고, i프레임으로 원하는 곳만 바꿔보고,
xe로 레이아웃도 해보고..... css를(복사해서 쓰는 수준이지만) 건드려보기도 하고.....
독학의 한계인가보네요. 인터넷과 댓글을 통해 배우는 한계가......
그래도 언젠가 완성될 날을 바라보며..... 또 배워갑니다.
일단은 맨 마지막 서브 메뉴가 오른쪽에 정렬되어서, 대메뉴를 넘어가지 않게 되는것까지 했으니.....
조금씩 더 해보아야겠습니다.
-
sage하늘
2015.11.09 20:19
감사합니다! 알려주신 마지막 서브메뉴를 오른쪽 지정하는거....
그걸 응용해서 수정했습니다.
.gnb>ul>li:nth-child(4)>ul {left: auto; right: 0}nth와 child에 숫자를 지정해서, 원하는 대메뉴의 서브메뉴 위치 지정이 가능하네요.
감사합니다!
[저와같은 질문을 많은 사람들이 했는데, 대부분 답변들이 없거나 다른 수정에 대한 이야기를 하는 것 같습니다.]
라는 부분은..이 부분은 XE에 대한 질문이기 보다 HTML 에 대한 내용에 비중이 더 많기 때문이 아닐까요?
가로로 출력된다는 예기가.. 메뉴전체가 대메뉴 바로 오른쪽에 나와야 하는건지..
세로로 나오되 2열~3열 로 나와야 한다는 건지..에 대한 자세한 설명이 있어야 할거 같고..
사실 두 내용으로만으로도 HTML 상당한 양을 수정하거나 새로 추가해 줘야 합니다.