1. 首頁
  2. 問答
  3. 垂直導航子菜單與圖像上下鏈接每個級別與選定頁面上的活動鏈接突出顯示

垂直導航子菜單與圖像上下鏈接每個級別與選定頁面上的活動鏈接突出顯示

2013-08-07 23 views
0

我有以下css垂直導航菜單我已經完成。父類別的上下圖像爲翻轉30px高，併爲25px高的菜單翻轉的第二層和第三層分開上下圖像。垂直導航子菜單與圖像上下鏈接每個級別與選定頁面上的活動鏈接突出顯示

對於每個級別，如果沒有連續類別，則存在不同類型的上下圖像。

它工作正常，除了我一直在努力的幾天，現在似乎無法看到我出錯的地方。

第一個是由於某種原因，每個級別的文本越來越小，第二個是在第三個級別，所有的圖像都顯示了上下圖像，好像它有一個持續的類別，最後但是並非最不重要，當在第一，第二或第三類中選擇一個類別時，我似乎無法找到一種方法來突出顯示這些鏈接，以向用戶顯示它們在該區域。

我希望有人能夠解釋這一點，因爲我現在已經瘋了好幾天。提前致謝。

請在下面找到當前代碼（在圖像區域我已經描述了圖像是明白我在用的圖像）：

的HTML：

 <div id="nav"> 
      <ul class="menu"> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
      </ul> 
     </div>

的CSS：

#nav { 
    float:left; 
    width:200px; 
    z-index:1; 
} 
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu { 
    display:block; 
    width:200px; 
    margin:0; 
    padding:0; 
    list-style-type: none; 
} 
#nav ul.menu > li { 
    float: left; 
    display:block; 
    width:200px; 
    height:30px; 
    font-size:0.9em; 
    line-height:2.2em; 
    margin-bottom:1px; 
} 

#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li { 
    float: left; 
    display:block; 
    width:200px; 
    height:25px; 
    font-size:0.7em; 
    line-height:2.2em; 
} 

#nav li a { 
    display:block; 
    width:200px; 
    color:#FFF; 
    text-decoration:none; 
    font-weight:bold; 
    text-transform:uppercase; 
    list-style-type:none; 
} 

#nav ul.menu > li > a { 
    background: transparent url('../../parent-category-with-submenus.png'); 
    display:block; 
    width:200px; 
    height:30px; 
    margin-bottom:1px; 
} 

#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li { 
    background: transparent url('../../second-third-categories-with-submenus.png'); 
    display:block; 
    width:200px; 
    height:25px; 
    margin-bottom:3px; 
} 

#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a { 
    background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png'); 
    display:block; 
    width:200px; 
    height:25px; 
    margin-bottom:3px; 
} 

#nav ul.menu ul ul li { 
    float: none; 
    list-style-type: none; 
} 
#nav li > ul { 
    display: none; 
    list-style-type: none; 
} 
#nav li:hover > ul { 
    position: absolute; 
    display:block; 
    width:200px; 
    padding:0; 
    margin-top:0px; 
    margin-left:192px; 
} 
#nav li:hover > ul.sub-menu { 
    position: absolute; 
    display:block; 
    width:200px; 
    padding:0; 
    margin-top:-40px; 
    margin-left:198px; 
} 
#nav li:hover > ul.sub-sub-menu { 
    position: absolute; 
    display:block; 
    width:200px; 
    padding:0; 
    margin-top:-30px; 
    margin-left:198px; 
}

來源

2013-08-07 R A

回答

1

字體大小

由於您使用的是em s，因此字號變小。 em是一個相對單位。如果您的基礎字體大小爲20px，並且您使用的是0.75em，那麼父級使用基本20px字體大小的子元素的字體大小將爲15px（20x0.75 = 15）。現在這個孩子（孫子）的孩子將以孩子的字號爲15px開頭，字號爲11.25px（15x0.75 = 11.25）。我將下面的jsFiddle中的所有li的文字設置爲16px。

UP和DOWN圖像

我沒有理會找出確切的問題與此，但你確實有很多kruft在你CSS的這一部分。我會添加一個類到li，其中有一個子菜單。像.has-sub-menu。然後定位錨標記，如.menu > .has-sub-menu > a和.sub-menu > .has-sub-menu > a。另請參閱下面的jsFiddle。

HTML 

<div id="nav"> 
    <ul class="menu"> 
     <li><a href="/" title="">Home</a></li> 
     <li class="has-sub-menu"> 
      <a href="/" title="">Home</a> 
      <ul class="sub-menu"> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

.menu > .has-sub-menu > a { 
    background-image: url(img-one.png); 
} 
.sub-menu > .has-sub-menu > a { 
    background-image: url(img-two.png); 
}

導航突出

這一個不能用CSS做，除非你加個班每個li或錨標籤。沿着頁面名稱的行，然後在每個頁面上添加一個具有相同或相似名稱的主體類。

HTML

<!-- your code --> 
<body class="products"> 
    <!-- more of your code --> 
    <div id="nav"> 
      <ul class="menu"> 
       <li class="products"><a href="#">Products</a></li> 
       <li class="about"><a href="#">About</a></li> 
       <!-- more links --> 
      </ul> 
      <!-- more links --> 
    </div> 
    <!-- more of your code --> 
</body>

在上面我們正在查看的頁面products的例子。對於about頁面，您可以用about替換body標籤上的類。最後，這不一定要添加到身體標籤，而是一些其他祖先元素。但body標籤是一個很好的乾淨的解決方案，有助於確保類將被封裝在另一箇中。

然後你可以像你的CSS那樣定位鏈接。

CSS

/* non-active */ 
#nav li { 
    color: white; 
    background-color: red; 
} 

/* active */ 
.products .products, 
.about .about { 
    color: red; 
    background-color: blue; 
}

如果上述不那麼doeable我相信你會通過PHP，ASP，或者你必須提供給您的任何服務器端語言做一些輕程序。你也可以使用JavaScript。您還可以通過簡單的StackOverflow搜索找到答案。

下面的提琴解決了上述解決方案的所有三個問題。我還添加了一個小jQuery，以便您可以切換出來並嘗試導航高亮顯示。

http://jsfiddle.net/u2V8v/

來源

2013-08-07 06:14:19 hungerstar

+0

謝謝你的回答。關於字體大小的第1部分是正確的。我通常使用「px」，但意外換到「em」，而沒有使下一個菜單固有。感謝那。至於上下圖像區域，如果你閱讀，你會看到我已經在我上傳的腳本中完成了這個。這個答案在@koala_dev的「Issue＃2」下面。對於第三部分，你說的方式是我如何去做，但是當我必須保持第二和第三子菜單的高亮顯示時，問題就出現了。但是這個想法是合理的，謝謝。你得到3分中的2分，所以答案標記就是你的。謝謝。 –

1

問題＃1：文本得到在子菜單中較小的，因爲你有這樣的規則

#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li { 
    ... 
    font-size:0.7em; 
    ... 
}

而第一級項目的默認是

#nav ul.menu > li { 
    ... 
    font-size:0.9em; 
    ... 
}

要麼刪除字體大小decalaration的子菜單或設置價值inherit

問題2：

我無法測試日是因爲我沒有你的圖片，所以我不知道這是什麼造成的問題，但似乎你錯過了> a在這個CSS規則選擇結束

#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li { 
    background: transparent url('../../second-third-categories-with-submenus.png'); 
    ... 
}

問題＃3

爲了突出菜單項，你可以只設置懸停狀態的背景顏色，他們將保持突出，而用戶瀏覽子菜單

#nav ul li:hover{ 
    background:red; 
}

來源

2013-08-07 06:12:24

+0

您的問題＃1的答案是正確的，以保持字體大小相同的子菜單的父菜單，但我需要不同尺寸的每個所以從以上的@hungerstar答案是更準確，但謝謝。問題＃2的答案是現貨！那正是我正在尋找的。看不到它。再次感謝你。至於問題＃3，問題是關於保持活動鏈接處於活動頁面的設置背景。您的建議已經在我上傳的腳本中。由於您的問題＃2只有答案，而且我只能打勾，所以我必須將答案標記爲hungerstar。對不起，但謝謝。 –

相關問題

 相關問題