以圖形方式將主要導航欄與次要導航欄鏈接

我試圖構建一個響應式網站。根據「內容優先」方法學，我正處於第一階段，我必須考慮最小的移動佈局。主頁（在建）是這樣的：以圖形方式將主要導航欄與次要導航欄鏈接

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

以圖形方式將主要導航欄與次要導航欄鏈接

回答

相關問題