jQuery 애니메이션 내 비게 이 션 표시 줄 효과 구현

애니메이션 효 과 를 펼 치 는 네 비게 이 션 바 를 디자인 하고 사용자 정의 하 며 demo 를 써 보 았 습 니 다.게다가 디자인 과 디 버 깅 차이 가 하루 도 많 지 않 았 습 니 다.
디자인->레이아웃 쓰기->스타일 쓰기->JS 코드 를 써 서 완전히 자신 이 디자인 한 네 비게 이 션 바 를 완성 하 는 방법 에 대해 이야기 합 니 다.
HTML 쓰기 레이아웃,CSS 쓰기 스타일,JS 쓰기 애니메이션 효과 와 이벤트 응답 등 을 고려 하여 JQuery 가 DOM 작업 에 대한 편의 성 을 고려 하여 JQuery 를 사용 하면 적은 노력 으로 큰 효 과 를 거 둘 수 있 습 니 다.
디자인:
자신 이 다운로드 한 네 비게 이 션 바 플러그 인 이 너무 천편일률 적 이 라 고 생각한다 면 자신 이 좋아 하 는 네 비게 이 션 바 를 설계 하 세 요.종이 한 장 으로 자신 이 원 하 는 내 비게 이 션 을 그 려 서 어떤 효 과 를 얻 고 싶 은 지 그 려 볼 수 있다.
예 를 들 어 여기 서 네 비게 이 션 바 를 쓰 려 면 마 우 스 는 각 장 위 에 떠 있 고 아래 의 모든 노드 를 가로로 뻗 을 수 있 으 며 노드 의 등장 은 점프 동작 이 있다.
레이아웃 쓰기:
생각 을 정리 한 후에 HTML 을 쓰기 시 작 했 는데 이 단 계 는 상대 적 으로 간단 하 다.일반적으로