묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
나라디자인 CSS Navigation Bar 표시오류좀 봐주세요.
2010.12.10 13:52
나라디자인 CSS Navigation Bar
http://www.xpressengine.com/?mid=download&category_srl=18322950&package_srl=19270268
에 있는 것을 참고하여 아래와 같이 만들었습니다.
아무것도 없는 빈 페이지에 위젯만을 넣었는데요.
서브메뉴가 위 그림처럼 메뉴부분을 침범하네요.
당연히 검정색의 맨아래에 딱 맞게 나와야하는데 말이죠.
참고페이지(http://naradesign.net/wp/2010/02/11/1185/) 에 있는 메뉴처럼 말이죠.
그리고 top2의 하위메뉴는 아무것도 없는데도 아래방향화살표 모양이 보이네요.
뭐가 문제인건지...
css파일을 수정해야 하는건가요? 도움좀 부탁드려요.
메뉴구성을 추가합니다.
잘못된건 없는거죠?
혹시 core의 버전과 관련이 있을수 있을까요? 최신버전으로 했거든요.
태그 연관 글
- [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 *2
- [2016/09/13] 묻고답하기 제목에 html, css 가능하도록 하기? *2
- [2016/06/30] 묻고답하기 xe 1.4.0버전 사용중입니다 *1
- [2016/01/05] 묻고답하기 ie10, 11번전 css문제
- [2015/07/16] 묻고답하기 widget을 감싸고 있는 박스에 미디어쿼리를 넣고 싶습니다 *2
댓글 2
-
ForHanbi
2010.12.10 15:17
-
울뜨라
2010.12.10 16:03
서브메뉴겹치는 것은 top값을 변경하여 해결했습니다. 감사드리구요. 하위메뉴가 없음에도 화살표가 나타나는 것과 관련하여 질문내용을 추가하였습니다. 다시 한번 봐주시면 고맙겠습니다. -
ForHanbi
2010.12.10 16:40
// Menu var menu = $('div.menu'); var major = $('div.major'); var li_list = major.find('>ul>li'); // Selected function onselectmenu(){ var myclass = []; $(this).parent('li').each(function(){ myclass.push( $(this).attr('class') ); }); myclass = myclass.join(' '); if (!major.hasClass(myclass)) major.attr('+ 'class','major').addClass(myclass); } // Show Menu function show_menu(){ t = $(this); li_list.removeClass('active'); t.parent('li').addClass('active'); // IE7 or IE7 documentMode bug fix if($.browser.msie) { var v = document.documentMode || parseInt($.browser.version); if (v == 7) { var subWidth = t.next('div.sub'+ ').eq(-1).width(); t.next('div.sub').css('width',subWidth); } } } li_list.find('>a').click(onselectmenu).mouseover(show_menu).focus(show_menu); // Hide Menu function hide_menu(){ li_list.removeClass('active'); } menu.mouseleave(hide_menu); li_list.find('div.sub>ul').mouseleave(hide_menu); //icon major.find('div.sub').prev('a').find('>span').append('<span class="i"></span>');
위 부분이 정찬명님의 메뉴에 있던 js 부분이고요.거기서 화살표를 넣는 js는major.find('div.sub').prev('+ 'a').find('>span').append('<span class="i"></span>'+ ');
이 부분입니다.
간단하게 말해서 major라는 클라스 이름이 있는 div안에 sub라는 클라스(하위 메뉴입니다)의 div가 있으면
그 앞 <a><span></span></a> 뒤에 <span class="i"></span> 을 더 붙혀라.
그리고 화살표는 <span class="i"></span>의 백그라운드 이미지 입니다.
즉 html 구조가 위의 조건에 맞게 작성되었다면 화살표는 옳바르게 작동될거라 봅니다.
솔직히 작업하시는 html을 안본 이상은 정확하게 원인을 파악하기 힘듭니다.
사이트 주소 올려 주시면 파악해 보겠습니다.
아니면 간략한 설명...
하위 메뉴가 absolute로 되어 있을겁니다. 그리고 위치가 top:얼마 로 되어 있을 건데 그 얼마값을 바꾸시면 될겁니다.
그리고 화살표 표시는 js에서 잡아준건데 그게 하위메뉴가 있을시에만 span을 더 추가해서 백그라운드 이미지로 추가하는 방식이라..
하위메뉴가 없으면 나올 수가 없는건데
모르겠네요.