前面几篇博文都在讲导航菜单和二级下拉式菜单，事实上有非常多方法都能够实现的。详细的情况还要视情况而定。

在后面学习到jQuery框架之后，会有更丰富的动画效果。因为在学习Ajax和jQuery的初步阶段。对于非常多的复杂的导

航菜单和二级下拉式菜单没法做，可是学习了CSS和JS还是能实现一些简单的变换的。

这篇博文就来说说用CSS实现

导航菜单结合二级下拉式菜单的两个简单变换吧。

首先还是在前面博文的基础上加以实现。事实上仅仅用HTML和CSS还是能够做出不错的效果。可是相较于JS和

jQuery来说就有非常大的差距了。这些问题在学习完JS和jQuery之后你就会深有感触。

一中英文切换导航菜单

制作原理：在二级下拉式菜单的基础上加以变换就能够实现。在鼠标悬浮在对应的菜单上。二级菜单出如今导航

菜单的以下。我们能够把英文的菜单当做是二级菜单。在显示的时候将其反向向上移动到导航菜单上，让多出的部分

隐藏就可以实现。

浏览器的兼容性问题：我測试的浏览器是火狐。谷歌，2345浏览器，以及IE7和8。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>导航菜单</title>

<style type="text/css">

.nav{

padding-left:40px;

font-size:20px;

font-family:"微软雅黑";

list-style:none;

font-weight:bold;

overflow:hidden;/*此处的作用能够清除浮动*/

border-bottom:10px solid #FF6600;

}

.nav li{

float:left;

margin-right:1px;

}

.nav li a{

text-decoration:none;

line-height:40px;

background-color:#EEEEEE;

color:#000000;

display:block;

width:100px;

text-align:center;

}

/*默认状态下不显示*/

.nav li a span{

display:none;

}

/*鼠标移到对应元素显示英文*/

.nav li a:hover span{

display:block;

background-color:#FF6600;

color:#FFFFFF;

}

/*反向使用上外边距。使其原来的中文隐藏*/

.nav li a:hover{

margin-top:-40px;

}

</style>

</head>

<body>

<ul class="nav">

	 <li><a href="#">首页<span>Home</span></a></li>

	 <li><a href="#">课程大厅<span>Course</span></a></li>

	 <li><a href="#">学习中心<span>Learn</span></a></li>

	 <li><a href="#">经典案例<span>Case</span></a></li>

	 <li><a href="#">关于我们<span>About</span></a></li>

</ul>

</body>

</html>

初始化效果：

鼠标悬浮效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

二多级菜单

前面有三篇博文讲到了二级下拉式菜单分别用CSS，JS和JQuery实现，做法有非常多。这次主要是还是用CSS实

现。相关的博文请參考：Web前端开发实战1：二级下拉式菜单之CSS实现，Web前端开发实战2：二级下拉式菜单之

JS实现和Web前端开发实战3：二级下拉式菜单之jQuery实现。

制作原理同二级下拉式菜单一样。

浏览器測试为：IE7,8。谷歌，火狐，2345浏览器。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>导航菜单</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

ul{

list-style:none;

}

.nav{

font-size:16px;

font-family:"微软雅黑";

font-weight:bold;

margin:20px 50px;

}

.nav li{

float:left;

margin-right:1px;

}

.nav li a{

text-decoration:none;

line-height:30px;

background-color:#EEEEEE;

color:#000000;

display:block;

width:120px;

text-align:center;

}

.nav li a:hover{

background-color:#FF6600;

color:#FFFFFF;

}

.nav li ul{

display:none;

}

.nav li ul li{

margin-top:1px;

position:relative;

}

/*鼠标移到对应元素上显示二级菜单*/

.nav li:hover ul{

display:block;

width:120px;

}

.nav li:hover ul li ul{

display:none;

}

.nav li:hover ul li ul li{

margin-left:1px;

}

/*鼠标移到对应二级菜单元素上显示三级菜单*/

.nav li ul li:hover ul{

display:block;

position:absolute;

top:0px;

left:120px;

}

</style>

</head>

<body>

<ul class="nav">

         <li><a href="#">首页</a></li>

	 <li><a href="#">课程大厅+</a>

	         <ul>

		     <li><a href="#">视频课程+</a>

			   <ul>

			       <li><a href="#">Java</a>

			       <li><a href="#">PHP</a>

			       <li><a href="#">C语言</a>

			   </ul>

		     </li>

		     <li><a href="#">案例学习+</a>

			    <ul>

				 <li><a href="#">编程练习</a>

				 <li><a href="#">实例操作</a>

			         <li><a href="#">答案解析</a>

			    </ul>

		     </li>

		     <li><a href="#">交流学习</a></li>

		 </ul>

	 </li>

	 <li><a href="#">学习中心+</a>

	     <ul>

		  <li><a href="#">前端课程+</a>

			 <ul>

			     <li><a href="#">HTML/CSS</a>

			     <li><a href="#">JavaScript</a>

			     <li><a href="#">jQuery</a>

			 </ul>

		  </li>

		  <li><a href="#">手机开发+</a>

			 <ul>

			     <li><a href="#">IOS开发</a>

			     <li><a href="#">WP开发</a>

			     <li><a href="#">安卓开发</a>

			</ul>

		  </li>

		  <li><a href="#">后台编程</a></li>

	     </ul>

	 </li>

	 <li><a href="#">关于我们</a></li>

</ul>

</body>

</html>

初始化效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

二级下拉菜单效果：

三级菜单效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

这些事实上都是最基础的东西，每种方法都有其自己的方式和特点以及浏览器兼容性问题。

可能也会因个人的方

式实现会有不同的代码，可是学会了制作的原理，就会非常easy实现。CSS实现导航菜单简单变换，我会在以后的博文

中使用JS和jQuery实现，同一时候也要比較几种方法的代码简练程度和实现效果的方式更有浏览器的兼容性问题。从最基

础Web实战開始，一步一步去实现复杂的站点架构和站点布局和站点效果展示。

Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换的更多相关文章

  1. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  2. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  3. Web前端开发实战4：导航菜单(一)

    在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单. 导航菜单种类非常多,可是制作原理都是大同 小异的.这里看的比二级下拉式菜单还简单. 来看一些站点上的导航菜单: 垂直导航菜单: 水平导航菜 ...

  4. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  5. 好程序员web前端开发测验之css部分

    好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...

  6. 用JavaScript+css制作下拉式菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  8. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  9. 作为小白，如何学习Web前端开发？

    作为一个已经写码这么多年的人,我不会告诉你我最初的时候是自学的,因为刚开始自己学真的特别无聊枯燥,实在学不下去,所以就自己报了一个培训(上元教育)的地方,毕竟是交了钱的,本着不服气的精神,硬是把自己生 ...

随机推荐

  1. C#之仿魔兽登录

    不多废话,直接上效果图: 1录窗体 对应的代码: using System; using System.Collections.Generic; using System.ComponentModel ...

  2. html中canvas渲染图片，并转化成base64格式保存

    最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...

  3. 5.30获取openid和createTime--mybatis自动生成接口和映射【这里需要自定义】

    自定义sql获取数据:        dao:            前提是反向成了代码:                A : 接口PhoneModelMapper extends IBaseMap ...

  4. 用 Django2.0 做 简单的BBS（前端用 Bootstrap）

    实现目标: 开发首页显示BBS的标题和摘要,点击BBS的标题可跳转到BBS详细页面进行展示. 开发环境及开发工具: Python 3.6.3 Django 2.0 Pycharm 2017.3 实现过 ...

  5. 【Oracle】DG中物理备库、快照备库的相互转换

    一.物理备库切换快照备库 1. 如果正在运行日志应用,先停止 ALTER DATABASE RECOVER MANAGED STANDBY DATABASE CANCEL; 2. 确保数据库为MOUN ...

  6. 读书笔记「Python编程：从入门到实践」_7.用户输入和while循环

    7.1 函数input()的工作原理 函数input() 让程序暂停运行,等待用户输入一些文本.获取用户输入后,Python将其存储在一个变量中,以方便你使用. message = input(&qu ...

  7. drf02 序列化器详解 Serializer

    作用 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串2. 反序列化,把客户端发送过来的数据,经过request以后变成字典,序列化器可以把字典转成模型3. 反 ...

  8. javaee字符缓冲输出流

    package Zjshuchu; import java.io.BufferedWriter; import java.io.FileWriter; import java.io.IOExcepti ...

  9. 【C#】【分享】 XXX分钟学会C#

    原文地址 https://www.cnblogs.com/younShieh/p/10945264.html     前几天在刷即刻的时候发现了一个GitHub上的项目,该项目名为"lear ...

  10. 【scoi2009】围豆豆（最短路模型）

    洛谷题面:https://www.luogu.org/problemnew/show/P2566 由每个豆子引一条射线,与射线交点个数为奇数相当于多边形围住了它,这样可以定义一个状态f[x][y][s ...