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

随机推荐

HBase、Hive、MapReduce、Hadoop、Spark 开发环境搭建后的一些步骤（export导出jar包方式或 Ant 方式）
步骤一若是,不会HBase开发环境搭建的博文们,见我下面的这篇博客. HBase 开发环境搭建(Eclipse\MyEclipse + Maven) 步骤一里的,需要补充的.如下: 在项目名,右键, ...
.Net Core(二) 下
接上面 http://www.cnblogs.com/xcodevs/p/5584218.html 在解决方案浏览器中,右击 Controllers 目录.选择添加>新建项.选择Web API控 ...
5.17 Quartz笔记
有用到构建者模式: builder---JobDetail相当于需要构建者构建出来的一个配件:JobDetail为Job实例提供了许多设置属性,以及JobDetaMap成员变量属性,它用来存储特定Jo ...
1.java安全框架SHIRO
1. shiro介绍 Apache Shiro是一个强大且易用的java安全框架,执行身份验证.授权.密码和会话管理. 使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移 ...
android悬浮球实现各种功能、快速开发框架、单词、笔记本、应用市场应用等源码
Android精选源码悬浮球,实现一键静音,一键锁频,一键截屏等功能一个Android快速开发框架,MVP架构 Android QQ小红点的实现源码 android一款单词应用完整app源码 an ...
js基础标签用法
js是脚本语言,开始标签<script type="text/javascript">.......结束标签</script>.script通常放在< ...
【Oracle】Rman备份策略
1. 查看可设置参数 RMAN> show all; RMAN configuration parameters for database with db_unique_name DRZ are ...
hibernate_09_关联映射_多对一
多对一关联关系和上一篇讲的一对多关联关系的不同点主要体现在映射文件上. Student类: package com.imooc.entity; import java.io.Serializable; ...
vsftp服务器搭建
1.FTP的主动模式和被动模式的区别: 最大的区别是数据端口并不总是20, 主动模式和被动模式的优缺点: 主动FTP对FTP服务器的管理和安全很有利,但对客户端的管理不利.因为FTP服务器企图与客户端 ...
利用node、express初始化项目
前端做整站是开发,例如:前端是用了vue创建初始化项目,后端我们不会php.java等,我们只能用node去创建去做后端代码,本文就给大家讲解最基础的从零开始创建一个项目的后端环境. 一般来说前后端代 ...

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

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

随机推荐

热门专题