1

前面フレームワーク Foundation を使用して Web サイトを作成しようとしています。現在、このサイトの「トップバー」メニューに取り組んでいます。デスクトップ コンピューター用のメニューを実装しました。ただし、幅が 940px より小さいウィンドウにメニューを表示することはできません。つまり、メニューはモバイル デバイスやタブレット デバイスには表示されません。

画面サイズが小さくなるにつれて、トップバーの内容を積み重ねていきたいです。さらに、Foundation についての私の理解では、Foundation は必要な JavaScript を実装して、バックグラウンドで折りたたみ可能なメニューを作成します (これは正しいですか?)。理想的には、メニュー アイコンが押されると、メニューも拡大および縮小します。これを修正する方法についての提案はありますか? また、これに関連する財団文書の重要なセクションを見逃していた場合は、それを指摘していただければ幸いです。

私のコードは次のとおりです。

<!DOCTYPE html>
<html>

<head>

    <!-- Foundation and my own CSS -->
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- Foundation and jQuery -->
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.topbar.js"></script>
    <script src="js/foundation/foundation.dropdown.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/app.js"></script>

    <?php if (isset($title)): ?>
        <title>Joe Smith | <?= htmlspecialchars($title) ?></title>
    <?php else: ?>
        <title>Joe Smith</title>
    <?php endif ?>

</head>

<body>

<script>
    $(document).ready(function() {
        $(document).foundation();
    }
</script>

<nav class="top-bar">
<ul class="title-area">
    <li class="name"><a href="index.php"><h1>Joe Smith</h1></a></li>

    <!-- Mobile-only menu icon -->
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

<section class="top-bar-section">
    <ul class="left">
        <li><i>Computer Scientist</i></li>
    </ul>
    <ul class="right">
        <li class="active"><a href="about.php">ABOUT</a></li>
        <li><a href="projects.php">PROJECTS</a></li>
        <li><a href="blog.php">BLOG</a></li>
        <li><a href="../files/resume.pdf">RESUME</a></li>
        <li><a href="contact.php">CONTACT</a></li>
    </ul>
</section>
</nav>

</body>
</html>
4

3 に答える 3

0

クラス「top-bar」を追加したタグに「data-topbar」属性を追加してください
。これを追加する方法の例を次に示します。

<nav class="top-bar" data-topbar>
于 2014-01-19T23:02:28.143 に答える