본문 바로가기

드롭다운 메뉴3

스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기 이번 글을 보시기 전에 이전에 메뉴바와 관련해 올렸던 글들을 미리 읽어보시길 권장합니다. 오늘 다룰 '스킨에서 제공하는 상단 메뉴바에 서브 메뉴 넣기'는 이전에 메뉴바를 다뤘던 모든 글들이 합쳐져 있기 때문입니다. 모두 읽어 보시기에 시간이 부족하시다면 '스킨에서 제공하는 상단 메뉴바 수정하기'라는 포스트는 꼭 읽어주시길 바랍니다. 본 포스트의 내용은 해당 포스트에서 이어지는 내용입니다. 이전에 모두 다룬 내용이기 때문에 자세한 설명은 생략하도록 하겠습니다. CSS를 이용해 블로그 상단 메뉴바 만들기 (1) CSS를 이용해 블로그 상단 메뉴바 만들기 (2) 스킨에서 제공하는 상단 메뉴바 수정하기 CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1) CSS를 이용해 드롭다운(Drop Down) .. 2013. 3. 4.
CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2) 이전에 만들어 놓은 예제(드롭다운 첫번째 글)를 계속 이용하겠습니다. 이번 포스트에서 다룰 내용은 이미 만들어져 있는 서브메뉴의 형태를 보다 보기좋게 수정하는 방법에 관한 글입니다. 여기서 주로 다루게 되는 내용은 기존에 다룬바 있는 내용(배경과 테두리, 그림자로 레이어 꾸미기)이므로, 이전 글을 보신다면 더 큰 도움이 되지 않을까 생각합니다. 사용할 예제 Menu 1 Menu 2 Sub Menu 1 Sub Menu 2 Sub Menu 3 Menu 3 Sub Menu 1 Sub Menu 2 Sub Menu 3 Menu 4 Menu 5 1. 서브메뉴에도 그림자 적용하기 blogMenu 스타일에 적용되어 있는 부분을 그대로 복사하여 이용하셔도 상관은 없으나 같은 스타일을 여러번 입력하지 않고 다른 방법을 이.. 2013. 3. 1.
CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1) 몇몇 블로그를 살펴보면 상단 메뉴바에 마우스를 올릴경우 하위 메뉴가 나오는 것을 확인할 수 있습니다. 이러한 형식을 '드롭다운(Drop Down)' 메뉴라고 이야기합니다. 이번 글에서는 이전에 만들어놓은 상단 메뉴바(관련글)에 서브 메뉴를 추가하는 방법에 대해서 살펴보도록 하겠습니다. 오늘 사용할 스타일 시트 예제 1. 메뉴 리스트 작성하기 먼저 사용하고 싶은 메뉴 리스트를 작성합니다. 상위 메뉴의 리스트가 작성된 후에는, 서브 메뉴를 만들고 싶은 상위 메뉴의 내부에 태그를 이용하여 다시 리스트를 작성합니다. 이번 글에서는 기본 상위 메뉴로 Menu1 ~ Menu5를, 그리고 Menu2와 3의 하위에 Sub Menu 1, 2, 3을 각각 추가하는 경우의 예를 들어보겠습니다. Menu 1 Menu 2 Su.. 2013. 2. 27.
반응형