1.4.1导航菜单分析在线视频

同学

你好

欢迎回到软件开发实训课堂

上节课咱们对网站的首页做了一个分析

这节课我们把导航菜单

拿出来再做具体的分析

看一看导航菜单都有哪些

需要我们注意的

和完成的内容

下面我们来看一下

什么是导航菜单

在日常使用计算机的过程中

咱们使用的软件

大部分都有一个菜单

这个菜单几乎是软件界面的

完成功能的标配

它能够方便地对功能进行归类

让用户快速的找到需要的功能

那么要制作菜单

首先要做的就是有一个菜单条

而这个菜单条

往往是放在界面的不同区域

也许有一个也许有两个

但大部分情况下是把它放在顶部

我们windows的软件几乎都在顶部

而我们参考的网站也是在顶部

所以我们把菜单拿出来先做一下分析

而菜单除了首页需要以外

其他的副页面也会包含菜单

为了能让菜单同时出现多个

这就要把菜单放在菜单条上

菜单条

它实际上就是一个放菜单的容器

在界面上

它表现的是一个区域

而菜单是菜单条上的每一个项

具体的菜单

也称之为导航或导航菜单

所以我们通常所说的导航菜单

导航

往往指的都是菜单

菜单

软件系统中

用户操作功能划分和选择的方式

对我们软件系统功能划分和选择的方式

另外一种它类似于现实生活中的点菜单

就我们去餐厅吃饭

点菜用的菜单它很相似

所以我们把这种功能称之为菜单

通常情况下

菜单它的表现形式有横向

还有一个是纵向

对于我们经常在淘宝京东这样的大型网站

上去购物时

我们会发现

他们的菜单也就是导航用的

往往是纵向的

因为它内容特别的多

所以它们选择了纵向

而对于我们参考的网站使用的是横向的菜单

那么虽然是横向

所有的都会有一个子菜单

它有层次

那么对于层次当鼠标点击划过时

都会有变化

有子菜单时显示子菜单

无子菜单时进入链接内容

这都是可以实现的

根据你的需求来实现这样的功能

让它是变换颜色还是进入链接位置

这些个都需要你来决定

当然你的决定依赖于用户的需求

再看我们菜单的具体内容

对于我们的参考网站

我们的第一个需求

就是要有一个返回到首页的链接

无论用户走到哪一页

他想要回到首页

只需要点击这个首页链接就可以了

第二个

要有一个事件

用户想了解公司最近的信息

就可以点击事件来进入

解决方案

是为了展示公司以前的业绩

也需要我们把它放在菜单上

让用户快速的进入

关于我们

这是对公司的介绍

还有产品的展示

在我们的参考网站里边

我们的导航之所以比较简单

就是因为只有产品有下拉菜单

所以实现起来

对你来讲就更加容易一些

它只有四个子项

另外在导航菜单里边

还有一个联系我们

这样用户看到他感兴趣的内容时

如果有疑问

就可以与公司的服务人员取得联系

来了解相关信息

还有一个就是

这个网站它需要有一个

中文版的网站

它以英文为主

但是还需要有中文

所以你在设计的时候往往需要考虑到一个

国际化的问题

我们再来看一下有关菜单的相关布局

首先是菜单

它所放的区域的宽和高

也就是我们所说的菜单条的区域

在菜单条上

每一个菜单都有它自己的颜色

这个颜色呢

也许你需要两个或者三个

比如说鼠标放上去的和鼠标退下来时

它的颜色与正常颜色都是要有区别

这样看起来是有动感的

另外一个菜单的字体

对于英文

还有中文

你可以综合的把字体写到这里

这样的呢

浏览器会根据你的文字

来选择需要的字体

当然放在前面的先会选择

这是由CSS你编写的时候决定的

另外一个

这个字体的大小

对于我们菜单来讲

尤其是现在屏幕都比较大

所以尽可能的把字体呢

放大

而且还要好看

根据我们习惯性的设计

和我们对网站长时间的观察发现呢

尺寸在14个px的字体的时候

在现在的屏幕上看起来是比较舒服的

12显得有点小

16显得又比较大

所以选择14的字体就比较舒服

另外对于中文版的切换按钮区域

它也有一个按钮大小

这个按钮你也可以根据这些区域的

去调整你的按钮大小

有区域

187×25

按钮本身95×22

这是区域和按钮

它们两个的尺寸

再一个按钮它有背景颜色

你需要把背景颜色

通过另外一种方式给它添加上去

这个和我们前面的颜色值是不一样的

要注意

这两种表示形式

结果是一样的

都是代表了一种颜色

只是表示形式不同

前面用警号开头的

在我们学习CSS的时候

你就已经知道了它是十六进制的颜色表示

而在下面我们用一个函数rgb

给他传递了三个整数

分别表示红色

绿色

蓝色

这三个三原色

但不管怎么样

这两个表示的结果是一样的

都是一种颜色

根据你的喜好可以进行选择

我们这里只是为了

展示出颜色的不同表示而已

边框的颜色也需要你把它设定上

这是对于外表的展示的样式

那么对于整个菜单的内容来讲

我们把它分了两层

为什么分两层呢

因为它只有一个叫做products

也就是产品的菜单

具有下拉内容

而且只有四项

所以我们只需要两层

就可以完成一个主菜单下面的子菜单了

当然如果说子菜单下面还有子菜单的话

那你就得需要三层等等

这里我们并不需要去考虑

通用的菜单实现

我们先学会如何去实现一个简单的菜单

以后我们可以去实现

更为通用的复杂的菜单

再看

每一个显示的菜单

它的前面都有一个小三角

小三角往往是由图片构成的

而图片通常选择的是gif图

或者是png图

为什么是它两个

因为他们才能实现透明

而jpg是无法透明的

所以我们用透明的图来表示三角

这样我们不需要的区域

它就能够和背景很好的融合

在一个菜单是没有背景的

完全就是我们网页的背景

它没有自己的背景

所以这就更加简洁了

子菜单的背景

也就是说当我们鼠标点击或者划上菜单

这个时候会显示一个子菜单出来

而子菜单的背景

不能与网页的背景融合

因为融合以后出来后你可能看不清楚了

因为它背后是有内容的

这样造成了内容的叠加

所以我们需要把

子菜单的背景给它设定出来

与网站的整体效果要有区别

用户看起来才能够更加清晰

而子菜单项里边有一个滑过

我们的主菜单是有滑过

我们的子菜单也有滑过

这都可以根据需要去设定

划过就指的是鼠标

划过文字的时候

它的效果

这在CSS里边完全是可以实现的

那么它实现的主要就是背景色

以及前景色

这两个颜色

所以效果就能够很明确地区别开

我当前鼠标所在的菜单项

与其他菜单项的区别

一目了然

那么在我们整个网页里边

你看到了我们的参考网站的整个网页里边

有两个地方需要菜单导航

第一个是每个页面的主导航

就是这样一个菜单条

这个菜单条是每一页都有

但是除了主页

其他的页面会有一个侧边导航

侧边呢

在我们的参考网站里是在左边

也就是左边有一个导航

而它的内容

实际上是重复了主菜单的相关内容

这个呢

又给客户提供了更加方便的导航形式

所以我们在实现的时候

除了主菜单以外

还需要有一个什么

侧边菜单的实现

那么我们把他的样式已经分析的差不多了

也知道了它的前景背景

鼠标滑过等等这些效果

那么具体该怎么实现

你有没有想过html如何实现

比如说我们的侧边

你考虑了吗

实际上我们侧边

用无序列表有序列表都是

很容易实现的

而主菜单除了样式以外

我们还需要配合一些

JavaScript的脚本来实现

那么具体的JavaScript脚本

该怎么来做

我们在后期实现的时候再讲

好

这节课的内容就讲这么多

下一节课再见