[css] css 메뉴 이미지 롤오버 효과 2 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

[css] css 메뉴 이미지 롤오버 효과 2

페이지 정보

본문

<style type="text/css">
ul#top-menu {
    width: 458px;
    list-style: none;
}

ul#top-menu li { display: inline; }
    
ul#top-menu li a {
    display: block; float: left; height: 6px;
    background-image: url(img/topmenu.gif); text-indent: -9999px;
}

    ul#top-menu li a.m1 {
        width: 30px; background-position: 0 0; margin-right:15px;    
    }
    
    ul#top-menu li a.m2 {
        width: 41px; background-position: -45px 0; margin-right:13px;    
    }
    
    ul#top-menu li a.m3 {
        width: 45px; background-position: -99px 0; margin-right:12px;    
    }
    
    ul#top-menu li a.m4 {
        width: 53px; background-position: -156px 0; margin-right:15px;    
    }
    
    ul#top-menu li a.m5 {
        width: 89px; background-position: -224px 0; margin-right:14px;    
    }

    ul#top-menu li a.m6 {
        width: 21px; background-position: -327px 0; margin-right:17px;    
    }

    ul#top-menu li a.m7 {
        width: 41px; background-position: -365px 0; margin-right:15px;    
    }

    ul#top-menu li a.m8 {
        width: 37px; background-position: -421px 0;
    }
    
    ul#top-menu li a.m1:hover, ul#top-menu li a.m1:focus {
        background-position: 0 -6px;    
    }
    
    ul#top-menu li a.m2:hover, ul#top-menu li a.m2:focus {
        background-position: -45px -6px;    
    }
    
    ul#top-menu li a.m3:hover, ul#top-menu li a.m3:focus {
        background-position: -99px -6px;    
    }
    
    ul#top-menu li a.m4:hover, ul#top-menu li a.m4:focus {
        background-position: -156px -6px;    
    }
    
    ul#top-menu li a.m5:hover, ul#top-menu li a.m5:focus {
        background-position: -224px -6px;    
    }

    ul#top-menu li a.m6:hover, ul#top-menu li a.m6:focus {
        background-position: -327px -6px;    
    }

    ul#top-menu li a.m7:hover, ul#top-menu li a.m7:focus {
        background-position: -365px -6px;    
    }

    ul#top-menu li a.m8:hover, ul#top-menu li a.m8:focus {
        background-position: -421px -6px;    
    }
    

a { outline: none; }
 
</style>

<ul id="top-menu">
    <li><a href="#m1" class="m1">Ninja</a></li>
    <li><a href="#m2" class="m2">Zombie</a></li>
    <li><a href="#m3" class="m3">Robot</a></li>
    <li><a href="#m4" class="m4">Assassin</a></li>
    <li><a href="#m5" class="m5">Jedi</a></li>
    <li><a href="#m6" class="m6">Jedi</a></li>
    <li><a href="#m7" class="m7">Jedi</a></li>
    <li><a href="#m8" class="m8">Jedi</a></li>
</ul>
추천0

댓글목록

profile_image

하현준우사랑님의 댓글

하현준우사랑쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

자바스크립트 연동없는 소스를 찾았는데... 감사합니다.

profile_image

PGUD님의 댓글

PGUD쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

감사히 참고하겠습니다 ^^

profile_image

바람나라님의 댓글

바람나라쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

좋은정보 감사합니다

Total 825건 1 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
825 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 72342 0 07-10
824 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 63784 0 06-29
823 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 57388 0 06-02
열람중 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 57353 0 04-07
821 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 56992 0 04-09
820 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 56824 0 06-29
819 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 56644 0 05-12
818 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 56131 0 07-28
817 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 56000 0 07-02
816 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 55619 0 07-29
815 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 54628 0 04-20
814 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 53286 0 03-30
813 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 52316 0 09-23
812 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 50299 0 09-27
811 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 48721 0 11-07
810 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 47789 0 11-19
809 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 47725 0 08-06
808 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 47237 0 03-04
807 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 46169 0 08-06
806 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 45778 0 10-13
805 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 44904 0 09-19
804 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 44359 0 07-22
803 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 44048 0 11-29
802 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 43671 0 10-04
801 제로쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 43057 0 07-13

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
3,110
어제
5,045
최대
9,679
전체
2,617,488
Copyright (c) 株式会社YHPLUS. All rights reserved.