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