以图形方式将主要导航栏与次要导航栏链接

我试图构建一个响应式网站。根据“内容优先”方法学，我正处于第一阶段，我必须考虑最小的移动布局。主页（在建）是这样的：以图形方式将主要导航栏与次要导航栏链接

my homepage

当用户点击，例如，在第一图标的二次导航栏下方出现主要的一种。看到这个图片（不看的图标，图像是随机和临时的）：

homepage with secondary nav bar

我想图形以某种方式连接两个酒吧。我不知道，也许有像这些例子的图像：

example of link between bars example2 of link between bars

这是做这件事正确的方式？而且，在这种情况下这是一个很好的做法，我怎样才能以独立于屏幕宽度的方式定位“链接图像”？该位置必须基于其他元素的位置，或者可能以百分比为基础。它不能基于绝对定位。在这种情况下，实际上，调整屏幕会弄得一团糟像下面的图片：

resizing has made a mess

这是我与一些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（工作的唯一图标（切换）是左边的）。

来源

2013-03-27 superpuccio

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

<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-27 01:51:12 sqwk

谢谢，这似乎是一个很好的解决方案。我目前无法尝试，但我会尽快给您一个反馈。 – superpuccio 2013-03-27 12:21:35

以图形方式将主要导航栏与次要导航栏链接

回答

相关问题