웹디자인기능사 메뉴 M-6

소스 보기

Javascript

HTML

CSS


$(function(){
    $(".nav > ul > li").mouseover(function(){
        $(".nav > ul > li > ul").stop().fadeIn(300);
        $("#main").addClass("on");
    });
    $(".nav > ul > li").mouseout(function(){
        $(".nav > ul > li > ul").stop().fadeOut(100);
        $("#main").removeClass("on");
    });
});

<div id="wrap">
    <aside id="aside">
        <h1></h1>
        <nav class="nav">
            <ul>
                <li>
                    <a href="#">메뉴1</a>
                    <ul class="submenu">
                        <li><a href="#">서브메뉴1-1</a></li>
                        <li><a href="#">서브메뉴1-2</a></li>
                        <li><a href="#">서브메뉴1-3</a></li>
                        <li><a href="#">서브메뉴1-4</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">메뉴2</a>
                    <ul class="submenu">
                        <li><a href="#">서브메뉴2-1</a></li>
                        <li><a href="#">서브메뉴2-2</a></li>
                        <li><a href="#">서브메뉴2-3</a></li>
                        <li><a href="#">서브메뉴2-4</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">메뉴3</a>
                    <ul class="submenu">
                        <li><a href="#">서브메뉴3-1</a></li>
                        <li><a href="#">서브메뉴3-2</a></li>
                        <li><a href="#">서브메뉴3-3</a></li>
                        <li><a href="#">서브메뉴3-4</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">메뉴4</a>
                    <ul class="submenu">
                        <li><a href="#">서브메뉴4-1</a></li>
                        <li><a href="#">서브메뉴4-2</a></li>
                        <li><a href="#">서브메뉴4-3</a></li>
                        <li><a href="#">서브메뉴4-4</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </aside>
    <!-- //aside -->

    <main id="main">
        <article id="slider"></article>
        <article id="link"></article>
        <section id="contents">
            <div class="content1"></div>
            <div class="content2"></div>
        </section>
    </main>
    <!-- //main -->

    <footer id="footer">
        <div class="footer1"></div>
        <div class="footer2">
            <div class="footer2-1"></div>
            <div class="footer2-2"></div>
        </div>
        <div class="footer3"></div>
    </footer>
    <!-- //footer -->
</div>
<!-- //wrap -->

        * {
    margin: 0;
    padding: 0;
    font-family: 'GmarketSans';
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#aside {
    width: 200px;
}
#aside h1 {
    width: 100%;
    height: 100px;
    background-color: #efefef;
}
#aside nav {
    width: 100%;
    height: 700px;
    background-color: #e3e3e3;
}
#main {
    width: calc(100% - 200px);
}
#slider {
    width: 100%;
    height: 400px;
    background-color: #d9d9d9;
}
#link {
    width: 100%;
    height: 150px;
    background-color: #d1d1d1;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 50%;
    height: 250px;
    background-color: #c7c7c7;
}
#contents .content2 {
    width: 50%;
    height: 250px;
    background-color: #bcbcbc;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d;
}
#footer .footer3 {
    width: 20%;
    height: 120px;
    background-color: #929292;
}
/* nav */
.nav {
    position: relative;
    z-index: 1000;
}
.nav > ul > li {
    position: relative;
}
.nav > ul > li > a {
    padding: 10px;
    display: block;
    text-align: center;
    background-color: #ccc;
}
.nav > ul > li > a:hover {
    background-color: #aeaeae;
}
.nav > ul > li > ul {
    position: absolute;
    right: -500px;
    top: 0;
    width: 500px;
    display: none;
}
.nav > ul > li > ul > li {
    display: inline;
}
.nav > ul > li > ul > li > a {
    padding: 10px;
    display: inline-block;
    width: 100px;
}
.nav > ul > li > ul > li > a:hover {
    background-color: #a2a2a2;
}
#main {
    position: relative;
}
#main::after {
    content: '';
    width: 0%;
    height: 193px;
    background-color: #b0b0b0;
    position: absolute;
    left: 0;
    top: 100px;
    z-index: 1;
    transition: all 300ms;
}
#main.on::after {
    width: 100%;
}

메뉴 세로 유형 (M-6)