php.amazeui,AmazeUI 导航条的实现示例
擁有易用的導航條對于任何網站都很重要。本文主要介紹了AmazeUI 導航條的實現示例，分享給大家，具體如下：
導航條Amaze UI
導航切換
其他
- 注冊
- 隨便看看
登錄
...
.am-topbar .am-text-ir {
display: block;
margin-right: 10px;
height: 50px;
width: 125px;
background: url(http://a.static.amazeui.org/assets/i/ui/logo.png) no-repeat left center;
-webkit-background-size: 125px 24px;
background-size: 125px 24px;
}
Amaze UI
...
Amaze UI
data-am-collapse="{target: '#doc-topbar-collapse-4'}">導航切換
class="am-icon-bars">
Amaze UI
data-am-collapse="{target: '#doc-topbar-collapse-5'}">導航切換
class="am-icon-bars">
效果圖：
AmazeUI各種的導航式菜單與解決方法
一、改造AmazeUI提供的手機端文字橫排菜單
AmazeUI提供的手機端文字橫排菜單的背景顏色是白色的，字體是藍色的，沒有提供相應的class去改寫里面的字體，
我們可以為背景與文字添加一個css，改寫其背景與文字顏色
效果如下：
代碼如下：
導航菜單-橫排文字式
/*這里是改寫文字的顏色*/
.am-menu-default .am-menu-nav a {
color:#222;
}
/*這里是改寫背景的顏色*/
.am-menu-nav{
background:#f1f1f1;
}
二、利用按鈕組與下拉按鈕
這里運用了解決Bootstrap導航欄的思想，《【Bootstrap】導航欄navbar在IE8上的缺陷與解決方案》(點擊打開鏈接)，但是AmazeUI的按鈕組與下拉按鈕的復合相當不給力。沒有提供下拉按鈕與按鈕復合的按鈕組。同時，其柵格化布局也無法約束其下拉按鈕的大小，因此，必須自己整幾個div，調節其width與margin屬性，規范其大小。
效果如下：
代碼如下：
導航菜單-下拉列表式
/*讓每一個下拉按鈕占據的寬度與居中*/
.am-dropdown{
width:30%;
text-align:center;
}
項目1
- 項目1-1
- 項目1-2
- 項目1-3
項目2
項目3
- 項目3-1
- 項目3-2
- 項目3-3
- 項目3-4
項目4
項目5
- 項目5-1
- 項目5-2
- 項目5-3
- 項目5-4
項目6
這里，每一行最好放置3個組件就好，設置css為text-align:center，還要補上一個margin-left:-1.5%才剛好其居中，width:100%占據一行。
其下的各個div占據30%的寬度。接著的各個按鈕、下拉按鈕其寬度必須是110%，這樣才能剛剛配合好原來的樣式，把按鈕與下拉按鈕符合起來。
其中，里面的li意為分割線。
三、利用無下拉項目的標簽頁
其實手機里面的導航真的無須使用下拉項目。下拉菜單在手機屏幕上是很難點的。直接利用標簽頁設置一個導航。代碼也短，用戶也不會不滿意。關鍵是AmazeUI本來就提供這種布局。然后，你再于這個頁面里面布置二級導航也可以。
效果如下：
代碼如下：
導航菜單-標簽頁布局
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
同時，AmazeUI也提供另一種風格的標簽頁布局，效果如下：
代碼如下：
導航菜單-標簽頁極簡布局
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
最后貼一下整個頁面的效果圖與代碼：
導航菜單導航菜單-橫排文字式
/*這里是改寫文字的顏色*/
.am-menu-default .am-menu-nav a {
color:#222;
}
/*這里是改寫背景的顏色*/
.am-menu-nav{
background:#f1f1f1;
}
導航菜單-下拉列表式
/*讓每一個下拉按鈕占據的寬度與居中*/
.am-dropdown{
width:30%;
text-align:center;
}
項目1
- 項目1-1
- 項目1-2
- 項目1-3
項目2
項目3
- 項目3-1
- 項目3-2
- 項目3-3
- 項目3-4
項目4
項目5
- 項目5-1
- 項目5-2
- 項目5-3
- 項目5-4
項目6
導航菜單-標簽頁布局
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
導航菜單-標簽頁極簡布局
- 項目1
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
到此這篇關于AmazeUI 導航條的實現示例的文章就介紹到這了,更多相關AmazeUI 導航條內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
總結
以上是生活随笔為你收集整理的php.amazeui,AmazeUI 导航条的实现示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax如何将数据写入文本框,ajax
- 下一篇： 备份恢复linux,备份和恢复Linux