Rumah >hujung hadapan web >html tutorial >Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换_html/css_WEB-ITnose

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:30:191326semak imbas

       前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定。

在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导

航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现

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

       首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和

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

       一中英文切换导航菜单

       制作原理:在二级下拉式菜单的基础上加以变换就可以实现,在鼠标悬浮在相应的菜单上,二级菜单出现在导航

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

隐藏即可实现。

       浏览器的兼容性问题:我测试的浏览器是火狐,谷歌,2345浏览器,以及IE7和8。

      代码:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>瀵艰</title>
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn