切換側邊欄以部分隱藏邊欄

我正在嘗試重新創建我在zurb.com上遇到的這一面的導航欄。簡而言之，它是一個帶有圖像和文本元素的導航欄。當您在導航欄外單擊時，它會自行摺疊以隱藏文字，只留下圖像。切換側邊欄以部分隱藏邊欄

目前尚不清楚如何部分隱藏單個「li」元素的方面。我原來的猜測是他們在「li」元素中創建了什麼類，並且在點擊時隱藏了其中一個類，但是基於看起來並非如此的代碼。

任何洞察將是非常有幫助的。即使是這樣的導航欄的公認名稱將有助於指導我尋求解決方案。謝謝！

來源

2017-02-15 MaxPowers

我做了一個乾淨的版本的您發佈的內容。

http://codepen.io/OfficialAntarctica/pen/MJxMKd

他們基本上已經定義了一個開放的寬度 - 這是不理想，但width:auto不與過渡工作，寬度是23行會爲你選擇什麼樣的項目有所不同。

來源

2017-02-16 00:15:02 Skylark

這似乎已經成功了。感謝您的解釋！ – MaxPowers

-1

一般的想法是，您知道菜單中圖標/圖像的寬度，並將菜單的寬度設置爲該寬度，然後隱藏溢出（菜單項中的文本）。然後，當您將鼠標懸停在菜單上時，可以轉換菜單的寬度，以便可以看到菜單文字。

*{margin:0;padding:0} 
 
nav { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 45px; 
 
    transition: width .5s; 
 
    background: #eee; 
 
} 
 
nav:hover, li { 
 
    width: 175px; 
 
} 
 
img { 
 
    width: 45px; 
 
    float: left; 
 
} 
 
li { 
 
    clear: both; 
 
    list-style: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><img src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> blah blah blah</li> 
 
    <li><img src="https://pbs.twimg.com/profile_images/796243884636512260/zHVoWqKV.jpg"> blah blah blah</li> 
 
    </ul> 
 
</nav>

來源

2017-02-16 00:10:58

如果我的回答是錯誤的，我會愛一個人解釋downvote（s），所以我可以從我的錯誤中學習。就我所知，這與OP鏈接的基本技術相同。 –

切換側邊欄以部分隱藏邊欄

回答

相關問題