1. 移動APP的常見的幾種導航形式
當確定了APP的設計需求和產品的整體結構之後，要著手開始規劃和製作APP的原型及UI界面。一款APP的好與不好，很大部分取決於APP界面布局的合理性。這個時候就要想以最優的設計結構將APP的內容展現給用戶，那麼，如何將信息以最優的形式展現出來呢？這就涉及到了APP的導航應用方式，可以說一個優秀的導航設計對一款App的核心體驗起到了決定性的作用！
知道了導航的重要性，在考慮導航設計時，需要注意以下事項：
1.可達性：
移動應用的導航功能可以說是所有界面最重要的組成部分，因此一定要保證其可達性，並把最關鍵的要素盡量突出，同時不要影響到內容本身。
2.目的性：
確保導航中的每個按鈕要素簡單明了，有明確的引導用戶點擊的目的性。讓用戶一看就知道是什麼意思以及操作結果是什。不要弄的太過花哨，這樣反而會讓迷惑用戶，起到反作用。
3.易於理解：
如果想設計比較高級的導航功能（例如鏈接圖片、允許滑動或其他手勢導航，或者訪問隱藏菜單），請務必在設計過程中保證前後一致，以便用戶熟悉你所使用的模式，同時還應加入一些額外的信息（例如小箭頭、文字或改變顏色或高亮等）來吸引用戶注意力，並以微妙的方式對用戶進行引導。不要給用戶呈上「看得見摸不著的導航功能」。
4.通用性
導航功能應當以一定的形式顯示於移動應用的各個界面。各個導航模式不一定要完全相同，但其基本結構應當在應用內保持一致，可以根據背景進行小幅度的調整。
明確上述幾點注意事項後，將APP的信息結構分層，把主要、最核心、最根本的功能放在第一層級，次要內容放在第二層級甚至更深。然後根據層級關系、結構關系確定導航的形式。
結合產品的深度和廣度來共同探討一下目前APP界面常見的幾種導航形式，並分析其優缺點，從而進一步判斷每一種導航形式更適合應用於哪種類型的APP！
標簽式導航，也就是常說的Tab式導航。是目前應用最廣泛、最常見的導航形式。
標簽式導航可分為 頂部標簽式導航、底部標簽式、舵式導航（底部擴展式導航）。
頂部標簽式導航
頂部標簽式導航顧名思義，存在於頁面的頂部。頂部標簽導航多應用於android平台，因其平台特性，底部含有虛擬的物理按鍵，如華為手機存在手機屏幕內的物理按鍵。
很多App為了適配安卓平台，採用了頂部標簽式導航，目的是為了不與底部虛擬按鈕組合在一起產生的信息堆疊和誤操作，這也是一種妥協行為。但不斷升級的Android平台app現如今也和ios盡量保持一致。
不過也有很多ios平台根據產品結構應用此類型的導航。
上圖是蝦米音樂app首頁導航模式，採用了頂部標簽式導航。這樣設計是為了 更多展示標簽下的內容，還有一點是支持快捷操作 。方便展示/點擊下方快捷區域的內容和按鈕（當前曲目、歌手、播放/暫停和下一曲）。
底部標簽式導航
底部標簽式導航是最常用的導航形式，一般存在於頁面底端，不超過5個模塊。
如果應用需要用戶 頻繁的在不同分頁切換 ，可以採用這種導航，如上圖微信最新版的APP界面設計圖。這種導航欄符合拇指操作熱區。
舵式導航（底部擴展式導航）
舵式導航是底部導航的一種擴展形式，是一種變體。因為它的樣式很像輪船上用來指揮的船舵，兩側是其他操作按鈕。
當頁面有處於同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口 ，就可以採用這種APP導航模式。 中間項標簽不緊操作最頻繁，最重要，且需要引人注意，方便尋找 。
左圖為懶人聽書App，右圖為新浪微博手機客戶端。兩款App的主要功能都採用了舵式導航的布局方式，將操作最頻繁的按鈕進行特殊處理，在視覺設計上突出，與導航上的其他按鈕進行區分，引導用戶操作。
頂部導航+底部導航（雙導航模式）
今日頭條和網易新聞這種新聞類APP，由於內容、分類較多，運用頂部和底部雙tab導航，而切換頻率最高的tab放在頂部，這是為什麼呢？因為新聞在每個tab都是沉浸式閱讀，最常用的操作是在一個tab中不斷地下滑閱讀內容，將常用的tab放在頂部，向左或向右滑動切換tab的手勢操作，能帶來更好地閱讀體驗。
在兩種情況下可以選擇頂部tab式導航：某項功能必須固定在底部，那麼其他tab只能固定在頂部，但為了方便操作，頂部tab導航最好支持手勢操作，即滑動即可切換;該APP是沉浸式體驗，如新聞、小說等，為了帶給用戶更好的閱讀體驗，可以將tab放在頂部。
實際上，底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式，他不怎麼出彩，但是絕對不會犯錯。在大屏幕時代，底部Tab模式的導航更能適應，也更好設計。
適用於：
入口分類數目不多，可以控制在5個以內，且用戶需要在入口間頻繁切換來執行多個任務
注意：
結構太過復雜而且不穩定的應用不適合標簽式導航。
抽屜式導航模式一般採用將導航主體隱藏在app側邊的方式，以一個按鈕來呼出導航，在使用完成之後在使用相同的按鈕隱藏起來。一拉一縮，從形象上與抽屜類似，因此稱之為抽屜式導航。
抽屜式導航的核心思路是「隱藏」。隱藏非核心的操作與功能，讓用戶更專注於核心的功能操作上去。 設想你的產品信息層級有非常多的頁面和內容，難以在一屏內顯示全部內容，那麼你一定首先會想到去設計一個底部或頂部的tab導航，但導航太多無疑顯得臃腫，而且使用戶難以點擊，那麼這個時候，抽屜式導航是個不錯的選擇。
抽屜式導航存在幾個缺陷：
1.左上角的導按鈕存在於單手拇指操作熱區難以到達的位置，導致導航按鈕難以觸達；2.降低了用戶對產品一半的參與度；3.可見性低。
有些人認為「現在的APP的發展不僅僅是從前單一的功能，功能隨產品的發展變得越來愈多，抽屜式導航已經不適應大多數的產品，這種導航終將被遺棄」。但是，導航欄的使用方式並不是單純隨著看產品的功能增加而不被使用，而是隨著整個產品的信息結構和功能形式來設計決定的。拋開產品的功能表現而去講產品設計是不合理的。
何種情況下適合使用抽屜式導航：
1.如果應用主要的功能和內容都在一個頁面裡面。只是一些低頻操作內容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。
2.如果應用有不同的視圖，且他們是平級的，需要用戶同等地對待，抽屜欄將會浪費掉大多數的用戶對於側邊欄中入口的潛在參與度和交互程度。
3.在大屏時代使用抽屜欄，手勢操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個不錯的選擇。
注意：
需要用戶有一定參與的信息層級，最好不好放置在抽屜欄
跳板／快速啟動／宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。
採用這種導航的應用已經越來越少， 往往用在二級頁作為內容列表的一種圖形化形式呈現，或是作為一系列工具入口的聚合。 如下圖新浪微博，點擊導航欄中間的發布按鈕，彈出二級菜單，這個二級頁面就是採用的宮格式導航，作為發布微博的入口。
這種導航模式非常常見，但是卻不常用。
無論你用的是Android還是iOS，每天一打開手機，宮格式導航就會對你說hello了。
每一個APP都是一個宮格，這些宮格聚集在中心頁面，用戶只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用於各平台系統的中心頁面。
宮格式導航的缺陷 ：
信息互斥，無法相互通達，只能給用戶帶來了更多的操作步驟。無法讓用戶在第一時間看到內容，選擇壓力較大。
何種情況下適用於宮格式導航：
適合入口相互獨立互斥，且不需要交叉使用的信息歸類
注意：
一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。
列表式導航結構清晰，易於理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。作為輔助導航來展示二級甚至更深層級的內容
列表式導航分為3類： 標題式列表、內容式列表、嵌入式列表。
標題式列表 :一般只顯示一行文字，有的顯示一行文字加一張圖片等等。
內容式列表： 主要以內容為主，所以在列表中就會體現出部分內容信息，點擊進去就是詳情。
嵌入式列表： 嵌入式其實就是由多個列表層級組合而成的導航。能很好的解決次要功能非常多的問題
所有關於列表導航的例子大部分都是依附於標簽導航之上的。前面我就說過現在以列表形式作為主導航的產品是越來越少，因為確實它不是一個好的主要展示形式。 列表項目可以通過間距、標題等進行分組，形成擴展列表。 列表菜單導航可以將重要的UI部分以列表的形式進行呈現，讓用戶可以滾動查看自己要執行的操作或內容。
而在二次層級上，它們還會 將列表分模塊進行展示 ，如微信中「我的」模塊「新消息通知、隱私、通用」是一組，「幫助與反饋、關於微信」又是一組。雖然你能看到，但是不仔細觀察就不會發現其中的要點。只要善用這個細節，可以更好的加以區分次要功能，並提升用戶體驗度。
懸浮icon導航，是將導航頁面分層，無論你到達APP的哪個頁面，懸浮icon永遠懸浮在上面，你依靠懸浮層隨時可以去想要去的地方。
懸浮式icon會遮擋某些頁面的操作，在設計的時候應該考慮進去，比如無論在那個頁面永遠為懸浮icon留有位置。
標簽式導航： 最常用、最不易出錯，請第一時間考慮它
抽屜式導航： 如果你的信息層級繁多，可以考慮將輔助類內容放在抽屜中
跳板式／宮格式導航： 不建議在APP中作為主導航使用，如果非使用不可，請增加跳轉的關聯性
列表式導航： 作為輔助導航來展示二級甚至更深層級的內容，每個APP必不可少，但請注意數量與分類
懸浮式導航： 更適應大屏的導航模式，不妨試一試，但注意不要讓它遮擋住某些頁面的操作
還是那句話，優秀的app導航設計，能夠合理地完美展示產品的功能，並快速引導用戶使用，增強用戶的識別度。合理的導航設計，會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。
感謝大家的耐心閱讀，還有一路陪伴的行業大牛為我指點迷津！如果內容觀點有不對的地方，歡迎批評指正！
2. 求一個Android的室內導航app源碼啊
室內導航 這個難度大了，只是android沒用的吧。需要硬體設備支持啊
3. 織夢移動端網站導航怎麼修改啊
如果是動態的就是用的調用，直接調用的你的欄目！如果你想固定可以重新寫手機端模板文件的導航處的代碼，直接一條條寫進去！
4. 求大神用HTML5和CSS做出這個導航條，求源代碼，急求大神幫忙
看看合不合你用
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<styletype="text/css">
*{margin:0;overflow:hidden;}
i,em,strong{font-style:normal;}
.bar{border-radius:10px;width:450px;box-sizing:;}
.sndliem{display:block;float:right;height:30px;border-right:1pxdashed#666;margin:5px000;}
a{text-decoration:none;height:40px;width:150px;line-height:40px;color:#000000;display:block;background:-webkit-gradient(linear,0%0%,0%100%,from(#b8c4cb),to(#f6f6f8))}
ul,li{margin:0;padding:0;}
.outli>li{list-style:none;float:left;box-sizing:border-box;text-align:center;position:relative;}
.inlili{list-style:none;box-sizing:border-box;text-align:center;background:#DCDCDC;}
ul.inli{display:none;}
.inli0>li{float:left;width:33%;}
.inli0>li:hover{background:#AAA;}
ul.outli>li.sndli:hover>ul{display:block;}
</style>
<body>
<divclass="bar">
<ulclass="outli">
<liclass="sndli">
<ahref="javascript:void(0)">1<em></em></a>
<ulclass="inli">
<li>
<ulclass="inli0">
<li>1.1</li>
<li>1.12</li>
<li>1.13</li>
</ul>
</li>
<li>
<ulclass="inli0">
<li>1.21</li>
<li>1.22</li>
<li>1.23</li>
</ul>
</li>
<li>
<ulclass="inli0">
<li>1.31</li>
<li>1.32</li>
<li>1.33</li>
</ul>
</li>
</ul>
</li>
<liclass="sndli">
<ahref="javascript:void(0)">2<em></em></a>
<ulclass="inli">
<li>
<ulclass="inli0">
<li>2.1</li>
<li>2.12</li>
<li>2.13</li>
</ul>
</li>
<li>
<ulclass="inli0">
<li>2.21</li>
<li>2.22</li>
<li>2.23</li>
</ul>
</li>
<li>
<ulclass="inli0">
<li>2.31</li>
<li>2.32</li>
<li>2.33</li>
</ul>
</li>
</ul>
</li>
<liclass="sndli">
<ahref="javascript:void(0)">3</a>
<ulclass="inli">
<li>
<ulclass="inli0">
<li>3.1</li>
<li>3.12</li>
<li>3.13</li>
</ul>
</li>
<li>
<ulclass="inli0">
<li>3.21</li>
<li>3.22</li>
<li>3.23</li>
</ul>
</li>
<li>
<ulclass="inli0">
<li>3.31</li>
<li>3.32</li>
<li>3.33</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
5. 移動端開發，怎麼實現底部導航切換
我們使用移動端時可以通過觸屏手勢左右滑動來切換TAB欄目，我們說的TAB一般由導航條和TAB對應的內容組成，切換導航條上的標簽同時標簽對應的內容也會跟著切換。 我們准備一個TAB導航#pagenavi，裡麵包含TAB導航要切換的四個導航按鈕，然後是切換...
6. html下拉導航欄代碼
這個是用JS實現的。你網路一下，JS實現二級導航源碼就有了。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>簡潔的純CSS下拉菜單代碼</title>
<style>
#sddm
{ margin:0auto;
padding:0;
z-index:30;
background-color:#F4F4F4;
width:480px;
height:23px;}
#sddmli
{ margin:0;
padding:0;
list-style:none;
float:left;
font:bold12pxarial}
#sddmlia
{ display:block;
margin:01px00;
padding:4px10px;
width:60px;
background:#5970B2;
color:#FFF;
text-align:center;
text-decoration:none}
#sddmlia:hover
{ background:#49A3FF}
#sddmdiv
{ position:absolute;
visibility:hidden;
margin:0;
padding:0;
background:#EAEBD8;
border:1pxsolid#5970B2}
#sddmdiva
{ position:relative;
display:block;
margin:0;
padding:5px10px;
width:auto;
white-space:nowrap;
text-align:left;
text-decoration:none;
background:#EAEBD8;
color:#2875DE;
font:12pxarial}
#sddmdiva:hover
{ background:#49A3FF;
color:#FFF}
</style>
<!--ddmenu-->
<scripttype="text/javascript">
<!--
vartimeout=100;
varclosetimer=10;
varddmenuitem=0;
//openhiddenlayer
functionmopen(id)
{
//cancelclosetimer
mcancelclosetime();
//closeoldlayer
if(ddmenuitem)ddmenuitem.style.visibility='hidden';
//getnewlayerandshowit
ddmenuitem=document.getElementById(id);
ddmenuitem.style.visibility='visible';
}
//closeshowedlayer
functionmclose()
{
if(ddmenuitem)ddmenuitem.style.visibility='hidden';
}
//goclosetimer
functionmclosetime()
{
closetimer=window.setTimeout(mclose,timeout);
}
//cancelclosetimer
functionmcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer=null;
}
}
//closelayerwhenclick-out
document.onclick=mclose;
//-->
</script>
</head>
<bodystyle="text-align:center">
<ulid="sddm">
<li><ahref="#"onmouseover="mopen('m1')"onmouseout="mclosetime()">Home</a>
<divid="m1"onmouseover="mcancelclosetime()"onmouseout="mclosetime()">
<ahref="#">HTMLDropDown</a>
<ahref="#">DHTMLDropDownmenu</a>
<ahref="#">JavaScriptDropDown</a>
<ahref="#">DropDownMenu</a>
<ahref="#">CSSDropDown</a>
</div>
</li>
<li><ahref="#"onmouseover="mopen('m2')"onmouseout="mclosetime()">Download</a>
<divid="m2"onmouseover="mcancelclosetime()"onmouseout="mclosetime()">
<ahref="#">ASPDropdown</a>
<ahref="#">Pulldownmenu</a>
<ahref="#">AJAXdropdown</a>
<ahref="#">DIVdropdown</a>
</div>
</li>
<li><ahref="#"onmouseover="mopen('m3')"onmouseout="mclosetime()">Order</a>
<divid="m3"onmouseover="mcancelclosetime()"onmouseout="mclosetime()">
<ahref="#">VisaCreditCard</a>
<ahref="#">Paypal</a>
</div>
</li>
<li><ahref="#"onmouseover="mopen('m4')"onmouseout="mclosetime()">Help</a>
<divid="m4"onmouseover="mcancelclosetime()"onmouseout="mclosetime()">
<ahref="#">DownloadHelpFile</a>
<ahref="#">Readonline</a>
</div>
</li>
<li><ahref="#"onmouseover="mopen('m5')"onmouseout="mclosetime()">Contact</a>
<divid="m5"onmouseover="mcancelclosetime()"onmouseout="mclosetime()">
<ahref="#">E-mail</a>
<ahref="#">SubmitRequestForm</a>
<ahref="http://www.codefans.net/"target="_blank">codefans.net</a>
</div>
</li>
</ul>
</body>
</html>
7. jQuery實現的導航動畫效果(附demo源碼)
本文實例講述了jQuery實現的導航動畫效果。分享給大家供大家參考，具體如下：
經常在網上看到的，滑鼠在導航上移動時，導航底部的橫條會自動移動到滑鼠懸浮的導航項上。
效果如下圖：
利用jquery的
animate
函數，很好實現。代碼很簡單！
代碼如下：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>測試</title>
<script
src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div
class="nav"
style="margin:
100px
auto;
width:960px;">
<a
class="active"
href="#">首頁</a>
<a
href="#">產品</a>
<a
href="#">新聞中心</a>
<a
href="#">關於我們</a>
<a
href="#">聯系我們</a>
<a
href="#">首頁</a>
<a
href="#">首頁</a>
<div
class="line"></div>
</div>
<style>
.nav{
position:relative;
}
.nav
a{
padding:10px
20px;
border-bottom:solid
3px
#fff;
text-decoration:
none;
color:#666;
}
.nav
a:hover{
color:#66f;
}
.nav
.active,
.nav
.active:hover{
color:#f33;
}
.nav
.line{
position:absolute;
border-top:solid
2px
red;
width:0;
left:0;
top:0;
}
</style>
<script>
function
navLine(o,
bo)
{
var
x
=
''
+
(o.position().top
+
o.outerHeight()
-
2)
+
'px';
var
y
=
''
+
o.position().left
+
'px';
var
w
=
''
+
o.outerWidth()
+
'px';
var
h
=
'2px';
$('.nav
.line').stop();
if
(bo)
{
$('.nav
.line').css({width:w,
height:h,
top:x,
left:y});
}
else
{
$('.nav
.line').animate({width:w,
height:h,
top:x,
left:y});
}
}
$(function(){
navLine($('.nav
.active'),
true);
$('.nav
a').hover(function(){
navLine($(this));
},
function(){
navLine($('.nav
.active'));
});
});
</script>
</body>
</html>
完整實例代碼點擊此處本站下載。
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
8. 下載asp源碼左側導航
最簡單的辦法是把ftbbstree.htm 頁面內的內容全部清空,變成空白文件就可以了.
9. 網頁側邊欄導航
用css寫的。我自己的一個代碼
#left{
width:680px;
float:left;
overflow:hidden;
padding:20px;
}
#right{
padding:20px 15px 20px 18px;
margin:5px 5px 5px 710px;
border-left: 2px dashed #BDB6A5;
z-index:1;
}
.post_top {
position: relative;
height: 140px;
padding:15px;
}
.post_photo {
width: 180px;
float: left;
position: relative;
height: 130px;
background:white;
border-radius:15px;
padding:8px;
}
#thumbnail{
width: 180px;
height: 130px;
}
.post_left {
margin-left:10px;
width: 400px;
float: left;
position: relative;
height: 140px;
text-align: center;
vertical-align: center;
}
#post_title {
font-family: "Lucida Handwriting", sans serif;
font-size: 25px;
line-height: 50px;
}
#comment{
font-family: "Lucida Handwriting", sans serif;
font-size: 20px;
line-height: 30px;
}
#related_post{
font-family: "Lucida Handwriting", sans serif;
font-size: 20px;
line-height: 30px;
}
.post_content {
padding:30px 20px 30px 20px;
line-height: 23px;
}
.vote{
margin-top:10px;
padding-right:10px;
text-align:right;
}
#replies{
border-top: 2px dashed #BDB6A5;
margin-top:20px;
padding:10px;
}
.related{
margin:5px;
margin-bottom:10px;
padding:5px;
border-bottom: 1px dashed #BDB6A5;
}
.read_more{
float:right;
}
.related_photo{
width:155px;
height: 115px;
background:white;
border-radius:8px;
padding:7px;
margin:5px;
}
#related_thumbnail{
width: 155px;
height: 115px;
}
10. 使用Bootstrap開發 導航欄在手機端顯示異常 大神幫忙看下哪裡寫錯了 截圖和源碼如下
設置css， border:0