0

レスポンシブ Web サイトを構築しようとしています。私は、「コンテンツ ファースト」の方法論に従って、最小のモバイル レイアウトを検討しなければならない最初の段階にいます。ホームページ（工事中）はこんな感じです。

私のホームページ

たとえば、ユーザーが最初のアイコンをクリックすると、メインのナビゲーション バーの下にセカンダリ ナビゲーション バーが表示されます。この画像を見てください (アイコンを見ないでください。画像はランダムで一時的なものです):

セカンダリ ナビゲーション バーのあるホームページ

何らかの方法で 2 つのバーをグラフィカルにリンクしたいと思います。わかりませんが、これらの例のような画像を使用している可能性があります。

バー間のリンクの例 バー間のリンクの例2

これはこれを行う正しい方法ですか？また、それが良い習慣だった場合、「リンク画像」を画面幅とは無関係に配置するにはどうすればよいですか? 位置は、他の要素の位置、またはパーセンテージに基づいている必要があります。絶対位置に基づくことはできません。この場合、実際に画面のサイズを変更すると、下の画像のように混乱します。

リサイズでめちゃくちゃになった

これは、いくつかのjQueryを含む私のhtmlページです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
  <!-- hide the secondary navigation bar -->
  $("#socialnav").hide();

  $("#social-icon").click(
    function(){
        $("#socialnav").toggle();
    })
});
</script>

</head>

<body>
    <!-- header -->
    <div class="big">
        <h1 class="big-font">
            Responsive Website
        </h1>
        <h2 class="medium-font">
            trytrytrytrytry
        </h2>
        <ul id="generalnav" class="nav big centered-content dark-background">
            <li><img id="social-icon" alt="social_icon" src="img/social.png"></li><!--
            --><li><img alt="sections_icon" src="img/sections.png"></li><!--
            --><li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
        </ul>

        <ul id="socialnav" class="nav big centered-content dark-background">
            <li><img alt="social_icon" src="img/social.png"></li><!--
            --><li><img alt="sections_icon" src="img/sections.png"></li><!--
            --><li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
        </ul>

    </div>
</body>
</html>

助けてくれてありがとう！これは私のjsFiddle です(機能する (トグルする) アイコンは左のアイコンのみです)。

4

1 に答える 1

2

2 番目のリストは最初のリストの子であるため、最初にリストをネストする必要があります。

    <ul id="generalnav" class="nav big centered-content dark-background">
        <li><img id="social-icon" alt="social_icon" src="img/social.png">
            <ul id="socialnav" class="nav big centered-content dark-background">
                <li><img alt="social_icon" src="img/social.png"></li>
                <li><img alt="sections_icon" src="img/sections.png"></li>
                <li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
        </ul></li>
        <li><img alt="sections_icon" src="img/sections.png"></li>
        <li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
    </ul>

次に、次のようなことができます: (Javascript は必要ありません。)

    #generalnav li ul { display:none; }
    #generalnav li:hover ul { display:block; }

これにより、リンク イメージの相対位置を使用することもできます。

于 2013-03-27T01:51:12.897 に答える