본문 바로가기

꿀팁 공유/└ 웹디자인기능사

메뉴 네비게이션 만들기 (가로)

by 가을색수달 2020. 5. 18.

메뉴 내용은 제 맘대로... ㅋㅋㅋㅋㅋ
실기시험 대비 연습차 만들어봤습니다 :)

움짤 용량 제한때문에 화질구지인 점 양해바랍니다ㅠㅠ

가로 전체 박스형

(더보기를 누르시면 코드를 확인하실 수 있습니다)

HTML

<div id="가로전체박스형">
            <span>가로전체박스형</span>
            <div id="header1">
                <div id="nav1">
                    <ul>
                        <li><a href="#">한식</a>
                            <ul class="submenu1">
                                <li><a href="#">청국장 백반</a></li>
                                <li><a href="#">돼지 김치찌개</a></li>
                                <li><a href="#">고등어 백반</a></li>
                                <li><a href="#">김치말이 국수</a></li>
                            </ul>
                        </li>
                        <li><a href="#">중식</a>
                            <ul class="submenu1">
                                <li><a href="#">锅包肉</a></li>
                                <li><a href="#">牛肉面</a></li>
                                <li><a href="#">鸡蛋炒饭</a></li>
                                <li><a href="#">地三鲜</a></li>
                            </ul>
                        </li>
                        <li><a href="#">일식</a>
                            <ul class="submenu1">
                                <li><a href="#">豚骨ラーメン</a></li>
                                <li><a href="#">寿司</a></li>
                                <li><a href="#">うどん</a></li>
                                <li><a href="#">焼きそば</a></li>
                            </ul>
                        </li>
                        <li><a href="#">양식</a>
                            <ul class="submenu1">
                                <li><a href="#">Spagetti</a></li>
                                <li><a href="#">Ham Burger</a></li>
                                <li><a href="#">Fried Chicken</a></li>
                                <li><a href="#">Beef Steak</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="nav_bg1"></div> <!---얘가 추가되냐 안되냐 차이--->
            </div>
        </div>

CSS

/************가로전체박스형************/
#가로전체박스형 {
    height: 290px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

#header1 {
    height: 100px;
    background: lightyellow;
}

#nav1 {
    float: right;
    margin-top: 70px;
    margin-right: 40px;
    text-align: center;
}

#nav1 > ul {
    font-size: 0;
}

#nav1 > ul > li {
    display: inline-block;
    vertical-align: top;
    width: 130px;
}

#nav1 > ul > li > a {
    display: block;
    font-size: 1.2rem;
    height: 30px;
    line-height: 35px;
    font-weight: 700;
    background: peachpuff;
    color: darkred;
}

#nav1 > ul > li:hover > a {
    background: orangered;
    color: white;
}

.submenu1 {
    display: none;
    position: absolute;
    width: 130px;
    z-index: 10;
    padding: 10px 0;
}

.submenu1 > li {
    display: block;
    height: 30px;
    line-height: 30px;
}

.submenu1 > li > a {
    color: white;
}

.submenu1 > li:hover {
    background: peachpuff;
}

.submenu1 > li:hover > a {
    color: darkred;
    font-weight: 700;
}

.nav_bg1 {
    display: none;
    top: 150px;
    position: absolute;
    width: 1200px;
    height: 140px;
    background: orangered;
    z-index: 9;
}

JAVA SCRIPT (jQuary)

//가로전체박스형
$('#nav1>ul>li').hover(function () {
    $('.submenu1').stop().slideToggle('slow', 'swing');
    $('.nav_bg1').stop().slideToggle('slow', 'swing');
});

가로 고정 박스형

(더보기를 누르시면 코드를 확인하실 수 있습니다)

HTML

<div id="가로고정박스형">
            <span>가로고정박스형</span>
            <div id="header2">
                <div id="nav2">
                    <ul>
                        <li><a href="#">소고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Tenderloin(안심)</a></li>
                                <li><a href="#">Rib-eye(꽃등심)</a></li>
                                <li><a href="#">Sirloin(윗등심)</a></li>
                                <li><a href="#">T-bone(티본)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">돼지고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Spare Ribs(갈비)</a></li>
                                <li><a href="#">Collar Butt(목살)</a></li>
                                <li><a href="#">Jowl Meat(항정살)</a></li>
                                <li><a href="#">Belly(삼겹살)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">닭고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Wings(날개)</a></li>
                                <li><a href="#">Drumstick(닭봉)</a></li>
                                <li><a href="#">Breast(찌찌살)</a></li>
                                <li><a href="#">Thigh(벅지살)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">양고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Shoulder Rack(양갈비)</a></li>
                                <li><a href="#">French Rack(등갈비)</a></li>
                                <li><a href="#">Sirloin(등심)</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

CSS

/************가로고정박스형************/
#가로고정박스형 {
    height: 260px;
    border-bottom: 1px solid black;
}

#header2 {
    height: 100px;
    background: lavender;
}

#nav2 {
    float: right;
    margin-top: 35px;
    margin-right: 40px;
    text-align: center;
}

#nav2 > ul {
    font-size: 0;
}

#nav2 > ul > li {
    display: inline-block;
    vertical-align: top;
    width: 170px;
}

#nav2 > ul > li > a {
    display: block;
    font-size: 1rem;
    height: 30px;
    line-height: 32px;
    font-weight: 700;
    background: plum;
    color: purple;
}

#nav2 > ul > li:hover > a {
    background: darkmagenta;
    color: white;
}

.submenu2 {
    display: none;
    position: absolute;
    height: 120px;
    width: 170px;
    z-index: 10;
    padding: 10px 0;
    background: darkmagenta;
}

.submenu2 > li {
    display: block;
    height: 30px;
    line-height: 30px;
}

.submenu2 > li > a {
    color: white;
    font-size: 0.9rem;
}

.submenu2 > li:hover {
    background: plum;
}

.submenu2 > li:hover > a {
    color: purple;
    font-weight: 700;
}

JAVA SCRIPT (jQuary)

//가로고정박스형
$('#nav2>ul>li').hover(function () {
    $('.submenu2').stop().slideToggle('slow', 'swing');
});

가로 개별메뉴 박스형

(더보기를 누르시면 코드를 확인하실 수 있습니다)

HTML

 <div id="가로메뉴박스형">
             <span>가로메뉴박스형</span>
            <div id="header3">
                <div id="nav3">
                    <ul>
                        <li><a href="#">한국 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">부부의 세계</a></li>
                                <li><a href="#">슬기로운 의사생활</a></li>
                                <li><a href="#">더 킹 : 영원의 군주</a></li>
                                <li><a href="#">한 번 다녀왔습니다</a></li>
                            </ul>
                        </li>
                        <li><a href="#">미국 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">오렌지 이즈 뉴 블랙</a></li>
                                <li><a href="#">브레이킹 배드</a></li>
                                <li><a href="#">굿 플레이스</a></li>
                                <li><a href="#">브루클린 나인나인</a></li>
                            </ul>
                        </li>
                        <li><a href="#">영국 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">닥터 후</a></li>
                                <li><a href="#">브로드처치</a></li>
                                <li><a href="#">라이프 온 마스</a></li>
                                <li><a href="#">다운튼 애비</a></li>
                            </ul>
                        </li>
                        <li><a href="#">중국 일본 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">진정령:마도조사</a></li>
                                <li><a href="#">랑야방:권력의기록</a></li>
                                <li><a href="#">트릭</a></li>
                                <li><a href="#">춤추는 대수사선</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

CSS

/************가로메뉴박스형************/
#가로메뉴박스형 {
    height: 260px;
    border-bottom: 1px solid black;
}

#header3 {
    height: 100px;
    background: lightcyan;
}

#nav3 {
    float: right;
    margin-top: 35px;
    margin-right: 40px;
    text-align: center;
}

#nav3 > ul {
    font-size: 0;
}

#nav3 > ul > li {
    display: inline-block;
    vertical-align: top;
    width: 170px;
}

#nav3 > ul > li > a {
    display: block;
    font-size: 1rem;
    height: 30px;
    line-height: 32px;
    font-weight: 700;
    background: white;
    color: steelblue;
}

#nav3 > ul > li:hover > a {
    background: lightblue;
    color: white;
    text-decoration: underline;
}

.submenu3 {
    display: none;
    position: absolute;
    height: 120px;
    width: 170px;
    z-index: 10;
    padding: 10px 0;
    background: lightblue;
}

.submenu3 > li {
    display: block;
    height: 30px;
    line-height: 30px;
}

.submenu3 > li > a {
    color: darkslateblue;
    font-size: 0.9rem;
}


.submenu3 > li:hover > a {
    color: midnightblue;
    text-decoration: underline;
    font-weight: 700;
}

JAVA SCRIPT (jQuary)

//가로메뉴박스형 (마우스 올린 부모요소의 자식만 슬라이드)
$('#nav3>ul>li').hover(function () {
    $(this).children('.submenu3').stop().slideToggle('slow', 'swing');
});

전체 html 코드 보기

<!DOCTYPE HTML>
<html>

<head>
    <title>menu navigation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div id="index_wrap">
        <div id="가로전체박스형">
            <span>가로전체박스형</span>
            <div id="header1">
                <div id="nav1">
                    <ul>
                        <li><a href="#">한식</a>
                            <ul class="submenu1">
                                <li><a href="#">청국장 백반</a></li>
                                <li><a href="#">돼지 김치찌개</a></li>
                                <li><a href="#">고등어 백반</a></li>
                                <li><a href="#">김치말이 국수</a></li>
                            </ul>
                        </li>
                        <li><a href="#">중식</a>
                            <ul class="submenu1">
                                <li><a href="#">锅包肉</a></li>
                                <li><a href="#">牛肉面</a></li>
                                <li><a href="#">鸡蛋炒饭</a></li>
                                <li><a href="#">地三鲜</a></li>
                            </ul>
                        </li>
                        <li><a href="#">일식</a>
                            <ul class="submenu1">
                                <li><a href="#">豚骨ラーメン</a></li>
                                <li><a href="#">寿司</a></li>
                                <li><a href="#">うどん</a></li>
                                <li><a href="#">焼きそば</a></li>
                            </ul>
                        </li>
                        <li><a href="#">양식</a>
                            <ul class="submenu1">
                                <li><a href="#">Spagetti</a></li>
                                <li><a href="#">Ham Burger</a></li>
                                <li><a href="#">Fried Chicken</a></li>
                                <li><a href="#">Beef Steak</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="nav_bg1"></div>
                <!---얘가 추가되냐 안되냐 차이--->
            </div>
        </div>

        <div id="가로고정박스형">
            <span>가로고정박스형</span>
            <div id="header2">
                <div id="nav2">
                    <ul>
                        <li><a href="#">소고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Tenderloin(안심)</a></li>
                                <li><a href="#">Rib-eye(꽃등심)</a></li>
                                <li><a href="#">Sirloin(윗등심)</a></li>
                                <li><a href="#">T-bone(티본)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">돼지고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Spare Ribs(갈비)</a></li>
                                <li><a href="#">Collar Butt(목살)</a></li>
                                <li><a href="#">Jowl Meat(항정살)</a></li>
                                <li><a href="#">Belly(삼겹살)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">닭고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Wings(날개)</a></li>
                                <li><a href="#">Drumstick(닭봉)</a></li>
                                <li><a href="#">Breast(찌찌살)</a></li>
                                <li><a href="#">Thigh(벅지살)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">양고기</a>
                            <ul class="submenu2">
                                <li><a href="#">Shoulder Rack(양갈비)</a></li>
                                <li><a href="#">French Rack(등갈비)</a></li>
                                <li><a href="#">Sirloin(등심)</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="가로메뉴박스형">
            <span>가로메뉴박스형</span>
            <div id="header3">
                <div id="nav3">
                    <ul>
                        <li><a href="#">한국 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">부부의 세계</a></li>
                                <li><a href="#">슬기로운 의사생활</a></li>
                                <li><a href="#">더 킹 : 영원의 군주</a></li>
                                <li><a href="#">한 번 다녀왔습니다</a></li>
                            </ul>
                        </li>
                        <li><a href="#">미국 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">오렌지 이즈 뉴 블랙</a></li>
                                <li><a href="#">브레이킹 배드</a></li>
                                <li><a href="#">굿 플레이스</a></li>
                                <li><a href="#">브루클린 나인나인</a></li>
                            </ul>
                        </li>
                        <li><a href="#">영국 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">닥터 후</a></li>
                                <li><a href="#">브로드처치</a></li>
                                <li><a href="#">라이프 온 마스</a></li>
                                <li><a href="#">다운튼 애비</a></li>
                            </ul>
                        </li>
                        <li><a href="#">중국 일본 드라마</a>
                            <ul class="submenu3">
                                <li><a href="#">진정령:마도조사</a></li>
                                <li><a href="#">랑야방:권력의기록</a></li>
                                <li><a href="#">트릭</a></li>
                                <li><a href="#">춤추는 대수사선</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="js/menunavi.js"></script>
</body>

</html>

공통 사용된 CSS 코드

@charset UTF-8;

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    color: #333333;
    font-size: 1rem;
}

span {
    display: block;
    text-align: center;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 50px;
    height: 49px;
    border-bottom: 1px solid black;
}

#index_wrap {
    width: 1200px;
    margin: 0 auto;
}

저작자표시 비영리 변경금지

'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글

JUST 쇼핑몰 두번째 연습 (0)	2020.05.30
탭메뉴 구현 (공지사항/갤러리) (0)	2020.05.18
웹디자인 기능사 공개문제 B-4 : 산업대학교 (0)	2020.05.14
웹디자인기능사 공개도면 B-3 : 세계의 미술작품 (0)	2020.05.12
웹디자인 기능사 공개도면 B-2 : 대한투어 (0)	2020.05.08

댓글

티스토리툴바