正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2022-03-20 15:13:44
同学你好，是指由状态1切换到状态2这里不明白吗？
如果是的话，可以参考如下解析：主要是利用媒体查询，根据不同的屏幕宽度设置此时对应的样式。
屏幕宽度小于768时，默认显示按钮，下拉列表隐藏起来，如下：
屏幕宽度大于等于768时，将按钮隐藏起来，去掉下拉列表的绝对定位，并设置高度自适应，让其显示出来，如下：
祝学习愉快~
-
可以再看下老师的上一条回复，这里主要就是利用查询，根据屏幕的宽度来设置对应的样式，主要以768为分界点。
默认设置的是屏幕宽度小于768时状态，此时的按钮默认是显示的，而下拉列表则是设置绝对定位在header区域下方，由于nav-layout盒子高度设置为0，并设置了overflow:hidden;属性，超出高度的内容隐藏，所以整体是隐藏状态的，如下：
当屏幕宽度大于等于768px时，结合媒体查询@media (min-width: 768px) {} 设置了按钮隐藏，下拉列表的position属性设置对static，height设置为auto，由内容撑开高度，如下：
所以在改变页面宽度时，小于768px时，显示的是按钮，大于等于768px时，显示的是所有导航项。祝学习愉快~
2022-03-20 16:50:24
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星