jQuery多级手风琴菜单实现代码

2019-10-11 12:46 来源:未知

默认的inline元素

首先,我们观察一下默认的inline元素的表现:

HTML代码

XHTML

<a>首页</a> <a>热点</a>

1
2
<a>首页</a>
<a>热点</a>

CSS代码

CSS

a { margin: 0; padding: 0; border: 1px solid #000; }

1
2
3
4
5
a {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
}

效果图

图片 1

inline默认情况

默认情况下,inline元素之间就有空隙出现,所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢,它们是空白符!

复制代码 代码如下:

当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。

inline-block的应用

inline-block的应用什么场景有哪些呢?我们大家考虑一个技术的应用场景时,首先一定要思考的是技术的特性和需求是否符合。inline-block的特点是结合inline和block两种属性的特性,可以设置width和height,并且元素保持行内排列的特性,基于这一点,所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。下面举例说明:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>js实现右下角可关闭最小化div--柯乐义</title>
<script src="" type="text/javascript"></script>
<style type="text/css" media="screen">
/* 右下角跳出的广告 */
#downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100; bottom:0;right:0; backgroundnull:url() no-repeat left top;width:225px;}
#donwmsg_head{float:left; display:inline; font-size:12px;color:#FFFFFF;margin-left: 26px;margin-top: 6px;}
#downmsgBar .close{float:right;width:11px;height:11px;margin-top:6px;display:block;margin-right:5px;}
#downmsgBar{height:25px;}
#donwmsg_content{height:162px;overflow:hidden;}
#donwmsg_content ul{font-size:12px;color:#007cc1; top: 0px;padding:0px 2px 0 6px;left: 6px;line-height:180%; height:110px; overflow:hidden;}
#donwmsg_content ul li{backgroundnull:url() no-repeat -100px -245px;text-indent:13px;}
#donwmsg_content ul li a{color:#007cc1;}
#donwmsg_content ul .ll a{color:#a10000;font-weight:bold;}
#donwmsg_content p{position:absolute;left: 13px;top: 157px;}
#donwmsg_content .lb{padding:0px; text-align:center;}
#donwmsg_content .lb a{font-size:12px;color:Blue}
a.msg-hidden-btn-2{width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;backgroundnull:url() no-repeat -0px -250px;}
a.msg-hidden-btn-1{ width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;backgroundnull:url() no-repeat -50px -250px;}
</style>
</head>
<body>
<div id="downmsg_emessage" style="DISPLAY: block">
<div id="downmsgBar">
<div id="donwmsg_head">柯乐义推荐内容</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()"> </a></div>
<div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">
<ul>
<li class="ll"><a href="" >单行文字间歇向上滚动</a></li>
<li><a href="" >jQuery UI修饰title气泡</a></li>
<li><a href="" >jquery清空textarea等输入框</a></li>
<li><a href="" >jquery关灯特效</a></li>
<li><a href="" >可改变大小DIV层</a></li>
</ul>
<div class="lb"><a href="" target="_blank">jQuery</a>   <a href="" target="_blank">Javascript</a>   <a href="" target="_blank">CMS</a> </div>
</div>
</div>
</body>
</html>

jQuery多级手风琴菜单下载:

详解CSS display:inline-block的应用

2015/11/03 · CSS · display

原文出处: 小灰狼的脑瓜   

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。

效果图片: 完...

 代码如下

inline-block的问题

观察上面的例子,细心的同学肯定会发现,每个li之间有一个小空隙,而我们的代码中并没有设置margin等相关属性,这是为什么呢?

本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:
效果图片:
图片 2 
完整源代码:

HTML

内联块元素

除了菜单之外,一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。
例如使用a标签做按钮时,需要设置按钮的大小,我们就可以使用inline-block来实现。

HTML代码

XHTML

<div> 点击右边的按钮直接购买 <a href="javascript:;" class="button"> 购买 </a> </div>

1
2
3
4
5
6
<div>
    点击右边的按钮直接购买
    <a href="javascript:;" class="button">
        购买
    </a>
</div>

CSS代码

JavaScript

.button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

1
2
3
4
5
6
7
8
9
10
.button {
    display: inline-block;
    width: 150px;
    height: 45px;
    background: #b61d1d;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
}

效果图

图片 3

a标签菜单

 代码如下

布局

inline-block也可以用于常见的布局,使用它就不需要去注意float属性布局带来的问题。
举例说明,创建一个常见的3列布局。

HTML代码

XHTML

<div class="wrap"> <div class="header"> 网页头部 </div> <div class="content"> <div class="left"> 左侧 </div> <div class="center"> 中间 </div> <div class="right"> 右侧 </div> </div> <div class="footer"> 网页底部 </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrap">
    <div class="header">
        网页头部
    </div>
    <div class="content">
        <div class="left">
            左侧
        </div>
        <div class="center">
            中间
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        网页底部
    </div>
</div>

CSS代码

CSS

body, div { margin: 0; padding: 0; } .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; } .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; } .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; } .content .left, .content .right { width: 200px; } .content .center { width: 600px; background: #00ffff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body, div {
    margin: 0;
    padding: 0;
}
.header, .footer {
    width: 100%;
    background: #ccc;
    height: 120px;
    text-align: center;
    line-height: 120px;
}
.content {
    margin: 0 auto;
    background: #ff6a00;
    width: 1000px;
    font-size: 0;
}
.content .left, .content .center, .content .right {
    display: inline-block;
    font-size: 16px;
    height: 400px;
}
.content .left, .content .right {
    width: 200px;
}
.content .center {
    width: 600px;
    background: #00ffff;
}

效果图

图片 4

inline-block的三列布局

这个例子使用了inline-block做出了常见的网页布局。

关于inline-block的应用,只要是从左到右,从上到下,并且需要设置大小的列表都可以用它来实现,而这种需求是非常常见的,相比于float,我更推荐inline-block。inline-block的应用应该还有很多,大家可以多多挖掘出来。

...

网页头部菜单

网页头部的菜单就是典型的横向排列并且需要设置大小的应用,在inline-block之前,实现菜单基本都是用float属性来实现,float属性会造成高度塌陷,需要清除浮动等问题,使用inline-block实现就不需要在意这样的问题。代码如下:

HTML代码

XHTML

<div class="header"> <ul> <li> <a href="javascript:;" target="_blank">服装城</a> </li> <li> <a href="javascript:;" target="_blank">美妆馆</a> </li> <li> <a href="javascript:;" target="_blank">超市</a> </li> <li> <a href="javascript:;" target="_blank">全球购</a> </li> <li> <a href="javascript:;" target="_blank">闪购</a> </li> <li> <a href="javascript:;" target="_blank">团购</a> </li> <li> <a href="javascript:;" target="_blank">拍卖</a> </li> <li> <a href="javascript:;" target="_blank">金融</a> </li> <li> <a href="javascript:;" target="_blank">智能</a> </li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服装城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妆馆</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">闪购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">团购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍卖</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智能</a>
        </li>
    </ul>
</div>

CSS代码:

JavaScript

a, ul, li { padding: 0; margin: 0; list-style-type: none; } a { text-decoration: none; color: #333; } .header ul { font-size: 0; text-align: center; } .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a, ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a {
    text-decoration: none;
    color: #333;
}
.header ul {
    font-size: 0;
    text-align: center;
}
.header li {
    display: inline-block;
    font-size: 16px;
    width: 80px;
    text-align: center;
}

效果图

图片 5

京东首页导航菜单

这是模仿京东首页头部导航菜单的实现,使用inline-block可以很简单的实现横向菜单列表

<body>

总结

相比于使用float所带来的问题,使用inline-block所需要注意的点主要是空白符带来的问题,这一点也可以很方便的解决。
使用inline-block可以很方便的进行列表布局,更加符合我们的思维习惯,相信使用它的同学们也会越来越多,欢迎大家讨论。

3 赞 5 收藏 评论

图片 6

复制代码

基础知识

display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。

举例说明:以前我们做横向菜单列表的时候,我们可以通过li和float:left两者来实现,现在可以通过li和display:inline-block。

HTML代码:

XHTML

<ul> <li>首页</li> <li>关于</li> <li>热点</li> <li>联系我们</li> </ul>

1
2
3
4
5
6
<ul>
    <li>首页</li>
    <li>关于</li>
    <li>热点</li>
    <li>联系我们</li>
</ul>

CSS代码

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; } li { display: inline-block; border: 1px solid #000; }

1
2
3
4
5
6
7
8
9
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
li {
    display: inline-block;
    border: 1px solid #000;
}

效果图

图片 7

inline-block基本效果

可以看到li元素可以横向排列,并且可以设置width属性,大家可以复制代码自己查看效果或查看Demo

$(function(){ 
   $(".nav").accordion({ 
        speed: 500, 
        closedSign: '[ ]', 
        openedSign: '[-]' 
    }); 
});  

兼容性问题

在IE8 ,FF和Chrome的浏览器,inline-block可以完美的兼容,考虑到IE6和IE7等低版本浏览器的占用率,虽然有办法可以兼容,但本文不再赘述,大家有兴趣的可以查找相关资料。

<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(function(){
   $(".nav").accordion({
        //accordion: true,
        speed: 500,
     closedSign: '[ ]',
  openedSign: '[-]'
 });
});
</script>
<style>
.demo{width:300px; margin:40px auto; padding:10px; background:#f7f7f7}
ul{list-style:none}
.nav {width: 213px; padding: 40px 28px 25px 0; font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;}
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; text-decoration: none; font-weight: bolder;}
ul.nav li a:hover {background-color:#675C7C;    color:white;}
ul.nav ul { margin: 0; padding: 0;display: none;}
ul.nav ul li { margin: 0; padding: 0; clear: both;}
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;}
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}
ul.nav ul ul li a {color:silver; padding-left: 40px;}
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}
ul.nav span{float:right;}
</style>
</head>

消除空白符

在浏览器中,空白符是不会被浏览器忽略的,多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格,换行都会产生空白符。所以自然而然的两个元素之间会有空白符,如果将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧凑起来了。

空白符虽然是浏览器正常的表现行为,但是通常情况下,设计师同学的设计稿不会出现这些空隙,我们在还原设计稿的时候,怎么去除掉这些空隙呢。
要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试,修改CSS代码如下:

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px } li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center; font-size:12px }

1
2
3
4
5
6
7
8
9
10
11
12
13
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size:50px
}
li {
    display: inline-block;
    border: 1px solid #000;
    width: 100px;
    text-align: center;
    font-size:12px
}

我们修改ul的font-size为50px,而li的font-size为12px保持原来的字体大小,效果如下:

图片 8

font-size:50px的空隙

可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px,代码如下

JavaScript

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px } li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center; font-size:12px }

1
2
3
4
5
6
7
8
9
10
11
12
13
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size:0px
}
li {
    display: inline-block;
    border: 1px solid #000;
    width: 100px;
    text-align: center;
    font-size:12px
}

效果如下:

图片 9

font-size:0的空隙

可以看到菜单之间的空隙没有了,大家可以自行查看Demo

复制代码

 代码如下

接着,在body间写上菜单主体代码,HTML代码将由一系列无序列表组成。

<div id="main">
      <div class="demo">
      <ul class="nav">
         <li><a href="" target="_blank">首页</a></li>
         <li><a href="#">服务</a>
              <ul>
                  <li><a href="#">JAVASCRIPT</a></li>
                  <li><a href="#">PHP</a></li>
                  <li><a href="#">MYSQL</a></li>
                  <li><a href="#">LINUX</a></li>
              </ul>
         </li>
         <li><a href="#">案例</a></li>
         <li><a href="#">文章</a></a>
              <ul>
                   <li class="active"><a href="4.html" target="_blank">XHTML/CSS</a></li>
                   <li><a href="#">Javascript/Ajax/jQuery</a>
                        <ul>
                            <li><a href="#">Cookies</a></li>
                            <li><a href="#">Event</a></li>
                            <li><a href="#">Games</a></li>
                            <li><a href="#">Images</a></li>
                        </ul>
                   </li>
                   <li><a href="6.html" target="_blank">PHP/MYSQL</a></li>
                   <li><a href="7.html" target="_blank">前端观察</a></li>
                   <li><a href="9.html" target="_blank">HTML5/移动WEB应用</a></li>
              </ul>
         </li>
         <li><a href="about.html" target="_blank">关于</a></li>
      </ul>
   </div>
  
</div>

效果如下

</body>
</html>

 代码如下

复制代码

.nav {width: 213px; padding: 40px 28px 25px 0;}  
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}  
ul.nav li {}  
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;    color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;}  
ul.nav ul li { margin: 0; padding: 0; clear: both;}  
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}  
ul.nav ul ul li a {color:silver; padding-left: 40px;}  
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}  
ul.nav span{float:right;} 

speed:数字毫秒,设置菜单展开和关闭的时间。

复制代码

注意,如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="active"。

<ul class="nav"> 
   <li><a href="; 
   <li><a href="#">服务</a></li> 
   <li><a href="#">案例</a></li> 
   <li><a href="#">文章</a></a> 
        <ul> 
           <li><a href="#" target="_blank">XHTML/CSS</a></li> 
           <li><a href="#">Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href="#">Cookies</a></li> 
                    <li><a href="#">Event</a></li> 
                    <li><a href="#">Games</a></li> 
                    <li><a href="#">Images</a></li> 
                </ul> 
            </li> 
            <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
            <li><a href="#" target="_blank">前端观察</a></li> 
            <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href="#">关于</a></li> 
</ul> 

 

openedSign:当下级菜单展开时,显示于菜单旁边的内容,可以是任意html或者text。

复制代码

本文章给大家介绍一款不错的jQuery多级手风琴菜单实现代码,有需要了解的朋友可参考,手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验

实例代码

Accordion提供以下选项设置:

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

图片 10

jQuery

CSS

代码解析

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

closedSign:当下级菜单关闭时,显示于菜单旁边的内容,可以是任意html或者text。

首先在head间引用jQuery和插件。

 代码如下

调用accordion插件,设置相关属性,一个漂亮的手风琴效果就完成了。

TAG标签: css
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:jQuery多级手风琴菜单实现代码