怎么用js和css做一个滑动折叠的菜单?

作者&投稿:系敬 (若有异议请与网页底部的电邮联系)
如何实现CSS+JS一个DIV层的展开/折叠效果~

可以改变 "div" 元素的高度(jQuery的animate方法):$(".btn1").click(function(){ $("#box").animate({height:"300px"});});也可以设置溢出隐藏:
content more..第二种方式也需要js动态改变div style里面的margin-top。

利用伪类可以实现点击打开折叠菜单,但是再次点击收起貌似就没法实现了。跟楼下说的一样,利用:hover、:active 可以设置二级菜单的样式(如height、visibility、display)以达到展开的效果。

下面代码就是你要的效果!具体样式再根据你的需要进行修改就可以:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>广告代码CSS+XHTML代码</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT-SIZE: 12px; BACKGROUND: #fff; FONT-FAMILY: "Lucida Grande", Helvetica, Arial, sans-serif
}
#dlmenu {
HEIGHT: 10em
}
#menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 10px; WIDTH: 15em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute
}
#menu LI {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; Z-INDEX: 100; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative
}
#menu LI A {
DISPLAY: block; TEXT-DECORATION: none
}
#menu LI A:visited {
DISPLAY: block; TEXT-DECORATION: none
}
#menu LI DD {
DISPLAY: none
}
#menu LI:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#menu LI A:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#menu LI:hover DT A {
BACKGROUND: url(top_grad_2.gif) #d4d8bd center center; COLOR: #ff0
}
#menu LI A:hover DT A {
BACKGROUND: url(top_grad_2.gif) #d4d8bd center center; COLOR: #ff0
}
#menu LI:hover DD {
DISPLAY: block
}
#menu LI A:hover DD {
DISPLAY: block
}
#menu LI:hover DL {
BACKGROUND: url(sub_grad.gif) #b4be9c; HEIGHT: 20em
}
#menu LI A:hover DL {
BACKGROUND: url(sub_grad.gif) #b4be9c; HEIGHT: 20em
}
#menu TABLE {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -4px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
#menu DL {
BACKGROUND: #6f9c6f; MARGIN: 0px; WIDTH: 15em; CURSOR: pointer
}
#menu DT {
PADDING-RIGHT: 0px; BORDER-TOP: #cce 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 1.1em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#menu DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
.gallery DT A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(top_grad.gif) #949e7c center center; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px
}
.gallery DT A:visited {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(top_grad.gif) #949e7c center center; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px
}
.gallery DD A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; MIN-HEIGHT: 1em; BACKGROUND: url(sub_grad.gif) #b4be9c; PADDING-BOTTOM: 4px; COLOR: #000; PADDING-TOP: 4px; TEXT-DECORATION: none
}
.gallery DD A:visited {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; MIN-HEIGHT: 1em; BACKGROUND: url(sub_grad.gif) #b4be9c; PADDING-BOTTOM: 4px; COLOR: #000; PADDING-TOP: 4px; TEXT-DECORATION: none
}
HTML .gallery DD A {
HEIGHT: 1em
}
HTML .gallery DD A:visited {
HEIGHT: 1em
}
.gallery DD A:hover {
BACKGROUND: #7aa; COLOR: #ff0
}
</STYLE>

<META content="MSHTML 6.00.2900.3429" name=GENERATOR></HEAD>
<BODY>
<DIV id=dlmenu>
<UL id=menu>
<LI><!--[if lte IE 6]><A
href="#">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT><A
href="#">DEMOS</A>
<DD><A title="The zero dollar ads page"
href="#">zero
dollars</A>
<DD><A title="Wrapping text around images"
href="#">wrapping
text</A>
<DD><A title="Styling forms"
href="#">styled form</A>
<DD><A title="Removing active/focus borders"
href="#">active
focus</A>
<DD><A title="Multi-position drop shadow"
href="#">shadow
boxing</A>
<DD><A title="Image Map for detailed information"
href="#">image
map</A>
<DD><A title="fun with background images"
href="#">fun with
backgrounds</A>
<DD><A title="fade-out scrolling"
href="#">fade
scrolling</A>
<DD><A title="em size images compared"
href="#">em sized
images</A> </DD>
</DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]-->
<LI><!--[if lte IE 6]><A
href="#">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT><A
href="#">MENUS</A>
<DD><A title="a coded list of spies"
href="#">spies menu</A>
<DD><A title="a horizontal vertical menu"
href="#">vertical
menu</A>
<DD><A title="an enlarging unordered list"
href="#">enlarging
list</A>
<DD><A title="an unordered list with link images"
href="#">link
images</A>
<DD><A title="non-rectangular links"
href="#">non-rectangular
links</A>
<DD><A title="jigsaw links"
href="#">jigsaw
links</A>
<DD><A title="circular links"
href="#">circular
links</A> </DD>
</DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]-->
<LI><!--[if lte IE 6]><A
href="#">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT><A
href="#">LAYOUTS</A>
<DD><A title="Cross browser fixed layout"
href="#">Fixed
1</A>
<DD><A title="Cross browser fixed layout"
href="#">Fixed 2</A>
<DD><A title="Cross browser fixed layout"
href="#">Fixed 3</A>
<DD><A title="Cross browser fixed layout"
href="#">Fixed 4</A>
<DD><A title="A simple minimum width layout"
href="#">minimum
width for Internet Explorer</A> </DD>
</DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]-->
<LI><!--[if lte IE 6]><A
href="#">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT><A
href="#">MOZILLA</A>
<DD><A title="A drop down menu"
href="#">drop
down menu</A>
<DD><A title="A cascading menu"
href="#">cascading
menu</A>
<DD><A title="Using content:"
href="#">content:</A>
<DD><A title=":hover applied to a div"
href="#">mozzie
box</A>
<DD><A title="I can build a rainbow"
href="#">rainbow
box</A>
<DD><A title="Snooker cue"
href="#">snooker
cue made using border art</A>
</DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI></UL></DIV>

</BODY></HTML>

1、在网页<head>区添加以下样式定义

<style
type="text/css">
#dlmenu
{height:10em;}
#menu
{list-style-type:none;
margin:0
0
10px;
padding:0;
position:absolute;
width:15em;
background:#fff;
z-index:100;}
#menu
li
{display:block;
padding:0;
margin:0;
position:relative;
z-index:100;}
#menu
li
a,
#menu
li
a:visited
{display:block;
text-decoration:none;}
#menu
li
dd
{display:none;}
#menu
li:hover,
#menu
li
a:hover
{border:0;}
#menu
li:hover
dt
a
,
#menu
li
a:hover
dt
a
{background:#d4d8bd
url(top_grad_2.gif)
center
center;
color:#ff0;
}
#menu
li:hover
dd,
#menu
li
a:hover
dd
{display:block;}
#menu
li:hover
dl,
#menu
li
a:hover
dl
{height:20em;
background:#b4be9c
url(sub_grad.gif);}
#menu
table
{border-collapse:collapse;
padding:0;
margin:-4px;
font-size:1em;}
#menu
dl
{width:
15em;
margin:
0;
background:
#6f9c6f;
cursor:pointer;}
#menu
dt
{margin:0;
padding:
0;
font-size:
1.1em;
border-top:1px
solid
#cce;}
#menu
dd
{margin:0;
padding:0;
font-size:
1em;
text-align:left;
}
.gallery
dt
a,
.gallery
dt
a:visited
{display:block;
color:#fff;
padding:5px
5px
5px
10px;
background:#949e7c
url(top_grad.gif)
center
center;}
.gallery
dd
a,
.gallery
dd
a:visited
{color:#000;
min-height:1em;
text-decoration:none;
display:block;
padding:4px
5px
4px
20px;
background:#b4be9c
url(sub_grad.gif);}
*
html
.gallery
dd
a,
*
html
.gallery
dd
a:visited
{height:1em;}
.gallery
dd
a:hover
{background:#7aa;
color:#ff0;}
</style>
2、在网页<body>区添加菜单HTML代码
<div
id="dlmenu">
<ul
id="menu">
<li>
<!--[if
lte
IE
6]><a
href="#nogo"><table><tr><td><![endif]-->
<dl
class="gallery">
<dt><a
href="../menu/index.html">DEMOS</a></dt>
<dd><a
href="../menu/zero_dollars.html"
title="The
zero
dollar
ads
page">zero
dollars</a></dd>
<dd><a
href="../menu/embed.html"
title="Wrapping
text
around
images">wrapping
text</a></dd>
<dd><a
href="../menu/form.html"
title="Styling
forms">styled
form</a></dd>
<dd><a
href="../menu/nodots.html"
title="Removing
active/focus
borders">active
focus</a></dd>
<dd><a
href="../menu/shadow_boxing.html"
title="Multi-position
drop
shadow">shadow
boxing</a></dd>
<dd><a
href="../menu/old_master.html"
title="Image
Map
for
detailed
information">image
map</a></dd>
<dd><a
href="../menu/bodies.html"
title="fun
with
background
images">fun
with
backgrounds</a></dd>
<dd><a
href="../menu/fade_scroll.html"
title="fade-out
scrolling">fade
scrolling</a></dd>
<dd><a
href="../menu/em_images.html"
title="em
size
images
compared">em
sized
images</a></dd>
</dl>
<!--[if
lte
IE
6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if
lte
IE
6]><a
href="#nogo"><table><tr><td><![endif]-->
<dl
class="gallery">
<dt><a
href="index.html">MENUS</a></dt>
<dd><a
href="spies.html"
title="a
coded
list
of
spies">spies
menu</a></dd>
<dd><a
href="vertical.html"
title="a
horizontal
vertical
menu">vertical
menu</a></dd>
<dd><a
href="expand.html"
title="an
enlarging
unordered
list">enlarging
list</a></dd>
<dd><a
href="enlarge.html"
title="an
unordered
list
with
link
images">link
images</a></dd>
<dd><a
href="cross.html"
title="non-rectangular
links">non-rectangular
links</a></dd>
<dd><a
href="jigsaw.html"
title="jigsaw
links">jigsaw
links</a></dd>
<dd><a
href="circles.html"
title="circular
links">circular
links</a></dd>
</dl>
<!--[if
lte
IE
6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if
lte
IE
6]><a
href="#nogo"><table><tr><td><![endif]-->
<dl
class="gallery">
<dt><a
href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a
href="../layouts/bodyfix.html"
title="Cross
browser
fixed
layout">Fixed
1</a></dd>
<dd><a
href="../layouts/body2.html"
title="Cross
browser
fixed
layout">Fixed
2</a></dd>
<dd><a
href="../layouts/body4.html"
title="Cross
browser
fixed
layout">Fixed
3</a></dd>
<dd><a
href="../layouts/body5.html"
title="Cross
browser
fixed
layout">Fixed
4</a></dd>
<dd><a
href="../layouts/minimum.html"
title="A
simple
minimum
width
layout">minimum
width
for
Internet
Explorer</a></dd>
</dl>
<!--[if
lte
IE
6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if
lte
IE
6]><a
href="#nogo"><table><tr><td><![endif]-->
<dl
class="gallery">
<dt><a
href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a
href="../mozilla/dropdown.html"
title="A
drop
down
menu">drop
down
menu</a></dd>
<dd><a
href="../mozilla/cascade.html"
title="A
cascading
menu">cascading
menu</a></dd>
<dd><a
href="../mozilla/content.html"
title="Using
content:">content:</a></dd>
<dd><a
href="../mozilla/moxbox.html"
title=":hover
applied
to
a
div">mozzie
box</a></dd>
<dd><a
href="../mozilla/rainbow.html"
title="I
can
build
a
rainbow">rainbow
box</a></dd>
<dd><a
href="../mozilla/snooker.html"
title="Snooker
cue">snooker
cue
made
using
border
art</a></dd>
<dd><a
href="../mozilla/target.html"
title="Target
Practise">target
practise</a></dd>
</dl>
<!--[if
lte
IE
6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

1、在网页<head>区添加以下样式定义 :
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}
</style>

2、在网页<body>区添加菜单HTML代码
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

你说的是不是中间那个滚动条?那是用JS写的。


怎么在HTML页面中引用JS,CSS文件? 麻烦写个具体代码
css的代码 temp {width: 100px;height: 100px;background: black;}myjs.js的代码 window.onload = function(){alert("写给怎么在HTML页面中引用JS,CSS文件? 麻烦写个具体代码");};以上三个文件都是放在同一个目录下的,如果需要在不同的目录下请修改css的href和js的src即可 ...

学完HTML,CSS和js后是不是什么网页都能做出来了?
不能说什么网页都能做出来,如果你简单的想制作静态的网页,那HTML+CSS+js足够了,但是如果你想做一些和数据有交互的应用网站,那还需要更深入的学习一些其他的东西,比方说AJAX,Jquery等等计算机语言,怎么说呢,计算机语言互相关联,看你到底要实现的是什么了 ...

用js写 有六个按钮点击按钮会变色 然后其他按钮恢复原来的颜色_百度知 ...
可以使用js的css方法实现点击按钮会变色,然后其他按钮恢复原来的颜色。具体步骤如下:需要准备的材料分别是:电脑、浏览器、ultraedit。1、在ue编辑器中新建一个空白的html文件,js文件。2、在ue编辑器中输入以下html代码。3、在ue编辑器中输入以下js代码。4、编辑完成以后,在ue编辑器中点击保存,格式...

如何把css文件和js文件整合正在一个html文件里面
人民币就算了,丢不起这个份儿啊 在 HTML 里直接使用 CSS 和 JS,你只需要把 CSS 和 JS 文件里的代码复制到 HTML 代码的 中间即可,最后应该是这样的 ...head 里面的其他标记... 把 CSS 代码复制到这里<!-- 把 JS 代码复制到这里--> ...

html +css+js怎么做这个效果图
这个是一个切换效果。希望我的回答可以帮到你,有什么不懂可以追问。

js和css有什么区别
js和css的区别就是,是两个完全不同的东西;js全称是javascript,就是一种脚本语言,用来网页上面的动态交互等;css是级联样式表(Cascading Style Sheet),就是用这种语言来控制网页元素的表现形式的一种描述性语言;联系呢就是这两个语言是网页前端开发中很重要的两个语言(html+css+js)。

html,css,js各自的用途是什么啊?
学会了JS\/HTML\/CSS,我们只能开发网站吗?NO、NO!要知道,学会了JS等于你学会了“一切”啊!本期视频,由Link(Amber的老公)告诉你:除了网站,我们还能开发什么?

网页制作,排版DIV+CSS,JS,用什么方法可以做出下面这种排版,现在很多...
这种排版方式叫做瀑布流 一般都是靠js来控制的,纯css的不好写 现在瀑布流的js插件很多,谷歌 瀑布流插件 源码一把一把的 纯手打,希望帮到你

用js和css制作的网页页面,请问怎么把表格的一行分成两行?
想在哪里换行就在哪里加换行符 就可以了 如下:Note: A Scene does not have a stop date and time. A Scene gets automatically deactivated when another Scene becomes active .

文件的后缀名为:css,js有什么作用
符合规范,便于代码维护。就像你买衣服去,人家问你想买上衣还是裤子,你说上衣,你说你想买裤子,但是实际想买上衣也没问题,但是大家一致认为上面穿的是上衣,统一思想,这样也便于别人阅读你的代码。

黄石市18787341309: css如何做页面折叠 -
宗泰珍石: css页面折叠可以通过display:block/none 来控制内容显示和隐藏.同时用js来触发.

黄石市18787341309: 如何实现CSS+JS一个DIV层的展开/折叠效果 -
宗泰珍石: 点击事件修改div高度,内容设定超出部分隐藏

黄石市18787341309: css实现 滑动菜单 鼠标移开非菜单位置时,菜单仍然保持打开状态,点击其他菜单项才折叠起来.
宗泰珍石: &lt;style&gt; a{text-decoration:none;color:#666;border-right:1px solid #fff; border-left:1px solid #ccc;background:#eee;width:84px;height:26px; float:left;text-align:center;line-height:26px;display:block;font-size:12px;} a.hover{background:#0099cc;color:...

黄石市18787341309: html5css3左侧折叠菜单怎么做 -
宗泰珍石: <h1><p>折叠1</p></h1><h1><p>折叠2</p></h1><h1><p>折叠3</p></h1><h1><p>折叠4</p></h1> 需要js来,最好用jquery来实现 只需要给h1绑定事件,单件它的时候,设置它的p属性,display:none.

黄石市18787341309: CSS如何实现html跳转时的滑动样式? -
宗泰珍石: 具体操作如下: html { scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜 色*/scrollbar-highlight-color: #666; /*滚动条空白部分的 颜色*/...

黄石市18787341309: 用HTML和css和js怎样实现随着页面滑动 -
宗泰珍石: 完全用CSS控制就可以了,页面在滚动,给这个DIV设置position:fixed;那么页面不管怎么滚动,这个DIV是中在顶端 解决方案二:显示合作div absolute定位,判断滚动到div位置的时候设置position为fixed,同时设置top为0<div style="height:...

黄石市18787341309: CSS或者JS制作滑动门效果,让网页进行平移.详细,最好带注释
宗泰珍石: 先把下图左边那部分隐藏掉,然后,鼠标移动到导航的时候用:hover属性,把下图左边2级导航显示出来,OK效果搞定

黄石市18787341309: 怎么用原生 JavaScript 实现像 jQuery 那样平滑运动的动画效果 -
宗泰珍石: 1、使用CSS滤镜进行效果过渡,IE10需要用CSS3.0的滤镜.2、JQuery也就是用Js写出来的一套框架,直接翻JQuery中该滤镜效果的源代码看.具体代码不需要给出吧?只要知道具体是什么东西(滤镜效果),就有现成代码了.

黄石市18787341309: 调用数据库栏目在前台显示二级折叠菜单怎么做? -
宗泰珍石: 折叠是一种样式的呈现方式,需要用css结合js来实现.细分逻辑,就是子菜单区域的显示和隐藏,html标签中有个设置显示和隐藏的样式属性:display:none/block 通过js触发,来切换这个属性的值即可实现显示和隐藏效果了.比如:定义一个显...

黄石市18787341309: jq可折叠菜单怎么做 -
宗泰珍石: //给白色框里的ul一个class为list_menu<script>$(funtion() { $(".li2").click( var flag = $(".list_menu").css("display"); if(flag == 'none') { $(".list_menu").show(); }else { $(".list_menu").hide(); } ); });</script>

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网