웹디자인기능사) C-3 유형 남도맛기행 사이트 만들기

• 메뉴 : 세로형 서브메뉴 
• 슬라이드 : 옆으로
• 공지사항 / 갤러리 : 분리형
• 갤러리 사진 -호버시 투명도 조절
• 배너
• 팝업창 : 모달레이어 팝업
• 푸터 : 로고와 하단메뉴

---

이미지 슬라이더 css

 

/* article */

article{ height:350px; overflow: hidden; }

article ul{width:300%;}

article ul li{ float: left;}

 

이미지 슬라이더 script

 //slider

    setInterval(function(){

    $("article ul").animate({"margin-left":"-100%"},function(){

        $("article ul li").first().appendTo("article ul");

        $("article ul").css({"margin-left":"0%"})

        })

    },3000);

 

---

모달 레이어 팝업창 script

그리고 팝업창 가운데 오게 할때

넓이를 계산해서 마진값으로 해도 되지만

top:50%; left:50%; transform: translate(-50% , -50%);

 

이렇게 하면 계산하지 않아도 가운데로 이동시킬수있다

 

 //popup

    $("#popup_btn").click(function(){

        $("#popup").show()

        $("#modal_bg").show()

    });

    $("#x_btn").click(function(){

        $("#popup").hide()

        $("#modal_bg").hide()

    });

---

세로 형식 / 옆으로 생기는 메뉴 script

=서브메뉴를 포지션으로 위치를 옆으로 옮기면 될 뿐!

 

그리고 팝업창뿐만아니라 배경도 fixed를 넣어야 한다

 //menu

    $("nav > ul > li").mouseenter(function(){

        $(this).find(".sub_menu").stop().slideDown(500);

    });

    $("nav > ul > li").mouseleave(function(){

        $("nav > ul ul").stop().slideUp(500);

    });