css3伸缩菜单特效代码

CSS3伸缩菜单是一种常用的网页导航效果，它可以让页面跳转更加直观、美观，同时也可以提高网站的用户体验。下面是一段实现CSS3伸缩菜单效果的代码示例：

/* 定义菜单样式 */
#menu {
display: inline-block;
position: relative;
width: 200px;
border: 1px solid #CCC;
border-radius: 5px;
}
/* 定义菜单项样式 */
#menu li {
width: 100%;
list-style: none;
}
/* 定义菜单项的默认状态 */
#menu li a {
display: block;
padding: 10px;
background-color: #FFF;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
/* 定义菜单项的hover状态 */
#menu li a:hover {
background-color: #EEE;
color: #000;
}
/* 定义伸缩菜单项的样式 */
#menu span {
display: block;
position: absolute;
right: 0;
top: 0;
padding: 10px;
background-color: #EEE;
color: #333;
cursor: pointer;
border-radius: 0 5px 0 0;
transition: all 0.3s ease;
}
/* 定义伸缩菜单的hover状态 */
#menu:hover span {
background-color: #CCC;
color: #FFF;
}
/* 定义菜单伸缩状态 */
#menu.expanded li a {
display: block;
}
#menu.collapsed li a {
display: none;
}

以上代码以id选择器“menu”为例，通过在样式表中定义菜单和菜单项的默认状态和hover状态，实现了菜单的伸缩效果。其中，通过在菜单中添加一个伸缩按钮(span元素)，通过JavaScript脚本动态修改菜单的Class属性(expanded或collapsed)，来控制菜单项的显示和隐藏，实现了动态伸缩效果。

查看更多关于css3伸缩菜单特效代码的详细内容...