Custom Dropdown Megamenu

우선 메뉴를 감싸는 Megamenu Container를 만들고 그 안에 여러개의 Link Wrapper를 이용하여 메뉴를 구현, 이 때 각각의 Link Wrapper와 그 안의 텍스트는 클래스를 부여하여 일괄적으로 Control 할 수 있도록 함. […]

Written by: doogak

우선 메뉴를 감싸는 Megamenu Container를 만들고 그 안에 여러개의 Link Wrapper를 이용하여 메뉴를 구현, 이 때 각각의 Link Wrapper와 그 안의 텍스트는 클래스를 부여하여 일괄적으로 Control 할 수 있도록 함.

어떤 메뉴에 마우스를 올렸을 때 Dropdown Menu가 생생되도록 하려면,
Menu Item (Parent, Div) .mega-submenu-parent > Div 생성 .mega-submenu-container > Div 내 자유롭게 메뉴구성함.

.mega-submenu-parent

postion: relative;

.mega-submenu-container

position: absolute (top:300%, left:-9999px)
padding-top: 20px;
opacity: 0;
transition: 0.3sec;

Code Block을 생성하여, PHP 'Hello World'를 삭제 후 아래 코드를 CSS로 삽입. 이때

.mega-submenu-parent:hover .mega-submenu-container {
  left: 0;
  top: 100%;
  opacity: 1;
}