1_4 세로 slide 메뉴바의 기출 변형으로 보면 좋습니다. 1-1 일반 메뉴바 html구조와 100%동일합니다. 1_4 세로 slide 메뉴바와 비슷하지만 가장 큰 차이점은 .mainmenu li의 height사이즈가 50px로 제한되어 있습니다. 이는 .submenu클래스에 position:relative속성을 사용하기 때문입니다. relative값으로 지정하게 되면, 자기 자신의 위치를 기준으로 띄워 표기할 수 있습니다. 그러나 보통 relative는 자기 자신의 위치 영역이 그대로 유지되므로, 이를 가리기 위해 .mainmenu li의 height사이즈가 50px로 제한하는 것입니다. 이렇게 하면, position:absolute;의 사용처..
세로 바 패턴의 메뉴 바 입니다. 1-1 일반 메뉴바 html구조와 100%동일합니다. 세로 바 패턴에 맞춰야 합니다. 가로폭의 경우는 logo사이즈에 맞춰 제작해야 합니다. 어떤 패턴 9,10의 경우는 로고 사이즈의 값이 200*40으로 되어 있습니다. 그러므로 가로 폭은 무조건 200이어야 합니다. 단, 11,12패턴은 종횡비를 유지하면 사이즈를 줄일 수 있습니다. header영역에만 float:left; 속성이 붙습니다. 그리고 .mainmenu li의 사이즈는 유동적으로 변화해야 하므로, height속성을 입력하지 않습니다. 1-3_개별 메뉴바의 스크립트 구조를 사용합니다.
일반 메뉴 바에서 기출 변형된 개별 메뉴 바 입니다. 1-1 일반 메뉴바 html구조와 100%동일합니다. 1-1 일반 메뉴바 css구조와 100%동일합니다. 일반 메뉴 바와 지칭하는 이벤트의 주체가 $('.mainmenu')에서 $('.mainmenu > li')로 바뀝니다. 그리고 리스트의 순서 값만을 따오기 위해 index라는 변수를 만들고 그 값을 저장합니다. mouseover의 실행문 작성시 슬라이드 효과가 발생할 $('.submenu')의 값을 정확하게 index순서에 맞춰 나타내게 만들 수 있도록 eq(index)를 끼워 넣습니다. 그리고 이후 .stop()과 slideDown()을 연결합니다. 또..
일반 메뉴 바에서 기출 변형된 패턴 : 배경 메뉴 바 입니다. 1-1 일반 메뉴바 html구조에 를 추가해 만든 배경 메뉴바 입니다. 위치는 header의 하위 요소이고, 와 동등하면서, 가장 마지막에 위치하면 됩니다. 즉, 의 바로 위에 위치하면 됩니다. 1-1 일반 메뉴바 css구조에 .bg를 작성합니다. 사이즈는 폭 1200 높이 250px 언저리면 괜찮습니다. 배경을 추가해야 영역에 뜨는지 아닌지 알 수 있습니다. z-index의 수준은 .imgslide보다는 높게, .submenu 보다는 낮아야 합니다. $('.mainmenu,.bg')로 동시에 둘 다 이벤트가 동작하도록 만들어야 합니다. 이벤트를 선..
가장 기본적인 구조이면서, 제일 간단한 메뉴 바 만들기 구성입니다. 1-1 일반 메뉴바 html구조입니다. 총 5개의 메뉴 바 리스트는 이 구조를 기본으로 합니다. 특별히 다른 구조는 없고, 오직 1-2배경을 제외하고는 다 같은 구조를 사용합니다. 1-1 일반 메뉴 바 css 구조입니다. 가장 중요한 것은 .logo클래스에는 float:left;를 부여하되, nav에는 margin-left : .logo클래스의 width값 ; 만큼 지정해야 합니다. nav에는 float:left를 사용하지 않는 이유는 이후 나올 .submenu들에 position 속성 값이 생기기 때문입니다. 기본적으로 position은 float:속성과 같은 구조로 책정되지 않습..
