HTML 中的水平選單列

在 Html 中，我們有一組不同的功能來使用突出顯示並且對用戶端更具吸引力。我們已經在上一篇文章中討論了滾動條，就像選單列中的相同的東西也為用戶端提供了更多的設施。一般來說，選單列有助於對內容進行分類並增加網頁的可讀性。要在用戶端選單列中獲得更多互動性，可以以最簡單的方式幫助您。捲軸有水平和垂直兩種類型，就像選單列中的一樣，也是開發人員必須使用的東西。我們將在下面的概念中看到更多細節。

文法：

在使用水平/垂直選單列時，我們必須使用 CSS 來反映 HTML 頁面各個部分的樣式。一般來說，導覽列需要一些標準 HTML 作為實作子文件或子衍生文件的基礎。導覽列或水平欄基本上有一個連結列表，因此使用

和

elements 是以下基礎知識的語法。

<style>
ul{
}
li variablename:hover{
}
</style>

上面的程式碼是水平選單列的基本語法。

HTML 中的水平選單列範例

我們已經看到了一些範例，可以更好地理解這些概念。

範例#1

代碼：

<style>
ul {
margin: 5;
padding: 5;
background-color: green;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover {
background-color: #111;
}
.active {
background-color: green;
}
</style>

• Home
• About
• Contact

範例輸出：

在上面的範例中，當我們建立網頁時，我們將在水平視圖中顯示選單項，通常我們只會看到水平面板中的選單項，因為這裡的使用者自訂視圖是逐行的，所以我們將使用水平方向。相同的 CSS 樣式類別可用於所有 HTML 文件。

範例#2

代碼：

<p style="font-family:Comic Sans MS">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</p>

範例輸出：

第二個範例與第一個範例相同，但這裡我們不會在 HTML 文件中使用任何 CSS 樣式。

標籤我們將使用一些 CSS 樣式，如字體系列、寬度、高度等

範例#3

代碼：

<style>
ul {
margin: 5;
padding: 5;
background-color: #333;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>

• Home
• About
• Contact

範例輸出：

一些免費的水平選單類型：

每個功能都是針對不同場景的一些集合。水平選單中的一些東西是一些純CSS，此外他們還將使用javascript來確保它們具有響應能力並在行動裝置上工作。

有些水平導航運作正常，但腳本不支援某些功能，還有瀏覽器相容性問題。在網站設計中，水平條非常適合簡約的外觀，也可以很好地為使用者提供簡單的導航介面空間。

橘色響應式水平導航選單：

它是橫向選單中的一種，它是一個輕量級、簡約的選單，完全純CSS樣式。該選單還可以響應並轉換為行動裝置上的垂直選單類型，支援查看小螢幕以使用手機。在桌面上，他們不會改變任何東西，它只能在網頁瀏覽器螢幕上運行，在手機上也一樣。

範例：

<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>


<div id="cssmenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

輸出：

綠色選項卡水平選單類型：

此選單是選項卡式介面中水平面板的設計模式之一。它將使用大量且昂貴的應用程序，例如購買/銷售產品商品應用程序，這將有助於最終用戶非常快速且輕鬆地單擊不同的菜單項，以將結果從資料庫獲取給用戶。在上面的類型中，我們將使用一些腳本，例如 jquery，但這裡我們將只使用 HTML 和 CSS，因此它將快速將資料載入到使用者螢幕。讓我們以上一個主題中的相同範例

範例：

<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>


<div id="cssmenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

輸出：

我們採用了相同的範例，但我們修改了一些 CSS 樣式並更新了 HTML 檔案。每當我們將滑鼠遊標放在選項卡中時，它都會自動突出顯示上述綠色文本，因此當滑鼠遊標根據使用者選擇移動到另一個選項卡時，它會發生變化。

單槓氣泡包裹：

在此功能表列中，與先前的類型相同，我們將在 HTML 上使用完全 CSS 樣式。此外，我們將新增啟用的 border-radius 屬性，然後它看起來像氣泡類型。我們將看到具有不同 CSS 樣式的相同範例，以及顯示的輸出，如下面的程式碼和結果。

範例：

<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>


<div id="cssmenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

Output:

We have taken sample examples as we discussed in the previous horizontal types but additionally, we add the border-radius in the style sheet.

Conclusion

Finally, we have concluded the session, like we have discussed in previous topics each and every HTML concepts have some more additional features that will depend on the versions. And also browser compatibility issue when comes to one version into another version. In the above horizontal menu bar not only the above concepts it will have further concepts also the same horizontal menu with textured tabs, and we have also used jquery plugins for further user attractive features if we need. If we won’t use the chrome browser in the web page output so we can add the tabbed and additionally blue screen type in CSS styles. When compare to HTML we have some additional features in jquery plugins.

以上是HTML 中的水平選單列的詳細內容。更多資訊請關注PHP中文網其他相關文章！