Jquery 以图形方式将主导航条与辅助导航条链接_Jquery_Html_Css

Jquery 以图形方式将主导航条与辅助导航条链接

jquery html css

Jquery 以图形方式将主导航条与辅助导航条链接,jquery,html,css,Jquery,Html,Css,我正在努力建立一个反应迅速的网站。我处在第一阶段，根据“内容第一”的元数据，我必须考虑最小的移动布局。主页（正在建设中）如下所示：例如，当用户单击第一个图标时，主图标下方会出现一个辅助导航条。查看此图像（不要查看图标，图像是随机和临时的）：我想以某种方式以图形方式链接这两个条。我不知道，可能有这样的图像：这是做这件事的正确方法吗？而且，如果这是一个很好的实践，我如何以独立于屏幕宽度的方式定位“链接图像”？位置必须基于其他元素位置，或者，可能基于百分比。它不能基于绝对定位。事实上，在

我正在努力建立一个反应迅速的网站。我处在第一阶段，根据“内容第一”的元数据，我必须考虑最小的移动布局。主页（正在建设中）如下所示：

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

我想以某种方式以图形方式链接这两个条。我不知道，可能有这样的图像：

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

这是我的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>


反应部位
$（文档）.ready（函数（）{
$（“#socialnav”）.hide（）；
$（“#社交图标”）。单击(
函数（）{
$（“#socialnav”）.toggle（）；
})
});
响应式网站
trytrytrytrytry

谢谢你帮助我！这是我的（唯一可用的图标（切换）是左边的图标）。

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

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

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

谢谢，这似乎是一个很好的解决方案。我现在不能尝试，但我会尽快给你反馈。

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