웹디자인기능사) A-1 유형 just 쇼핑몰만들기

• 메뉴 : 가로형 서브메뉴 / 서브메뉴의 배경 
• 슬라이드 : 위에서 아래 or 아래에서 위
• 공지사항 / 갤러리 : 일체형 (탭메뉴)
• 배너 / 바로가기
• 팝업창 : 레이어 팝업
• 푸터 : 로고와 sns

---

 

 

header{position:relative;}

 

#logo{float:left;

nav{ position:relative; }

nav > ul{ position: absolute; }

nav > ul > li{float:left; }

nav > ul ul{display: none; z-index: 999;}

#menu_bg{position:absolute; right:0; top:100px; display: none;}

 

 

//메뉴

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

        $("nav >ul ul").stop().slideDown(500)

        $("#menu_bg").stop().slideDown(500)

    });

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

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

        $("#menu_bg").stop().slideUp(500)

    });

---

 

article{position:relative;  overflow: hidden;}

article ul{width:300%;}

article ul li{float:left;}

 

//가로 이미지슬라이드

    setInterval(function(){

        $('article ul').animate({'margin-left':'-1200px'},function(){

            $('article ul li:first').appendTo('article ul');

            $('article ul').css({'margin-left':'0px'});

        });

    },3000);

---

탭제목1

<div class="on">탭내용1</div>

 

 

탭제목2

<div class="off" > 탭내용2</div>

 

으로 구성

 

 

//탭메뉴

    $('#content1 h3').click(function(){

        $('#content1 > div').addClass('off');

        $(this).next().removeClass('off');

        $('#content1 h3').removeClass('color')

        $(this).addClass('color')

    });

 

---

 

#popup{position:fixed; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

 

 

    //팝업

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

        $("#popup").show();

    });

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

        $("#popup").hide();

    });