대각선/사선모양 롤오버 메뉴
꽃님이
마우스를 올리면 대각선으로 이렇게 이미지가 바뀌는 메뉴는 어떻게 접근하면 될까요?
마우스를 올리면 백그라운드가 변하는 식으로 작업하면 된다는데 세세한 부분을 전혀 감을 못잡고 있습니다조언 부탁드립니다ㅠ
-
솔빛길 2024-12-01
이거랑 비슷한거 예전에 했었는데...ul에 파란색 백그라운드,li:hover에 대각선 바탕흰색 png....
-
상큼한캔디 2024-12-01
개인적으로 방법은 2가지가 있는듯합니다.
첫번째는 우측상단 꼭지점부터 좌측상단 꼭지점까지 수직으로 짤라서 메뉴 li를 레이어로 위치시키고 오버된 li에 z-index를 우선으로하는 방법.
두번째는 1뎁스 메뉴를 첫번째꺼만 오버된 상태일때, 두번째꺼만 오버된 상태일때를 한이미지에 넣고(상하) 클래스를 다르게 넣어서 배경위치를 바꿔주는 방법이 있는듯합니다.
그외 많은 방법들이 있겠지만 급 생각나는건 이정도네요~
수고하세요~^^ -
Isolation 2024-12-01
예전에 z-index로 작업했던 기억이있네요..
-
라일락 2024-12-01
대충생각든건...오버됐을때 백그라운드 포지션과 z-index를 활용하시는 건 어떨가요.. 심심하니 저도 생각 좀 해봐야 겠네요
-
지후 2024-12-01
1번 메뉴의 우측 상단과 옆에 2번메뉴의 좌측하단 영역이 떨어져있는게 아니라 대각선으로 내려가있는 쪽 안으로 쑥 들어와있습니다. 오버롤되는 영역이 서로 겹쳐있어서요
-
반월 2024-12-01
우측상단 꼭지점과 좌측하단 꼭지점을 기준으로 수직으로 해서 자르면 되지않을까요....
어차피 파란부분은 롤오버되나 안되나 똑같이 파란색이니;
마지막 꺼만 다르게 자르면되니; -
지율 2024-12-01
그냥 png인거 같은뎅
-
곰돌이 2024-12-01
음.. 저같으면 두가지 방법으로 하겠는뎅.
글자영역이 겹치지 않으니깐 겹치는 영역까지 직사각형으로 자르거나
아니면 오버되는 배경을 대각선방향으로(PNGㅠ파일) 자르고 익스6에선 PNG핵을 써주시는것도 괜찮을것 같습니다. ;;