jQuery结合CSS制作动态的下拉菜单

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足。本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单。

XHTML
首先是要在页面的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方法以滑动的方式实现菜单的显示和隐藏,效果非常流畅。

以上就是分享的jQuery结合CSS制作动态的下拉菜单,希望对大家的学习有所帮助。

(0)

相关推荐

  • 来自国外的30个基于jquery的Web下拉菜单

    jQuerySmooth Navigation Menu Simple Drop Down Menu Plugin Dropdown, iPod Drilldown, and Flyout styles jQuery and CSS Example Create the Fanciest Drop Down Menu You Ever Saw A Different Top Navigation Simple jQuery Dropdowns Sexy Drop Down Menu with j

  • jQuery ul标签下拉菜单演示代码

    这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a> <u

  • JQuery设置获取下拉菜单某个选项的值(比较全)

    JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置sele

  • jQuery+CSS 实现的超Sexy下拉菜单

     如何实现 Step 1 HTML 复制代码 代码如下: <ul class="topmenu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul class="submenu1"> <li><a href="#&

  • jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li

  • jquery 多级下拉菜单核心代码

    jquery 复制代码 代码如下: $(document).ready(function(){ $("ul li").hover(function(){ $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示: },function(){ $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul: }) $("ul li ul li ul&qu

  • Jquery带搜索框的下拉菜单

    1.样式引用: 复制代码 代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" /> 2.由于应用了Jquery,所以引用Jquery.(下载地址) 复制代码 代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript&qu

  • jquery+css实现绚丽的横向二级下拉菜单-附源码下载

    首先给大家展示下效果图: 查看效果 源码下载 html代码部分: 代码如下: <!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

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • 用jquery实现下拉菜单效果的代码

    效果如下:这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a>

随机推荐