與CSS的多行菜單

-3

我試圖創建一個userfriendly多個OnePage網站。與CSS的多行菜單

通常，在OnePage網站中，您有一個包含定位點的菜單。我現在想要做的是有一個主菜單，其中包含鏈接到3個獨立的OnePages和一個包含有關當前OnePage的錨點的子菜單。

換句話說：我想要做的是創建3頁，這3個頁面應該在主菜單中各自擁有自己的超鏈接按鈕。當你訪問這些頁面之一時，你應該在主菜單下面有一個子菜單，其菜單中的所有定位點都與該頁面有關。

我的問題是，你能在這樣的設置與CSS實現這一目標？

<ul class="primary"> 
<li class="page_item"> 
    <a href="#" class="external active">Home</a> 
    <ul class="children"> 
    <li class="page_item"> 
    <a href="#" class="">Start</a> 
    </li> 
    <li class="page_item"> 
    <a href="#" class="">About us</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Partners</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Courses</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Contact us</a> 
    </li> 
    </ul> 
</li> 
<li class="page_item page-item-1522"> 
    <a href="#" class="external">Education</a> 
    <ul class="children"> 
    <li class="page_item"> 
    <a href="#" class="">Start</a> 
    </li> 
    <li class="page_item"> 
    <a href="#" class="">Products</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Advantages</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Our Clients</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Contact us</a> 
    </li> 
    </ul> 
</li> 
<li class="page_item page-item-1522"> 
    <a href="#" class="external">Corporate</a> 
    <ul class="children"> 
    <li class="page_item"> 
    <a href="#" class="">Start</a> 
    </li> 
    <li class="page_item"> 
    <a href="#" class="">Products</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Advantages</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Our Clients</a> 
    </li> 
    <li class="page_item"> 
    <a href="# class="">Contact us</a> 
    </li> 
    </ul> 
</li> 
</ul>

來源

2014-12-03 pmr

你有什麼嘗試？你想讓我們爲你的谷歌「CSS下拉菜單」？在CSS下拉菜單的網頁上有很多例子。 – CaldwellYSR 2014-12-03 22:00:34

我確實是谷歌這個，thnx的報價。不，沒有找到任何多行的例子。 – pmr 2014-12-03 22:04:40

目前還不清楚CSS與這個問題有什麼關係。弄清楚你想如何設置你的html標記，然後你可以開始在CSS上工作。另外，「多個OnePage」聽起來像是一個矛盾。 – wentz 2014-12-03 22:04:42

我曾經有過同樣的問題。

最後我分開子菜單出主菜單，即

<h2 class="hidden">Main Menu</h2> 
<ul> 
    <li class="selected">Home</li> 
    <li>Education</li> 
</ul> 
<h3 class="hidden">Sub Menu</h3> 
<ul> 
    <li>Start</li> 
    <li>About Us</li> 
    ...etc... 
</ul>

我寧願不要做這種方式，而是做你所建議。然而，由於我的主導航結構，如果每個子菜單都包含在主菜單的<li>標籤中，我將需要依靠一些討厭的定位技巧，以便將所有內容轉移到頁面的左側邊緣。

有可能是一個更好的辦法，但一個快速和骯髒的方法，我想出了剛纔如下：

[CSS]

nav { 
    position: relative; 
    padding-bottom: 30px; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    vertical-align: top; 
    margin-right: 30px; 
} 

ul li ul { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

[HTML]

<ul> 
    <li>Home</li> 
    <li>Education 
     <ul> 
      <li>Start</li> 
      <li>About</li> 
     </ul> 
    </li> 
    <li>Other</li> 
</ul>

來源

2014-12-04 00:21:38 MrCarrot

與CSS的多行菜單

回答

相關問題