使用Jquery Mobile製作nav導航欄

之前有分享過怎樣製作PC端的tab標籤的經驗,這次我來教大家使用Jquery Mobile框架來製作簡單的nav導航欄

方法/步驟

因為我使用的是Jquery Mobile的框架,所以我們需要事先做好一個頁面,引入Jquery Mobile的css樣式和JS樣式,還有就是頁面時HTML5頁面,並且是螢幕自適應的頁面。

以上這些都在頁面寫好之後,我們就開始進行導航欄的製作了。這個框架裡面的導航欄需要我們將DIV的屬性定義為data-role="navbar"

然後我們需要在導航欄的內部添加東西。一般都是添加嵌套的ul和li標籤的。標籤的最內層是a標籤

a標籤的連結使用的是錨記連結,我們需要寫出其他幾個連結頁面的代碼。

這樣一個簡單的導航欄就做好了,我們可以在瀏覽器中看一下大概的效果。可以看到三個導航是在一行顯示的。

我們以上做是三個導航,如果導航的數量增多了呢?一行最多可以放幾個呢?小編嘗試之後,得出的結論是一行最多放五個導航。

如果導航超過五個就會分行顯示,一般是顯示為兩個一行,如果是六個就顯示三行,如果是七個也是兩個一行顯示,多餘的一個再到下一行中顯示。

注意事項

小漁原創首發,歡迎點評。

相關文章

  1. 怎樣製作flash導航欄

    flash導航欄如何製作?說說閃客菜單是專業的flash導航欄製作工具 工具 碩思閃客菜單 步驟/方法 flash導航欄怎麼做?很多人都會詢問這個問題.對於諸位網站站長來說,想要讓自己的網站給搜尋引擎 ...
  2. 製作wordpress 導航欄

    如何製作wordpress導航欄?本經驗向你展示基於bootstrap的導航欄製作全過程.十分簡單.希望對你自製wordpress主題有所幫助. 工具/原料 wordpress bootstrap 方 ...
  3. 用css製作常見導航欄詳解

    用css製作常見導航欄詳解 方法/步驟 先寫好一個html的框架,加上導航欄的條目 <!DOCTYPE html> <html> <head> <meta h ...
  4. 在自學網頁設計路上:[2]如何製作簡單導航欄

    一個網頁必不可少的元素之一,導航,雖然各種創新已經逐漸把導航欄的"欄"給去掉了,以非欄架的形式製作出導航.所以,導航是一個網頁友好的入口,要學習網頁製作,製作導航欄是必須的. 工具 ...
  5. 製作html導航欄

    對於初學者來說,想要製作自定義的導航欄,就必須掌握以下方法 工具/原料 HBuilder 記事本 方法/步驟 首先,我需要進行初步的分析,導航欄可能會利用哪些html元素做成. 隨便打開任何一個導航網 ...
  6. 怎麼製作可伸縮導航欄

    可伸縮導航欄具有美觀大方.條目清晰的特點,合理的使用可伸縮導航欄會為我們的網站添加炫麗的效果.無論對於網頁美工還是網站開發人員來說,掌握可伸縮導航欄的製作將是基本功.其實製作導航欄的方法眾多,下面我們 ...
  7. 網頁製作之如何利用css樣式來製作網站導航欄

    利用Dreamweaver的css樣式來製作網頁非常方便,又便於以後更改樣式,下面一起來學習怎麼利用css樣式製作如下圖的網站導航欄. 工具/原料 Dreamweaver 方法/步驟 打開軟體,先用表 ...
  8. 如何製作一個導航欄

    網站通用的導航欄代碼 方法/步驟 首先要寫一個無序列表,並定義導航欄的內容(用div定義),代碼和效果如下. 然後在css中定義出導航欄的位置. 在定義li是導航欄浮動上去,並去掉格式,內容前面的小黑 ...
  9. 如何使用jquery mobile製作不同樣式的按鈕

    jquery mobile中包含了不同主題的皮膚,可以根據不同場景獲取不同樣式的控制項.其中,按鈕是一種常用的控制項,可以使用ui-btn.ui-btn-a.ui-btn-b等樣式.下面利用一個實例說明j ...
  10. 怎樣製作flah導航欄的小技巧

    碩思閃客菜單一flash導航欄製作工具,能夠製作出多種不同樣式的flash導航欄,下面是一些製作flash導航欄的小技巧. 工具 碩思閃客菜單 步驟/方法 優秀的flash導航欄菜單總是有其吸引人的地 ...
  11. html如何利用ul/li製作橫嚮導航欄?css做導航?

    Dreamweaver製作橫向的導航,怎麼用ul li列表來製作呢? 工具/原料 Dreamweaver CC2018 方法/步驟 新建一個html網頁,在body中輸入[<ul> < ...
  12. 用jquery製作自動移動子菜單的導航欄

    用jquery製作自動移動子菜單的導航欄 今天,我們要創建一個在選定其父菜單的基礎上自動移動子菜單的導航欄.每個子菜單依次他們的父菜單的順序水平堆疊.因此,當用戶他們光標移動到一個父菜單的子菜單將出現 ...
  13. 淘寶全屏店招及導航欄的製作方法

    淘寶店鋪裝修中,一個好的全屏店招和導航欄能夠拓寬消費者的視線範圍,給顧客營造恢弘大氣的店鋪印象.如下圖.本文詳述淘寶全屏店招及導航欄的製作方法. 方法/步驟 製作之前先進行分析.全屏店招的默認寬度是1 ...
  14. 網頁導航欄製作:[2]如何為網頁添加導航欄

    通常我們會利用PS等圖像處理軟體製作導航欄的效果圖,然後就需要將其添加到網頁中.今天小編就與大家分享一下為網頁添加導致欄的具體方法. 方法/步驟 打開Deamweaver8,新建一網頁文件.接著輸入以 ...
  15. 巧用PS製作淘寶通欄店招--店招導航欄製作(二)

    前兩篇分享了通欄店招的頁頭背景圖片的製作和上傳方法,這篇我們繼續分享店招通欄導航欄的製作與上傳方法. 方法/步驟 在店招通欄背景中我們截取一張1920*30的矩形圖片,並填充我們自己想要的顏色.為了達 ...
  16. 淘寶怎樣製作個性店鋪店招和導航欄

    店鋪導航是店鋪的一個關鍵部分,很多新開淘寶店鋪的都很頭疼店招的製件,購買現成的又不想花錢的,誰都想讓店鋪更有特色,那麼這就需要自己設計,自己製作的,下面的文章是小編親自折磨出來的,希望對大家有幫助.下 ...
  17. 使用Jquery Mobile框架製作可以跳轉的簡單頁面

    時下,用HTML製作手機端的頁面很是流行,下面小編就教大家用jquery Mobile框架,製作可以實現簡單跳轉的頁面. 方法/步驟 首先我們需要打開Deaweaver軟體,新建一個html5文件,並 ...
  18. 免費建站網站微企點如何製作導航欄

    免費建站網站微企點非常適合對代碼不熟悉的站長進行網站建設,下面介紹如何修改導航欄. 工具/原料 免費建站網站微企點 一個用微企點搭建好的網站頁面 方法/步驟 登錄微企點官網進入網站編輯器 網站內默認會 ...
  19. jquery 的導航欄

    導航欄 工具/原料 sublime Text 筆記本 電腦 方法/步驟 1.打開你的編輯器sublime Text 2.準備的HTML的代碼如下: <body> <nav id=&q ...
  20. Photoshop怎樣製作非常簡潔的灰色質感導航欄

    本教程介紹較為簡潔的按鈕製作方法.製作過程比較簡單:先用選區工具做出按鈕的形狀,然後填充想要的顏色.然後設置圖層樣式做出按鈕的質感.最後加上文字和小裝飾即可. 最終效果: 步驟/方法 1.新建一個50 ...