0

我正在尝试建立一个响应式网站。我处于第一阶段，根据“内容优先”的方法论，我必须考虑最小的移动布局。主页（正在建设中）是这样的：

我的主页

例如，当用户单击第一个图标时，主导航栏下方会出现一个辅助导航栏。看这张图（不要看图标，图片是随机的和临时的）：

带有辅助导航栏的主页

我想以某种方式以图形方式链接两个栏。我不知道，也许像这些例子中的图像：

条之间的链接示例 条间链接的例子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

首先，您应该嵌套列表，因为第二个是第一个的孩子。

    <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 回答