设计网页顶部导航（网页设计顶部导航栏）
本文目录一览：
怎么制作网站顶部的导航条
html
head
style type="text/css"
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
/style
/head
body
ul
lia href="#"Link one/a/li
lia href="#"Link two/a/li
lia href="#"Link three/a/li
lia href="#"Link four/a/li
/ul
p
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
/p
/body
/html
如何设计网站导航系统？
导航模式
网站的导航如何设计，在设计网站导航时首先应该明确用户的浏览习惯，根据用户的浏览习惯，首先会先大概地扫视一遍页面，其次则会开始寻找导航栏，快速从导航栏上找到主要信息，引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。
网站的导航信息应该明确，，设计一个有魅力的导航还能留住用户浏览更多的内容信息，带给用户良好的体验。在网站导航设计上应该主要关注一下几点：导航的模式常见的导航模式有很多，例如顶部水平横栏式，垂直导航栏，侧边固定式，滑出或者弹出窗口导航等，通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少，在网站导航上可以选取水平式导航，这样既可以重点内容而且简单清晰，网站内容较多的时候可以选择抽屉式的导航，用户在浏览网站时各种信息都很明确。如果网站的显示页过长，比较试用的是垂直式导航，方便用户在浏览内容时导 航信息始终保持在一个位置可以被快速找到。
导航内容
网站的导航应该是对整个网站想要展示的信息总结，导航的信息要与详细页面符合，标题的总结要精简，注意网站小内容最好不要以导航的总标题形式出现，可通过细分的下拉菜单，或者以更多形式的小菜单栏里出现。
导航细节
在导航设计时可以设置一个“回到顶部” 的标志，以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的回到顶部了。
导航创意
我们都喜欢新的东西，在看惯了千篇一律的导航形式如果能给导航加点创意，那么肯定会非常吸引人眼球。
网站的导航在网站设计中有着举足轻重的地位，好的网站导航是成功的一半，所以在网站的导航设置上更加注意。
网站导航设计要注意哪些点?
导航操作要简单便利
一般用户会希望在阅读过的网站或app中的相似位置(比如网站顶部、左侧等)中找到他们想要的UI元素。
要有互动感
假如菜单选项看起来不可点击，用户未必能认出它是导航。假如咱们的导航规划融入太重的图形、或过分追崇扁平化规划风格，会使它们看起来更像是装饰性图片或标题。
位置导航
用户成功导航的一个最基本的标准是他自己能发现：“我在哪儿?” 一般被选中的菜单选项在视觉上与其他选项是有差异的，这可以协助用户明晰自己的当时所在位置(或许经过面包屑导航定位)。假如没有让用户明晰所在位置、导致他们迷路，那么就犯了网站规划最基本的过错。所以导航菜单对于用户来说意义重大。
网站的主导航
一般来说，网站的主导航位于网站的最上面，因为主导航包括网站的首页以及各个新闻栏目的导入链接，它是用户明晰了解网站中心栏目内容的指路牌，每当新访客来到网站，都需求经过网站的主导航来确认网站的定位和主营业务。
网店视觉的导航设计是怎样的？
导航是用来浏览网页的工具。它可以是按钮或者是文字。在每个页面上显示一组导航，顾客就可以很快又很容易地找到他想浏览的网页。导航是网页设计中的重要部分，也是整个Web站点设计中的一个独立部分。
现在有些卖家都有一个误区，以为导航就是分类。其实不然，导航是一个功能型按钮，在店铺页面中的作用是引导买家快速查看需要的产品。而分类是属于包含与被包含的关系，但是我们可以理解为分类是导航的一种。设计出自己的导航后，我们会根据目标用户群的搜索点击对导航进行优化，这绝不仅仅是只把分类重新整理一下就可以了，而应从产品导航入口入手，进行优化。
通常按位置可以将导航划分为以下三个区域：
（1）顶部导航：产品分类、搜索栏、自定义页面（如品牌故事、会员专区、购物须知等）。
（2）左侧栏导航：产品分类、在线客服、收藏店铺按钮、热销产品列表、商品推荐、其他超链接（如手机店铺、加入帮派等）。
（3）自由导航：随意地自由地编排导航，让导航更具个性，给人耳目一新的感觉。一般很多设计师会把自由导航设计成产品类目图片（文字）＋可以指向某一分类或自定义页面，进行详情页跳转等。
尽管导航的位置和形式都不同，但目的都是给顾客提供更直接的购买路径。导航承载的信息内容有：基本营销信息（如新品、热卖、折扣等）；搭配套餐；主题营销；官方活动（如淘金币、聚划算、淘画报等）；产品分类（如功能、材质、季节、价格、人群归属等）；交互模块（如帮派、微博、手机店铺、店铺收藏等）；辅助信息（如品牌故事、帮助中心、信用评价、会员中心、客户承诺等）；客服支持（如客服旺旺、服务说明等）；搜索控件（如搜索框、关键词推荐等）。
导航在店铺中承载着举足轻重的作用，顾客进入店铺能停留多久基本全靠它。当顾客进入店铺时如果找不到方向的话，是不会继续浏览网店的。其实网店导航并不复杂，就是通过让产品的层次结构可视化，告诉我们店铺里有什么。在设计导航时应该遵循“快为先”的原则，不要为了页面的美观，特意将导航复杂化，设计为“精美图片＋文本＋超链接”形式。从用户体验的角度来讲，大多数买家已经习惯了简单明了的导航，如果导航设计让买家花时间去思考下一步该点什么，那么这个导航就是失败的。所以导航的设计不要过于浮夸，应从用户体验出发，以最快速的方式让顾客找到自己想要的东西。
网站顶部导航的设计需要注意些什么？
一、网站顶部导航栏目的内容
一般常见的内容有：品牌logo、菜单、搜索框、提示消息、登录/注册、联系方式、语言切换等，当然，网站的类型不一样，这里面的内容就会不一样，就会有一些变动。
二、网站几级导航的隐藏
除了顶级菜单在导航中显示外，企业的下级菜单都需要隐藏，是通过将一些次要的信息隐藏来释放页面的空间，这样使顶部栏更加的清爽简洁，用户的注意力可以更好的集中在那些重要的信息上。老渔哥-重庆网站建设
三、网站顶部导航的双层菜单
网站运营那点事儿-老渔哥双层菜单这种设计很新潮，所以越来越受设计师的青睐。双层菜单主要是解决顶部导航栏需要展示的内容太多，而且某些功能不属于同一层级，这时候可以使用双层菜单。
