JQuery Mobile 是一個響應式的 UI 框架，它可以幫助開發(fā)者在多種移動設備上創(chuàng)建美觀和易于導航的網(wǎng)站。其中一個最常用的元素是導航菜單，它允許用戶在網(wǎng)站的不同部分之間進行跳轉(zhuǎn)，那么在 JQuery Mobile 中如何創(chuàng)建一個導航菜單呢？

<div data-role="panel" id="myPanel">
<ul data-role="listview">
<li><a href="#home">首頁</a></li>
<li><a href="#about">關于我們</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>
</div>
<div data-role="header">
<h1>歡迎來到 JQuery Mobile</h1>
<a href="#myPanel" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">導航</a>
</div>

上述代碼創(chuàng)建了一個具有三個鏈接的導航菜單。<div> 元素的 data-role 屬性設置為 "panel"，這意味著它是一個面板（panel），用于在網(wǎng)站的各個部分之間進行導航。<ul> 和 <li> 元素創(chuàng)建一個列表的結(jié)構(gòu)，<a> 元素作為每個鏈接。通過將鏈接的 href 屬性設置為相應的網(wǎng)站頁面的 id，用戶可以通過點擊鏈接在網(wǎng)站的不同頁面之間進行導航。

<div> 元素的 data-role 屬性設置為 "header"，這意味著它是網(wǎng)站的標題欄。<a> 元素中的 class 屬性創(chuàng)建了一個菜單按鈕，用于打開導航菜單。ui-btn 屬性為按鈕創(chuàng)建了一個樣式，ui-icon-bars 屬性添加了一個圖標，ui-btn-icon-notext 屬性使按鈕的文本不可見，而 ui-corner-all 屬性添加了一些圓角來使按鈕看起來更加美觀。

通過簡單的 HTML 和 JQuery Mobile，您可以輕松地創(chuàng)建一個美觀且易于導航的網(wǎng)站。JQuery Mobile 提供了許多其他的組件和樣式來幫助您創(chuàng)建真正適合移動設備的網(wǎng)站。