Question

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

my homepage

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

homepage with secondary nav bar

我想以某种方式以图形方式链接两个柱。我不知道，可能有这些例子中的图像：

example of link between bars example2 of link between bars

这是做这件事的正确方法吗？而且，在这是一个很好的做法的情况下，我如何以独立于屏幕宽度的方式定位“链接图像”？该职位必须基于其他要素的位置，或者可能基于百分比。它不能基于绝对定位。实际上，在这种情况下，调整屏幕大小会像下面的图像一样混乱：

resizing has made a mess

这是我的html页面，其中包含一些jQuery：

<!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（唯一有效的图标（切换）是左图标。）

Answer 1

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

    <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; }

这也允许您对链接图像使用相对定位。

以图形方式链接主导航栏和辅助导航栏

1 个答案: