計算機, 軟件
如何使一個下拉菜單，CSS
今天，我們會考慮的“如何創建一個下拉菜單CSS？”的問題。 應該說一次，這個項目將在不連接任何額外的資金進行。 也就是說，菜單將只與CSS和HTML創建。
訓練
為了充分了解它是什麼的文章中，你需要一點點地得到與理論認識的材料。 但是，如果你熟悉偽類，你可以跳過這一段。 因此，建立一個垂直下拉菜單CSS，我們需要一個元素«：懸停»。 偽«：懸停»可以被分配到任何 HTML標籤。 它允許您定義，當一個項目將鼠標懸停的瞬間。 例如，我們已經約定財產：«：懸停{顏色：紅色;}»。 此項意味著當你懸停鼠標會變成紅色的任何標籤的內容。 值得注意的是，這個偽元素也被滅活。 順便說一句，«：懸停»有相關類似的元素。 但從這一點，我們將創建一個偽CSS下拉菜單。
指令
首先，讓我們了解什麼是一個下拉菜單。 根據這一定義得到了很多不同的方法構建不同的佈局。 在這種情況下，我們將分析的結構包括幾個經常可見的項目和一些附加的（隱藏）。 讓我們結束與理論，並開始練習。
- 我們創建菜單的佈局。 要做到這一點，HTML代碼標籤。 創建嵌套列表：
-
- < / UL>。 這樣的事情應該看起來像你的下拉菜單。 CSS以後介入。 在這種情況下，主列表包括封閉的三個主要領域和兩個。
- 隱藏子菜單。 為此，我們使用樣式表，定義以下屬性：UL UL {顯示：無;} 這將刪除從屏幕上第二列表的元素。
- 創建CSS菜單，從主列表下拉。 在級聯樣式表寫入以下規則：UL李：懸停UL {顯示：塊;}。 此條目意味著，當鼠標在元件裡，它位於UL列表顯示在屏幕UL（附後）。 乍一看，這種方案可能看起來撲朔迷離。 但事實上，一切都非常簡單。
- 通過插入標記
- 您的內容使用自己這個佈局。 您可以更改列表中元素的個數。
裝飾的變化
一旦主菜單佈局已準備就緒，就可以進行註冊。 也許，很多擺在首位願意擺脫指示列表項標記。 這是使用一個單一的財產CSS，即列表樣式類型來完成的。 您需要添加以下條目：李{列表樣式類型：無;}。 然後，你可以插入幀，使 背景。 邊框和背景幫助你與此有關。 或許有些人會不喜歡的下拉菜單中會顯示為一個列表，在相同的基本要素推動。 為了解決這個問題，你可以定位。 要做到這一點，級聯樣式表寫上如下條目：UL UL {位置：絕對的; 左：15px的; 右：15px的; 頂部：15px的; 底部：15像素;}。 當然，值你會用你自己的。 這取決於你想看到的下拉菜單，CSS將提供更多的功能，可以添加各種效果和裝飾我們的名單。
結論
再次值得注意的是菜單佈局建設。 要分配在這種情況下嵌入值中使用的CSS規則，例如，UL UL。 如果你的文件，以滿足其他類似的結構，可能會有很大的問題。 在這種情況下，你需要使用一個特定的目的，例如，選擇或ID-ID的。 以上文章佈局下拉菜單的設計，熟悉的一般設計。 這項工作的休息停留在你的肩膀上。
Similar articles
Trending Now