땀나는 애

[Script] dropdown menu_드롭다운메뉴 2,3뎁스 본문

쭈구리 코딩/내가 보고 쓰려고 모은 것

[Script] dropdown menu_드롭다운메뉴 2,3뎁스

달콤썸머 2019. 12. 31. 11:26
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
    <style>
 
 
 
        .zeta-menu li {
            float: left;
            list-style: none;
            position: relative;
        }
 
        .zeta-menu li:hover {
            background: pink;
        }
 
        .zeta-menu li.expand {
            background: white;
        }
 
        .zeta-menu li.expand>a {
            color: hotpink;
        }
 
        .zeta-menu a {
            color: black;
            display: block;
            padding: 10px 20px;
            text-decoration: none;
        }
 
        .zeta-menu ul {
            background: #eee;
            border: 1px solid silver;
            display: none;
            padding: 0;
            position: absolute;
            left: 0;
            top: 100%;
            width: 180px;
        }
 
        .zeta-menu ul li {
            float: none;
        }
 
        .zeta-menu ul li.expand {
            background: #ddd;
        }
 
        .zeta-menu ul li.expand a {
            color: black;
        }
 
        .zeta-menu ul a {
            color: black;
        }
 
        .zeta-menu ul ul {
            left: 100%;
            top: 0;
        }
    </style>
</head>
 
<body>
 
 
    <script>
        $(function() {
            $(document).mouseup(function(e) {
                if ($(e.target).parents('.zeta-menu').length == 0) {
                    $('.zeta-menu li').removeClass('expand');
                    $('.zeta-menu ul').hide();
                }
            });
            $(".zeta-menu>li:has(ul)>a").each(function() {
                $(this).html($(this).html() + ' &or;');
            });
            $(".zeta-menu ul li:has(ul)")
                .find("a:first")
                .append("<p style='float:right;margin:-3px'>&#9656;</p>");
 
            $(".zeta-menu li>a").click(function() {
                var li = $(this).parent();
                var ul = li.parent()
                ul.find('li').removeClass('expand');
                ul.find('ul').not(li.find('ul')).hide();
                li.children('ul').toggle();
                if (li.children('ul').is(':visible') || li.has('ul')) {
                    li.addClass('expand');
                }
            });
        });
    </script>
    <div class='zeta-menu-bar'>
        <ul class="zeta-menu">
            <li><a href="#0">홈</a></li>
            <li><a href="#1">1번 메뉴</a></li>
            <li><a href="#2">2번 메뉴</a>
                <ul>
                    <li><a href="#2A">2-A 메뉴</a></li>
                    <li><a href="#2B">2-B 메뉴</a>
                        <ul>
                            <li><a href="#2B1">2-B-1 메뉴</a></li>
                            <li><a href="#2B2">2-B-2 메뉴</a></li>
                        </ul>
                    </li>
                    <li><a href="#2C">2-C 메뉴</a></li>
                    <li><a href="#2D">2-D 메뉴</a>
                        <ul>
                            <li><a href="#2D1">2-D-1 메뉴</a></li>
                            <li><a href="#2D2">2-D-2 메뉴</a></li>
                            <li><a href="#2D3">2-D-3 메뉴</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#3">3번 메뉴</a>
                <ul>
                    <li><a href="#3A">3-A 메뉴</a></li>
                    <li><a href="#3B">3-B 메뉴</a></li>
                </ul>
            </li>
            <li><a href="#4">4번 메뉴</a></li>
        </ul>
    </div>
 
</body>
 
</html>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
저작자표시 비영리 변경금지

'쭈구리 코딩 > 내가 보고 쓰려고 모은 것' 카테고리의 다른 글

[html+css] hover_ 이미지hover시 올라가기up  (0) 2019.12.31
[html+css]hover_이미 hover시 다른 이미지 바뀜  (0) 2019.12.31
[script] toggle_아코디언+옆에 화살표 바뀜  (0) 2019.12.31
[script] toggle _아코디언+active  (0) 2019.12.31
[script] slider _ 슬라이드 스크립트 모음  (0) 2019.12.31
'쭈구리 코딩/내가 보고 쓰려고 모은 것' Related Articles more
Comments