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

在后面学习到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. POJ 1985 求树的直径 两边搜OR DP

    Cow Marathon Description After hearing about the epidemic of obesity in the USA, Farmer John wants h ...

  2. 5.23Java各种对象(PO,BO,VO,DTO,POJO,DAO,Entity,JavaBean,JavaBeans)的区分

    作者:https://www.cnblogs.com/lyjin/p/6389349.html PO:持久对象(persistent object):---po就是在Object/Relation M ...

  3. java编程基础篇---------> 编写一个程序，从键盘输入三个整数，求三个整数中的最小值。

    编写一个程序,从键盘输入三个整数,求三个整数中的最小值. 关键:声明变量temp   与各数值比较. package Exam01; import java.util.Scanner; public ...

  4. 压缩映射：简单最邻近搜索-（SLH）Simple Linear Hash

    Compact Projection: Simple and Efficient Near Neighbor Search with Practical memory Requirement Auto ...

  5. 安卓使用ImageView显示OpenCV-Mat

    Android 的Application-native调试暂时还只能进行主线程调试,在GDB里面,运行于子线程的OpenCv数据处理过程不能直接调试,OPenCV-Native函数    public ...

  6. linux中tomcat启动脚本：关闭、发布、重启、测试是否成功

    说明 在使用jenkins持续集成时,需要实现自动发布包到tomcat.该脚本实现了在jenkins将包发送到linux服务器上后的自动关闭.发布.启动.测试启动是否成功的过程 思路 该思路以tomc ...

  7. Git创建本地分支并关联远程分支（一）

    默认,git项目只有一个分支,就是master,我们当然可以在本地创建多个分支,并推送到远程git管理平台上,或者将远程git管理平台上的其他分支拉取到自己电脑上. 一.查看本地已有的分支 进入到项目 ...

  8. eoLinker GoKu Gateway 开源版 V2.1发布，加入UI管理系统等

    GoKu API Gateway 是eoLinker旗下的开源版接口网关,支持OpenAPI与微服务管理,支持私有云部署,实现API转发.请求参数转换.数据校验等功能,提供图形化界面管理,能够快速管理 ...

  9. Keras手写识别例子（1）----softmax

    转自:https://morvanzhou.github.io/tutorials/machine-learning/keras/2-2-classifier/#测试模型 下载数据: # downlo ...

  10. Centos7从3.10升级内核到4.9后无法启动解决办法:mpt[23]sas驱动问题

    Centos7升级内核后无法启动解决办法:mpt[23]sas驱动问题 前言 这个问题存在有一段时间了,之前做的centos7的ISO,在进行内核的升级以后就存在这个问题: 系统盘在板载sata口上是 ...