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

随机推荐

spring注解、aop（二）
使用注解配置spring 1.导入 spring-aop-5.0.6.RELEASE.jar包 2.为主配置文件引入新的命名空间 xmlns:context="http://www.spri ...
Laravel5.1学习笔记6 响应
基本响应附加头信息到响应附加Cookie到响应其他响应 View视图响应 JSON响应 File下载重定向重定向到命名路由重定向到控制器Action 附带闪回Session数据重定向响应 ...
网上找的JS截取字符串（含中文）
<script> /* 2007-11-28 XuJian */ //截取字符串包含中文处理 //(串,长度,增加...) function subString(str, len, ha ...
学习廖雪峰的Python教程之第一个Python程序
一.命令行模式和Python交互模式的区分命令行模式: Python交互模式二.文本编辑器 1.绝对不能用Word和Windows自带的记事本.Word保存的不是纯文本文件,而记事本会自作聪明地在 ...
使用OpenCV画折线图
使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程原文链接:http://www.360doc.com/content ...
openstack--rabbitmq
一.MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息传 ...
matlab学习下拉菜单
用matlab添加listbox控件修改string和value值,value为几就对应第几行字符串添加button按钮,将string值改为“选择x轴参数”,字体大小为10 再添加一个按钮,将s ...
【剑指Offer】17、树的子结构
题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 解题思路: 要查找树A中是否存在和树B结构一样的子树,我们可以分为两步:第一步, ...
56.doc values
主要知识点 doc values 搜索的时候,要依靠倒排索引:在54小节中写到在聚合排序的时候如果仅仅依靠倒排索引的话是不能得出准确的结果的,需要依靠正排索引,所谓的正排索引,其实就是doc ...
Git 基础教程之远程仓库
① 注册GitHub账号由于本地Git仓库和GitHub仓库之间的传输是SSH加密的,所以需要一点设置: a, 创建SSH Key 在用户主目录下,看是否有 .ssh 目录,若无 ...

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

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

随机推荐

热门专题