CSS浮動展開式菜單顯示內容

請親切的給我，因爲我是一個noob。我已經在html中創建了一個頁面，但現在我需要做一些我認爲html無法做到的事情。在左側，我正在創建一個擴展的浮動菜單。這將是垂直的。當你點擊第一個選項時，它會隨着指令展開，然後你可以關閉它。然後人們可能跳到第四。一直以來，都會有一個主要的html映射（已經完成），他們可以嘗試指令中的內容。我完全是CSS的新手。我發現了與我想要的相似的東西，但並不完全。CSS浮動展開式菜單顯示內容

<style> 
    body { 
     margin: 0; 
    } 

    ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 15%; 
background-color: #f1f1f1; 
position: fixed; 
height: 50%; 
overflow: auto; 
    } 

    li a { 
display: inline; 
color: #000; 
padding: 8px 0 8px 16px; 
text-decoration: none; 
    } 

    li a.active { 
background-color: #4CAF50; 
color: white; 
    } 

    li a:hover:not(.active) { 
background-color: #555; 
color: white; 
    } 
    </style> 

    <body> 

    <ul> 
     <li><a class="active" href="home.htm">Home</a></li> 
     <li><a href="#one.htm">One</a></li> 
     <li><a href="#two.htm">TWo</a></li> 
     <li><a href="#Three.htm">Three</a></li> 
    </ul> 

    <div style="margin-left:15%;padding:1px 16px;height:1000px;"> 
    <img src="image.png" width="1200" height="900" usemap="#map" /> 

    <map name="map"> 

    </map> 
    </div> 

    </body>

我可能完全沒有這個。我開始學習CSS，所以我可以更好地理解這一點。任何和所有的建議會很好。先謝謝你。

來源

2015-12-22 user2022089

我覺得你要找的是手風琴菜單。

如果你想使用純CSS，你需要使用CSS轉換。做了一個快速谷歌搜索，發現了一個簡單的例子： http://bradsknutson.com/blog/css-only-accordion/

如果你不介意使用一些JavaScript然後jQuery用戶界面有一個快速和易於使用的摺疊式菜單，你可以選擇不同的選項（例如排序菜單等等）。如果您之前沒有使用jQuery UI，您可能需要學習jQuery設置基礎知識。 https://jqueryui.com/accordion/#sortable

來源

2015-12-22 20:14:07

看起來我正在學習CSS。謝謝！ – user2022089

CSS浮動展開式菜單顯示內容

回答

相關問題