jQuery Mobile浮動導航可以極大地提高移動端用戶的交互體驗。它能讓你在頁面的頂部、底部等任意位置放置一個固定條，使得用戶能夠快捷地瀏覽不同的內容。接下來就讓我們來詳細了解一下如何創建一個漂亮的jQuery Mobile浮動導航吧！

<div data-role="navbar">
<ul>
<li><a href="#">熱門</a></li>
<li><a href="#">最新</a></li>
<li><a href="#">推薦</a></li>
</ul>
</div>

如上所示，我們首先需要在一個div標簽上設置data-role="navbar"，這能告訴jQuery Mobile這是一個浮動導航的塊。然后我們在div里面放置了一個ul標簽，再在ul中定義不同的li標簽作為不同的導航條目。其中，a標簽的href屬性可以設置跳轉鏈接。

接下來我們要美化一下這個浮動導航。jQuery Mobile提供了一些靈活易用的主題工具，我們可以很容易地讓導航看起來更加出色。

<div data-role="navbar" data-theme="b">
<ul>
<li><a href="#">熱門</a></li>
<li><a href="#">最新</a></li>
<li><a href="#">推薦</a></li>
</ul>
</div>

如上所示，我們在data-role="navbar"后面加上了data-theme="b"，這樣就可以為導航添加深色主題。大家可以根據自己的喜好選擇不同的顏色主題。

最后，我們需要注意一點，當導航位置不是在頁面頂部時，需要設置一個padding-top或padding-bottom以確保頁面內容不會被導航條所遮擋。

如此一來，我們就可以輕松創建出一個美觀、易用的jQuery Mobile浮動導航了！