html | 웹페이지 메뉴바까지 짜기 + 메뉴hover효과

html 구성 : 

 

div#wrap > header > div#header_in >h1 >img

div#wrap > header > div#header_in >ul#top_left>li>a

div#wrap > header > div#header_in >ul#top_right>li>a

div#wrap > header > div#header_in >ul#menu>li>a

div#wrap > header > div#sub > div#sub_in > ul>li >a

div#wrap> div#banner > ul#image >li > img

div#wrap> div#banner > ul#btn >li

 

div#wrap으로 상단부터 메뉴까지 총 감싼다.

header안에 로고, 왼쪽상단메뉴, 우측상단메뉴, 메뉴를 header_in으로 감싸고, 서브메뉴내용을 #subin으로, #sub로 감싼다. (*메뉴에 마우스댔을때 각각 하위메뉴가 내려오는게아니라 통으로내려오기때문에 이렇게 짰고, 각각 하위메뉴가 내려와야하면 각각li에 하위메뉴ul을 넣어주는 방식으로 진행된다. -> https://so-better.tistory.com/133 참고.

 

<div id="wrap">

        <header>

            <div id="header_in">

                <h1><img src="logo.gif" alt="상단로고"></h1>

                <ul id="top_left">

                    <li><a href="#">마이페이지</a></li>

                    <li><a href="#">장바구니</a></li>

                </ul>

                <ul id="top_right">

                    <li><a href="#">로그인</a></li>

                    <li><a href="#">가입</a></li>

                    <li><a href="#">English</a></li>

                </ul>

                <ul id="menu">

                    <li><a href="#">Menu</a><span>메뉴</span></li>

                    <li><a href="#">Store</a><span>매장</span></li>

                    <li><a href="#">Company</a><span>소개</span></li>

                </ul>

            </div>

            <div id="sub">

                <div id="sub_in">

                    <ul>

                        <li><a href="#">COFFEE</a></li>

                        <li><a href="#">라떼</a></li>

                    </ul>

                    <ul>

                        <li><a href="#">천안</a></li>

                        <li><a href="#">성수</a></li>

                        <li><a href="#">구리</a></li>

                    </ul>

                    <ul>

                        <li><a href="#">소개</a></li>

                        <li><a href="#">연혁</a></li>

                    </ul>

                </div>

            </div>

        </header>

        <div id="banner">

            <ul id="image">

                <li><img src="mainBanner1.jpg" alt="배너1"></li>

                <li><img src="mainBanner2.jpg" alt="배너2"></li>

                <li><img src="mainBanner3.jpg" alt="배너3"></li>

                <li><img src="mainBanner4.jpg" alt="배너4"></li>

                <li><img src="mainBanner5.jpg" alt="배너5"></li>

            </ul>

            <ul id="btn">

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </div> <!-- #wrap 종료 -->

---

기본적으로 적용해야하는 css :

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

body{

    font-size: 12px;

    height: 3000px;

}

li{

    list-style: none;

}

a{

    text-decoration: none;

    color: #6f6f6f;

}

img{

    vertical-align: top;

}

그 외에 적용한 css :

 

#wrap{

width: 100%;

}

header{

    width: 100%;

    height: 148px;

    position: relative;

}

header #header_in{

    width: 940px;

    margin: 0 auto;

    padding-top:15px;

    position: relative;

}

#header_in h1{

    width: 66px;

    margin: 0 auto;

}

#header_in #top_left{

    position: absolute;

    left: 0;

    top: 15px;

    overflow: hidden;

}

#top_left li{

    float: left;

    margin-right: 20px;

}

#top_left li a{

    font-weight: bold;

    color: #333;

}

#top_left li:first-child a{

    color: red;

}

#header_in #top_right{

    position: absolute;

    right: 0;

    top: 15px;

    overflow: hidden;

}

#top_right li{

    float: left;

    margin-left: 15px;

}

#header_in #menu{

    height: 60px;

    margin-top: 18px;

    overflow: hidden;

}

#menu li{

    float: left;

    width: 156px;

    padding: 5px 0;

    text-align: center;

}

#menu li a{

    color: #333;

    font-weight: bold;

    font-size: 18px;

}

#menu li span{

    display: block;

    margin-top: 5px;

    opacity: 0;

}

#menu li:hover span {

    color: #fff;

    opacity: 1;

}

#menu li:hover{

    background-color: red;

    color: #fff;

}

#menu li:hover a{

    color: #fff;

}

header #sub{

    position: absolute;

    left: 0;

    top: 148px;

    width: 100%;

    background-color:#333;

    padding: 20px 0;

    display: none;

    z-index: 2;

}

#sub #sub_in{

    width: 940px;

    margin: 0 auto;

    overflow: hidden;

}

#sub_in ul{

    width: 156px;

    float: left;

    text-align: center;

}

#sub_in a{

    padding: 3px 0;

    display: block;

    font-size: 13px;

}

#sub_in a:hover{

    color: #fff;

}

#banner{

    width: 1903px;

    height: 480px;

    overflow: hidden;

    position: relative;

    margin: 0 auto;

}

#banner #image{

    width: 1903px;

    height: 490px;

    position: relative;

    /*width를 이미지 하나의크기로 주는 이유는 슬라이드가 아니고 그냥보여지고 안보여지는 효과이기떄문.

    + 추가로 li내용이 쌓이고쌓여서 가장나중께 제일먼저 보이게됨

    */

}

#banner #image li{

    position: absolute;

    left: 0; top: 0;

    width: 1903px;

    display: none;

}/*포지션과 레프트탑0으로 위치값주기*/

 

#banner img{

    width: 100%;

}

#banner #btn{

    position: absolute;

    bottom:20px;

    left: 50%;

    margin-left: -45px;

}

#banner #btn li{

    width: 10px;

    height: 10px;

    background-color: #ccc;

    margin-right: 10px;

    float: left;

    border-radius: 5px;

}

#banner #btn li:last-child{

    margin-right:0;

}

#banner #btn li.red{

    background-color: red;

}

 

---

script : 

    $(document).ready(function(){

        //메뉴

        $('#menu>li,#sub_in').mouseenter(function(){

            $('#sub').stop().slideDown();

            //slideDown이 보여지고 내려오게하는 내용이어서 display:block안써도 보여짐.

            //sldieDown이나 slideUp Fadein,out ,toggle에도 show/hide값이 넣어져있음.

            $('#menu li span').css('opacity','1');

        });

        $('#menu>li,#sub_in').mouseleave(function(){

            $('#sub').stop().slideUp();

            $('#menu li span').css('opacity','0');

        });

        //배너

        $('#btn li').first().addClass('red');

        $('#image li').first().show();

        $('#btn li').click(function(){

            $('#btn li').removeClass('red');

            $(this).addClass('red');

            var i=$(this).index();

            $('#image li').fadeOut();

            //클릭한대상이외의 아이들은 사라지게. 계속쌓여서 남는거이기때문에.

            $('#image li').eq(i).fadeIn();

        });

       

    });