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

像苹果网站mac栏目右边那样的http://www.apple.com.cn/mac/请给出源码，谢谢是右边，何处购买、热门下载、热点新闻这三个菜单的效果,321bj你的... 像苹果网站mac栏目右边那样的
http://www.apple.com.cn/mac/
请给出源码，谢谢
是右边，何处购买、热门下载、热点新闻这三个菜单的效果, 321bj你的代码还是不行啊，菜单滑动得太突然了，没有过度效果，而且我要的是开始的时候有一个菜单是展开的，不管在什么情况下，那三个菜单的总长度是不变的展开

 我来答

4个回答

#合辑# 机票是越早买越便宜吗？

傲视群雄重出江湖
推荐于2016-05-29 · 超过22用户采纳过TA的回答

知道答主

回答量：188

采纳率：0%

帮助的人：76.4万

我也去答题访问个人页

关注

展开全部

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

<!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>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

实茂孟尔白
2019-09-30 · TA获得超过3862个赞

知道大有可为答主

回答量：3083

采纳率：28%

帮助的人：214万

我也去答题访问个人页

关注

展开全部

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>

<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>

</li>
<li>

<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>

</li>
<li>

<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>

</li>
<li>

<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>

</li>
</ul>
</div>

已赞过 已踩过<

评论收起

千锋教育
2016-01-06 · 做真实的自己用良心做教育

千锋教育

千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。

向TA提问

关注

展开全部

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>

<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>

</li>
<li>

<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>

</li>
<li>

<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>

</li>
<li>

<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>

</li>
</ul>
</div>

已赞过 已踩过<

评论收起

yiqianke
2008-10-27 · TA获得超过115个赞

知道答主

回答量：121

采纳率：0%

帮助的人：116万

我也去答题访问个人页

关注

展开全部

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

已赞过 已踩过<

评论收起

3条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：