워드프레스 쇼핑몰, 웹사이트

블로그

트위터 부트스트랩을 이용하면 기본적으로 메뉴바의 주메뉴를 클릭해야 서브 메뉴가 나타나는 것이 기본 설정입니다. 이전 글에서 클릭하지 않고도 마우스만 올리면 서브 메뉴가 나타나는 방법을 소개했는데 새로운 방법이 있더군요. 간단하게 스타일시트만 추가하면 됩니다. 이 방법은 CSS에서 아주 많이 사용해왔는데 고정관념이란 것이 아주 무섭네요. 부트스트랩은 이렇게 설정이 돼있으니까 항상 이렇게 사용해야한다는 것이 고정관념이었습니다. 더구나 마우스를 올리면 서브 메뉴가 나오도록 하는 플러그인이 나와있으니까 이러한 고정관념을 더욱 부채질하지 않았나 하는 생각도 듭니다. 


이 플러그인이 존재의 가치가 있을지는 두고봐야겠지만 스타일시트로 간단하게 처리하는 방법은 다음과 같습니다.


ul.nav li.dropdown:hover > ul.dropdown-menu{

    display: block;

    margin: 0;

}


스타일시트에 위 코드만 추가하면 됩니다. 간단하죠. 이전에는 제이쿼리 플러그인을 추가하고, 링크 만들고, 스크립트 코드 추가하고, 선택자를 추가하는 번거로움이 없어졌습니다. 




댓글 (5)

댓글 목록

홍정석 access_time

정말 간단해서 좋네요~ 고맙습니다.

베누시안 access_time

감사합니다.

달리는꼬마 access_time

관리자의 승인을 기다리고 있는 댓글입니다

달리는꼬마 access_time

관리자의 승인을 기다리고 있는 댓글입니다

달리는꼬마 access_time

관리자의 승인을 기다리고 있는 댓글입니다

Here is our team

Thumbnail Image

Gigi Hadid
Model

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

Thumbnail Image

Christian Louboutin
Designer

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

Thumbnail Image

Kendall Jenner
Model

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.