More than 5 years have passed since last update.

CSSフレームワークでよくあるJSライブラリを自作してみる

JavaScript

Posted at 2014-10-12

メニューバーのプルダウン

CSSとかもう少しシンプルに書けそうな気がしますが、とりあえずめも。
※jQuery使います。

mock01.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptライブラリ作成用もっく</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./js/menu.js"></script>
    <link rel="stylesheet" href="./css/mock01.css">
</head>
<body>
    <header>
        へっだー
    </header>
    <nav>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4
                <ul>
                    <li>4-1</li>
                    <li>4-2</li>
                    <li>4-3</li>
                    <li>
                        4-4
                        <ul>
                            <li>4-4-1</li>
                            <li>4-4-2</li>
                            <li>4-4-3</li>
                            <li>4-4-4</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <article>
        めいん
    </article>
    <footer>
        ふったー
    </footer>
</body>
</html>

mock01.css

nav>ul>li {
    display: block;
    float: left;
    list-style: none;
    height: 48px;
    min-width: 198px;
    background: #CCCCCC;
    border: solid 1px #333333;
}

nav>ul>li ul>li {
    display: block;
    list-style: none;
    height: 48px;
    min-width: 198px;
    background: #CCCCCC;
    border: solid 1px #333333;
}

menu.js

$(function() {
    // 基本は非表示
    $("nav ul li ul").css('display', 'none');

    // hover時に表示
    $("nav ul li").hover(function() {
        if ($(this).children().is("ul")) {
            $(this).children("ul").css('display', 'block');
        }
    }, function() {
        $(this).children("ul").css('display', 'none');
    });
});

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up