탑메뉴 네비게이션 효과부분에 ..
겨라
탑 네비게이션 부분 작업을 하고 있는데.. 다..하긴 했는데..
버전별로..마우스오버 했을때 속도차이가 쫌 나네요.
글구.. sub_menu부분은 어떤 경우에는 롤오버 이미지가 보이는데 어떤경우에는 안보이구..
마우스 올리는 위치에 따라서 롤어버 이미지가 보이고 안보이구.. ie8경우에는 sub_menu는 롤오버 기능이 안먹네요.
아무리 찾아봐도 모르겠어서.. 질문합니다.
현재 이런 네비 작업 중이구요.
마크업페이지 소스는
div id=m_navi_menu
dl
dt class=m_da_navi01a href=#none회사소개/a/dt
dd class=sub_navi01
ul
li class=step_1a href=#none우리회사는?/a/li
li class=step_2a href=#noneVision/a/li
li class=step_3a href=#noneHistory/a/li
li class=step_4a href=#none기업문화/a/li
li class=step_5a href=#none채용안내/a/li
li class=step_6a href=#none위치안내/a/li
/ul
/dd
dt class=m_da_navi02a href=#none사업분야/a/dt
dd class=sub_navi02
ul
li class=step_1a href=#none사업분야(overview)/a/li
li class=step_2a href=#none성공사례/a/li
li class=step_3a href=#none주요고객/a/li
/ul
/dd
...
dt class=m_da_navi05a href=#nonewith /a/dt
dd class=sub_navi05
ul
li class=step_1a href=#none이달의 포토/a/li
li class=step_2a href=#none포토/a/li
li class=step_3a href=#none연수원/a/li
/ul
/dd
/dl
/div
script type=text/javascript
//--네비게이션 소스--/
var TScroll = new TopMenuScroll;
TScroll.DivName = m_navi_menu;
TScroll.ScrollName = TScroll;
TScroll.Speed = 1;
TScroll.MovieHeight = 21;
TScroll.topMenuDepthStart = 41;
TScroll.topMenuDepthSpeed = 0.5;
TScroll.topMenuDepthStep = 22;
TScroll.IEOpacity = 5;
TScroll.FFOpacity = 0.05;
TScroll.GoodsSetting();
/scriptcss부분 소스는
#m_navi_menu {position:relative; height:59px;}
#m_navi_menu dl {margin:0; padding:0;}
#m_navi_menu dl dt {position:absolute; margin:0; padding:0; left:0; top:0;}
#m_navi_menu dl dt a {float:left; width:504px; height:21px; text-indent:-3000px; overflow:hidden;}
#m_navi_menu dl dt.m_da_navi01 {left:27px;}
#m_navi_menu dl dt.m_da_navi01 a {width:96px; background-image:url(../images/navigation/m_da_navi01.gif);}
#m_navi_menu dl dt.m_da_navi02 {left:128px;}
#m_navi_menu dl dt.m_da_navi02 a {width:92px; background-image:url(../images/navigation/m_da_navi02.gif);}
#m_navi_menu dl dt.m_da_navi03 {left:225px;}
#m_navi_menu dl dt.m_da_navi03 a {width:90px; background-image:url(../images/navigation/m_da_navi03.gif);}
#m_navi_menu dl dt.m_da_navi04 {left:320px;}
#m_navi_menu dl dt.m_da_navi04 a {width:91px; background-image:url(../images/navigation/m_da_navi04.gif);}
#m_navi_menu dl dt.m_da_navi05 {left:416px;}
#m_navi_menu dl dt.m_da_navi05 a {width:115px; background-image:url(../images/navigation/m_da_navi05.gif);}
#m_navi_menu dl dd {position:absolute; top:21px;}
#m_navi_menu dl dd.sub_navi01 {left:0;}
#m_nbsp;#m_navi_menu dl dd.sub_navi01 a {float:left; height:31px; text-indent:-3000px; background:url(../images/navigation/sub_navi_menu01.gif) no-repeat left 0;}
#m_navi_menu dl dd.sub_navi02 {left:87px;}
#m_navi_menu dl dd.sub_navi02 a {float:left; height:31px; text-indent:-3000px; background:url(../images/navigation/sub_navi_menu02.gif) no-repeat left 0;}
#m_navi_menu dl dd.sub_navi03 {left:153px;}
#m_navi_menu dl dd.sub_navi03 a {float:left; height:31px; text-indent:-3000px; background:url(../images/navigation/sub_navi_menu03.gif) no-repeat left 0;}
#m_navi_menu dl dd.sub_navi04 {left:297px;}
#m_navi_menu dl dd.sub_navi04 a {float:left; height:31px; text-indent:-3000px; background:url(../images/navigation/sub_navi_menu04.gif) no-repeat left 0;}
#m_navi_menu dl dd.sub_navi05 {left:314px;}
#m_navi_menu dl dd.sub_navi05 a {float:left; height:31px; text-indent:-3000px; background:url(../images/navigation/sub_navi_menu05.gif) no-repeat left 0;}
#m_navi_menu dl dd ul {margin:0; padding:0;}
#m_navi_menu dl dd ul li {float:left; padding:0; display:inline;}
#m_navi_menu dl dd ul li a {font-size:0; height:31px;}
#m_navi_menu dl dd.sub_navi01 ul li.step_1 a {width:90px; height:31px; background-position:0 top;}
#m_navi_menu dl dd.sub_navi01 ul li.step_1 a:hover, #m_navi_menu dl dd.sub_navi01 ul li.step_1 a:active {background-position:0 -31px;}
#m_navi_menu dl dd.sub_navi01 ul li.step_2 a {width:42px; height:31px; background-position:-90px top;}
#m_navi_menu dl dd.sub_navi01 ul li.step_2 a:hover, #m_navi_menu dl dd.sub_navi01 ul li.step_2 a:active {background-position:-90px -31px;}
#m_navi_menu dl dd.sub_navi01 ul li.step_3 a {width:47px; height:31px; background-position:-132px top;}
#m_navi_menu dl dd.sub_navi01 ul li.step_3 a:hover, #m_navi_menu dl dd.sub_navi01 ul li.step_3 a:active {background-position:-132px -31px;}
#m_navi_menu dl dd.sub_navi01 ul li.step_4 a {width:53px; height:31px; background-position:-179px top;}
#m_navi_menu dl dd.sub_navi01 ul li.step_4 a:hover, #m_navi_menu dl dd.sub_navi01 ul li.step_4 a:active {background-position:-179px -31px;}
#m_navi_menu dl dd.sub_navi01 ul li.step_5 a {width:55px; height:31px; background-position:-234px top;}
#m_navi_menu dl dd.sub_navi01 ul li.step_5 a:hover, #m_navi_menu dl dd.sub_navi01 ul li.step_5 a:active {background-position:-234px -31px;}
#m_navi_menu dl dd.sub_navi01 ul li.step_6 a {width:76px; height:31px; background-position:-286px top;}
#m_navi_menu dl dd.sub_navi01 ul li.step_6 a:hover, #m_navi_menu dl dd.sub_navi01 ul li.step_6 a:active {background-position:-286px -31px;}
#m_navi_menu dl dd.sub_navi02 ul li.step_1 a {width:120px; height:31px; background-position:0 top;}
#m_navi_menu dl dd.sub_navi02 ul li.step_1 a:hover, #m_navi_menu dl dd.sub_navi02 ul li.step_1 a:active {background-position:0 -31px;}
#m_navi_menu dl dd.sub_navi02 ul li.step_2 a {width:54px; height:31px; background-position:-120px top;}
#m_navi_menu dl dd.sub_navi02 ul li.step_2 a:hover, #m_navi_menu dl dd.sub_navi02 ul li.step_2 a:active {background-position:-120px -31px;}
#m_navi_menu dl dd.sub_navi02 ul li.step_3 a {width:78px; height:31px; background-position:-174px top;}
#m_navi_menu dl dd.sub_navi02 ul li.step_3 a:hover, #m_navi_menu dl dd.sub_navi02 ul li.step_3 a:active {background-position:-174px -31px;}
#m_navi_menu dl dd.sub_navi03 ul li.step_1 a {width:76px; height:31px; background-position:0 top;}
#m_navi_menu dl dd.sub_navi03 ul li.step_1 a:hover, #m_navi_menu dl dd.sub_navi03 ul li.step_1 a:active {background-position:0 -31px;}
#m_navi_menu dl dd.sub_navi03 ul li.step_2 a {width:73px; height:31px; background-position:-76px top;}
#m_navi_menu dl dd.sub_navi03 ul li.step_2 a:hover, #m_navi_menu dl dd.sub_navi03 ul li.step_2 a:active {background-position:-76px -31px;}
#m_navi_menu dl dd.sub_navi03 ul li.step_3 a {width:25px; height:31px; background-position:-149px top;}
#m_navi_menu dl dd.sub_navi03 ul li.step_3 a:hover, #m_navi_menu dl dd.sub_navi03 ul li.step_3 a:active {background-position:-149px -31px;}
#m_navi_menu dl dd.sub_navi03 ul li.step_4 a {width:82px; height:31px; background-position:-174px top;}
#m_navi_menu dl dd.sub_navi03 ul li.step_4 a:hover, #m_navi_menu dl dd.sub_navi03 ul li.step_4 a:active {background-position:-174px -31px;}
#m_navi_menu dl dd.sub_navi03 ul li.step_5 a {width:117px; height:31px; background-position:-256px top;}
#m_navi_menu dl dd.sub_navi03 ul li.step_5 a:hover, #m_navi_menu dl dd.sub_navi03 ul li.step_5 a:active {background-position:-256px -31px;}
#m_navi_menu dl dd.sub_navi04 ul li.step_1 a {width:58px; height:31px; background-position:0 top;}
#m_navi_menu dl dd.sub_navi04 ul li.step_1 a:hover, #m_navi_menu dl dd.sub_navi04 ul li.step_1 a:active {background-position:0 -31px;}
#m_navi_menu dl dd.sub_navi04 ul li.step_2 a {width:77px; height:31px; background-position:-58px top;}
#m_navi_menu dl dd.sub_navi04 ul li.step_2 a:hover, #m_navi_menu dl dd.sub_navi04 ul li.step_2 a:active {background-position:-58px -31px;}
#m_navi_menu dl dd.sub_navi05 ul li.step_1 a {width:89px; height:31px; background-position:0 top;}
#m_navi_menu dl dd.sub_navi05 ul li.step_1 a:hover, #m_navi_menu dl dd.sub_navi05 ul li.step_1 a:active {background-position:0 -31px;}
#m_navi_menu dl dd.sub_navi05 ul li.step_2 a {width:86px; height:31px; background-position:-89px top;}
#m_navi_menu dl dd.sub_navi05 ul li.step_2 a:hover, #m_navi_menu dl dd.sub_navi05 ul li.step_2 a:active {background-position:-89px -31px;}
#m_navi_menu dl dd.sub_navi05 ul li.step_3 a {width:87px; height:31px; background-position:-175px top;}
#m_navi_menu dl dd.sub_navi05 ul li.step_3 a:hover, #m_navi_menu dl dd.sub_navi05 ul li.step_3 a:active {background-position:-175px -31px;}
이렇구요. 적용되고있는 자바스크립트 소스는
첨부파일로 첨부할께요..쫌 봐주세요. 왜왜왜..어째서..sub_menu는 롤어버가 제대로 작동되지 않는걸까요..ㅜ.ㅜ
-
바름
전 \display:block \ 주면 안먹어요..이상하게..아무리해도 안먹어서.. 할수없이 음수값으로 날려버립니다..ㅜ.ㅜ.
-
비내리던날
텍스트를 text-indent 를 음수값으로 날려버리는 기법은
이미지가 로드되지 않았을시 alt값이 화면에 보이지 않아 어떠한 역활을 하는지 구분이 어려워서
좋지 않은 표현인거 같다는 생각입니다.
다른 표현을 사용하심이 좋을듯합니다. -
재미
어질어질 @_@;;
-
글리슨
접근성을 위해 텍스트를 text-indent 를 음수값으로 날려 버리신듯 한데 이게 참 네비게이션에서 사용할때는 비효율적입니다;; 저도 잘은 모르지만 a링크태그에 width , height 값과 bg를 이용한 메뉴를 만들때는 display:block 을 주셔야 할듯...
-
엄마몬
헉!! 내비 하나하는데 이렇게 많은 css가 필요하나요?
다른 것을 찾아보세요
| 번호 | 제 목 | 글쓴이 | 날짜 |
|---|---|---|---|
| 2696043 | 제이쿼리 .scroll() 관련 질문드립니다 | 이거이름임 | 2025-05-26 |
| 2695984 | 마크업상으로 하단에 있으나 우선적으로 이미지파일을 다운로드받는 방법 (1) | 들꿈 | 2025-05-25 |
| 2695934 | tr 속성값 (9) | 새 | 2025-05-25 |
| 2695905 | ASP로 개발됐을 때 css가 달라져요 ㅠㅠ (4) | 슬아라 | 2025-05-24 |
| 2695878 | form을 이용한 다른 페이지로 넘기는 방법을 알려주세요 (1) | 핫파랑 | 2025-05-24 |
| 2695844 | 저기 암호화 및 복호화 프로그램.. 만들어볼려는대 (2) | 한빛 | 2025-05-24 |
| 2695814 | [질문] PDA에서 애플릿이 가능한가요? (1) | 봄시내 | 2025-05-24 |
| 2695785 | 웹 설정 도와줄분 | 화이트캣 | 2025-05-23 |
| 2695730 | 갑자기 기억이 안나는데 accesskey 속성.. | 빛나라 | 2025-05-23 |
| 2695702 | [질문] Java 버전 차이에 의한 오류?!! (2) | 검사 | 2025-05-23 |
| 2695672 | 자바 임베디드 쪽으로 배우고 싶은데요..질문이요.. (1) | 뽀그리 | 2025-05-22 |
| 2695647 | 헉! 이클립스(v3.1)에서 발생되는 널포인트 익셉션? ;;; (3) | 아빠몬 | 2025-05-22 |
| 2695586 | IFRAME 캐싱 질문 | 봄나비 | 2025-05-22 |
| 2695498 | [질문]실행가능한 jar파일.. 정말 이해가 안가네요... ㅡㅜ;; | 터1프한렩 | 2025-05-21 |
| 2695468 | 자바랑 이클립스에서요.. | 스킬 | 2025-05-21 |
| 2695375 | Mysql 연동하는 자바 질문있습니다. | 아리솔 | 2025-05-20 |
| 2695319 | 파워포인트 파일을 저장할 수 있을까요? | 시윤 | 2025-05-19 |
| 2695289 | [질문]Tween 값의 정도를 알고 싶습니다. | 타마 | 2025-05-19 |
| 2695238 | c 와 c++의 시작 (10) | ChocoHoilc | 2025-05-18 |
| 2695215 | 탑메뉴의 repeat-x .배경이 두가지에요ㅠ ㅠ | 널위해 | 2025-05-18 |