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

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

在后面学习到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实

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="">

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

可能也会因个人的方

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

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

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

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

Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
Web前端开发实战2：二级下拉式菜单之JS实现
上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...
Web前端开发实战4：导航菜单(一)
在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单. 导航菜单种类非常多,可是制作原理都是大同小异的.这里看的比二级下拉式菜单还简单. 来看一些站点上的导航菜单: 垂直导航菜单: 水平导航菜 ...
Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
好程序员web前端开发测验之css部分
好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...
用JavaScript+css制作下拉式菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
[总结]WEB前端开发常用的CSS/CSS3知识点
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...
web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
作为小白，如何学习Web前端开发？
作为一个已经写码这么多年的人,我不会告诉你我最初的时候是自学的,因为刚开始自己学真的特别无聊枯燥,实在学不下去,所以就自己报了一个培训(上元教育)的地方,毕竟是交了钱的,本着不服气的精神,硬是把自己生 ...

随机推荐

hdu 4297
有两个基础需要掌握: RMQ,以及LCA. RMQ:dp[i][j]表示下标从i开始,长度为2^j的一段元素中的最值.则易得状态转移如下:dp[i][j]=max/min(dp[i][j-1],dp[ ...
禁止tomcat扫描jar包的tld文件
禁止tomcat扫描jar包的tld文件tomcat/conf/logging.properties 取消注释org.apache.jasper.compiler.TldLocationsCache. ...
C# 多线程系列（二）
传递数据给一个线程通过函数或lambda表达式包一层进行传递. static void Main(string[] args) { Thread thread = new Thread(() =&g ...
JavaScript中变量的类型
变量的类型是指变量的值所属的数据类型,可以是数值型.字符串型和布尔型等,因为JavaScript是一种弱类型的程序语言,所以可以把任意类型的数据赋值给变量. 下面是一个关于变量类型的例子.在这个例子中 ...
时序分析：串匹配-KMP算法
图像处理与模式识别的教科书使用大量的章节来描述空域的模式识别方法.从图像底层特征提取.贝叶斯方法到多层神经网络方法,一般不讨论到对象随时间变化的情况,视频处理应用和在线学习方法使研究对象开始向时域延伸 ...
Mac下php连接mysql数据库失败解决办法
通过phpmyadmin连接mysql成功,但是通过php连接数据库失败,执行如下php语句 ? 1 @mysql_connect("localhost","root&q ...
js开发性能（一）
随着js技术的发展,性能问题开始被越来越多的人关注,最近了解了一些关于前端性能的问题,这里主要讨论一下在js脚本加载和执行的过程中,我们应该怎么样来提高js的性能. js脚本的处理初学前端的时候,我 ...
js判断数组中是否包含某个值
/** * 判断数组中是否包含某个值 * @param arr 数组 * @param str 值 * @returns {boolean} */ function contains(arr, str ...
js对cookie增删改查的封装
/** * 获取cookie * @param name * @returns {*} */ function getCookie(name) { var cookieArr = document.c ...
Java RMI之HelloWorld经典入门案例
Java RMI 指的是远程方法调用 (Remote Method Invocation).它是一种机制,能够让在某个 Java 虚拟机上的对象调用另一个 Java 虚拟机中的对象上的方法.可以用此方 ...

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

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

随机推荐

热门专题