6.3 简单的导航菜单


作为一个成功的网站,导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格,因此很多设计者都会投入很多时间和精力来制作各式各样的导航条,从而体现网站的整体构架。

在传统方式下,制作导航菜单是很麻烦的工作。需要使用表格,设置复杂的属性,还需要使用JavaScript实现相应鼠标指针经过或点击动作。如果用CSS来制作导航菜单,实现起来就非常简单了。

一、简单的竖直排列菜单

当项目列表的list-style-type属性值为“none”时,制作各式各样的菜单和导航条便成了项目列表的最大用处之一,通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个案例,其效果如图1所示。

本案例文件位于网页学习网CSS教程资源中“第6章\04\vertical.htm”。


图1 无需表格的菜单

① 首先建立HTML相关结构,将菜单的各个项用项目列表<ul>表示,同时设置页面的背景颜色,代码如下。

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <body>
  2. <div id="navigation">
  3. <ul>
  4. <li><a href="#">Home</a></li>
  5. <li><a href="#">Contact us</a></li>
  6. <li><a href="#">Web Dev</a></li>
  7. <li><a href="#">Web Design</a></li>
  8. <li><a href="#">Map</a></li>
  9. </ul>
  10. </div>
  11. </body>

② 然后开始设置CSS样式,首先把页面的背景色设置为浅色,代码如下。lodidance.com

折叠展开CSS 代码复制内容到剪贴板

  1. body{
  2. background-color:#dee0ff;
  3. }

此时页面的效果只是最普通的项目列表。

③ 设置整个<div>块的宽度为固定150像素,并设置文字的字体。设置项目列表<ul>的属性,将项目符号设置为不显示。

折叠展开CSS 代码复制内容到剪贴板

  1. #navigation {
  2. width:150px;
  3. font-family:Arial;
  4. font-size:14px;
  5. text-align:rightright
  6. }
  7. #navigation ul {
  8. list-style-type:none;               /* 不显示项目符号 */
  9. margin:0px;
  10. padding:0px;
  11. }

通过以上设置后,项目列表使显示为普通的超链接列表。

④ 为<li>标记添加下边线,以分割各个超链接,并且对超链接<a>标记进行整体设置,如下所示。

折叠展开CSS 代码复制内容到剪贴板

  1. #navigation li {
  2. border-bottom:1px solid #9F9FED;    /* 添加下划线 */
  3. }
  4. #navigation li a{
  5. display:block;
  6. height:1em;
  7. padding:5px 5px 5px 0.5em;
  8. text-decoration:none;
  9. border-left:12px solid #151571;     /* 左边的粗边 */
  10. border-right:1px solid #151571;     /* 右侧阴影 */
  11. }

以上代码中需要特别说明的是“display:block;”语句,通过该语句,超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活。

⑤ 最后设置超链接的样式,以实现动态菜单的效果,代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. #navigation li a:link, #navigation li a:visited{
  2. background-color:#1136c1;
  3. color:#FFFFFF;
  4. }
  5. #navigation li a:hover{                 /* 鼠标经过时 */
  6. background-color:#002099;           /* 改变背景色 */
  7. color:#ffff00;                      /* 改变文字颜色 */
  8. border-left:12px solid yellow;
  9. }

代码的具体含义都在注释中一一说明了,这里不再重复。此时导航菜单便制作完成了,最终的效果如图1所示,在IE与Firefox两种浏览器中的显示效果是一致的。lodidance.com

注意:此时在IE 6/7/8和Firefox中的显示效果是相同的,但是在IE 6中,虽然把链接设置成了块级元素,但是仍然只有在鼠标指针经过文字时,才能触发鼠标经过效果,而不是进入矩形区域就可以触发,在IE 7/8中已修正正了这个错误。在IE 6中,一个解决方案是在“#navigation li a”中增加一条设置高度的CSS规则:

height:1em;

这样可强制浏览器重新计算相应鼠标指针的范围,就可以得到正确的结果了。

二、横竖自由转换菜单

导航条不只是竖直排列,很多时候需要页面的菜单能够在水平方向显示。通过CSS属性的控制,可以轻松实现项目列表导航条的横竖转换。

这里在上面一个例子的基础上仅做两处改动,就能实现一个自由转换的菜单。图2显示的是浏览器窗口比较宽的时候,菜单的水平排列效果;图3左图显示的是浏览器窗口很窄的时候,菜单的竖直排列效果;图3右图显示的是浏览器窗口宽度不宽不窄的时候,菜单的折叠排列效果。

本案例文件位于网页学习网CSS教程资源“第6章\04\horizontal.htm”。


图2 水平菜单


图3 水平菜单可以自由地转换为竖直菜单和折行菜单

这两处改动如下。

(1) 把width:120这条CSS规则从“#navigation”移动到“#navigation li a”中。这样,这个列表就没有宽度限制了,同时保证每个列表项的宽度都是120像素。

(2) 在“#navigation li”的的样式中增加一条“float:left;”。也就是使各个列表项变为向左浮动,这样它们就会依次排列,直到浏览器窗口容纳不下,再折行排列。

通过这两处小小的改动,就可以实现从竖直排列的菜单到自由适应浏览器宽度的菜单的转换了。对于Firefox和IE浏览器都是适用的。

读者通过这个案例是不是深刻地感受到了CSS的强大和灵活。可以套用一句俗语”只有想不到,没有做不到”。

本章重点

在本章中,主要介绍了超链接文本的样式设计,以及对列表的样式设计。对于超级链接,最核心的是4种类别的含义和用法;对于列表,需要了解基本的设置方法。这二者都是非常重要和常用的元素。在后面的案例中,几乎每个案例都离不开它们,因此一定要把相关的基本要点掌握熟练,为后面制作复杂的例子打好基础。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/688.html

6.3 简单的导航菜单,布布扣,bubuko.com

时间: 2024-10-21 20:15:13

6.3 简单的导航菜单的相关文章

一个简单的导航菜单切换显示

一直都在用导航栏菜单选项的切换,使用js,jquery实现过相应的代码.下面展示一下用js实现切换: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> #container{width: 1100px;

可以固定的顶部的导航菜单简单实例代码

可以固定的顶部的导航菜单简单实例代码:固定于网页顶部的导航栏效果在当下网站比较流行,所谓的固定于网页的顶部一般来说并不是一直固定于顶部,而是在开始是位于某一个位置,当下拉滚动条使其到达顶部的时候才会固定在顶部,下面通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" con

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的.这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧. 首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和 jQuery来说就有很

Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作 最近初学Html/Css,今天学习了一个简单的静态导航条的制作.属于很简单,很基础的东西. 思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单 1. 首先在html代码中建立ul: <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li>

CSS导航菜单简单示例

1.纵向菜单 纵向菜单代码示例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>纵向导航菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } nav{ width: 150px; margin: 50p

Angular+Bootstrap3导航菜单

Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 关于作者 张丹(

Web前端开发实战4:导航菜单(一)

在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单.导航菜单种类很多,但是制作原理都是大同 小异的,这里看的比二级下拉式菜单还简单.来看一些网站上的导航菜单: 垂直导航菜单: 水平导航菜单: 一垂直菜单 制作原理:(1)用无序列表构建菜单:(2)<a>标签的设置:ul li a{display:block;}.定义的关键是将<a>标签设置为 块元素. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

导航菜单滑动动画

用jquery实现百度新闻导航菜单滑动动画 前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

WordPress主题开发:开启导航菜单功能

步骤一:在主题的functions.php中,添加一段代码,开启菜单功能,代码如下: <?php register_nav_menus( $locations ); ?> 参数说明:$locations---指导航的位置,给此定参数,可设置多个位置的导航,如: <?php register_nav_menus( array( 'header_menu' => '我的顶部导航', 'footer_menu' => '我的底部导航' ) ); ?> 步骤二:后台设置菜单 步