반응형 gnb4 [script] 옆에서 나오는 menu script 메뉴버튼에 있는 하얀화살표는 코드어썸을 사용해서 아이콘은 가져와 봤다. 폰트어썸 처음 써봤는데 div, class만 가져오면 바로 사용할수 있어서 좋은것 같다. font-size, color 를 이용해서 css로 크기,색 까지 변경해서 사용할수 있어서 편리함. 위에 링크는 폰트어썸 사이트에서 가져와서 연결하면 된다. $(document).ready(function(){ $("#quick_bar span").click(function(){ $("#quick_bar").toggleClass('on'); }); }); #quick_bar{position:fixed; right:-255px; top:0; width:255px; height:100%; background:black; transition:0.5s .. 2020. 5. 23. [script] gnb menu slide toggle2 gnb 영역에 마우스 hover 했을때 아래 sub_gnb 리스트 + 하얀색 배경이 같이 내려와야한다. 오른쪽 메뉴버튼 클릭했을때 마찬가지로 서브메뉴와 뒷배경이 같이 보여져야 함. 스크립트도 hover 했을 때와 click 했을 때 두가지로 써야함. 추가되는 class는 on으로 통일해서 css 한번만 써도 될수 있게 했다. $(document).ready(function(){ $(".gnb").hover(function(){ $("#header").toggleClass('on'); $(".gnb_bar").stop().slideToggle(); $(".bg").stop().slideToggle(); }); $('.gnb_btn').click(function(){ $('#header').toggleCla.. 2020. 5. 12. [gnb] gnb menu 스크립트 사용없이 마우스 오버 효과만으로 작동하는 sub_gnb menu 배경 효과. 메뉴에 마우스 올렸을 때 header부분 배경, gnb 글씨 색 변경 및 하단 sub_menu width:100% 배경이 생기고 상단 메뉴를 기준으로 하위메뉴가 정렬됨. GNB 메뉴1 서브메뉴1 서브메뉴2 메뉴2 서브메뉴3 서브메뉴4 서브메뉴5 메뉴3 서브메뉴6 서브메뉴7 서브메뉴8 서브메뉴9 서브메뉴10 메뉴4 서브메뉴11 서브메뉴12 메뉴5 .header{position:absolute; left:0; top:0; width:100%; height:100px; transition:all 0.5s; z-index:100;} .header:hover{background-color:#fff;} .header > h1{po.. 2020. 5. 6. [script] gnb menu slideToggle $(document).ready(function(){ $(".gnb > li").hover(function(){ $(this).find(".sub_gnb").stop().slideToggle(); $("#header").stop().toggleClass('on'); }); }); menu1 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu2 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu3 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu4 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu5 sub_gnb1 sub_gnb2 sub_gnb3 sub_.. 2020. 4. 28. 이전 1 다음 반응형
