欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

行使jQuery+CSS建造动态下拉菜单

发布时间:2016-12-02  编辑:杨雨个人博客网站   点击:   

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一样平常回收下拉菜单的情势来补充空间的不敷。本文将带各人用起码的时刻,行使jQuery和CSS团结建造一个动态的下拉菜单。

行使jQuery+CSS建造动态下拉菜单

HTML

起首是要在页面的head部门引入jquery库,这是必需的。

<script type="text/javascript" src="js/jquery.js"></script>

接着我行使一个无序列表来构建菜单。

<ul class="menu">
   <li><a href="#">首页</a></li>
   <li><a href="#">处事</a></li>
   <li><a href="#">案例</a></li>
   <li><a href="#">关于</a></li>
   <li><a href="#">BLOG</a></li>
</ul>

一览无余,看起来很是简捷,因为下拉菜单开始是封锁的,我还要成立一个可视的可触发下拉的按钮,本文为了利便直接行使了一张图片作为触发按钮。并将图片安排菜单列表上部。

<img src="nav.gif" width="184" height="32" class="menu_head" />

CSS

别离给菜单成立起CSS样式,请看代码:

.menu_head{border:1px solid #998675; background:#f30}
.menu{display:none; width:184px; border:1px solid #998675; border-top:none}
.menu li{list-style:none; background:#493e3b}
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;}
.menu li a:hover{font-weight:bold;}
.menu li.alt{background:#362f2d;}

值得留意的是,.menu li.alt样式是用来区分奇偶行换行要用的,在下文的jquery代码中会浮现。

jQuery

在jQuery代码中,起首我要个下拉菜单行数举办区分,别离给偶数行一个样式:alt。接着为图片按钮添加单击触发变乱,当单击按钮时可以切换下拉菜单。

$(function(){
	$(".menu li:even").addClass("alt");
	$("img.menu_head").click(function(){
		$(".menu").slideToggle("fast");
	});
});

留意,我行使了jQuery的slideToggle要领以滑动的方法实现菜单的表现和潜匿,结果很是流通。

本文地址:http://itbyc.com/web/javascript/14262.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1