12.8 手风琴菜单

1. 首先创建一个新的html，在body下面写入一个标签为menu的div标签作为外部的一个大盒子
   
2. 在这个大盒子写入一个标签题目，也称之后主题，在这里必须用h2或者h3标签来命名，或者利用其它标签，然后再其他标签内用css代码来编辑一样也可以的
   
3. 然后在h3标签内下方再写一个div名为itemBox，这个div是显示内容的，有标题有内容才是新闻嘛，当然，这个内容区域我比较推荐使用ul和li标签来搭配使用
   
4. 这时候我们的第一个内容也完成了，然后再头部样式中写入我们要编写的css代码，首先我们还是一样，用一个通配符*用来获取body内的全部元素标签，写入外边距和内边距都为0个像素
   
5. 然后再标签中改一下字体颜色，首先，先获取这个div的类名.menu，记得要在前面加个.然后再后面在添加个h3，意思是这个标签下面的h3标签，字体颜色按个人喜好
6. 然后我们在这个大的盒子内写入基本的样式，宽外边距，文本居中还有一个背景色，
   
7. 然后我们编写一下内容区的样式ul，首先先把li自带的效果把它去掉，然后设置宽，宽要和外部的大盒子的宽要一样宽，然后设置高为0，背景颜色，还有一个是overflow超出部分隐藏，最后一个就是过渡效果，这里的话我们效果是移入后是li标签从上显示到下，所以我们这里的话设置一个height就可以了然后后面设置过渡时间为3秒，动作为ease以慢结束就可以了
   
8. 选择我们设置li标签的文字内容为居中，所以的话这里我们用行高属性来吧文字居中就行了
   
9. 最后我们设置一下最后ul标签悬停效果，效果为移入鼠标改为点击，还有将高改为90px
   
10. 最后将源代码的内容itembox多复制几个来显示效果更明显
    
    这是我所学到的点击隐藏显示效果了，所以我要分享给你们，希望可以帮助到你们。
    以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

标签：菜单,标签,写入,然后,li,h3,手风琴,12.8,div
来源： https://blog.csdn.net/A_tuohai/article/details/121790989