nav导航栏实现响应式

我现在想做一个导航栏,左侧有一个logo,中间是导航栏的条目,右边是一个下拉菜单,当屏幕变小的时候,导航栏条目逐渐的移动到下拉菜单中,当屏幕变大时,下拉菜单中的条目再移动到导航栏的条目中

clipboard.png

有哪位大神曾经做过或者有思路有代码还希望不吝赐教,小弟在此谢过!!!

阅读 4.5k
4 个回答

boostrap框架自己研究

我大概说一下我的想法
判断所有子元素长度(包括border、padding、margin)是否超出父元素的长度,然后把超出部分移入下拉菜单

常见的是一定的尺寸用一种样式,参考一个网站https://www.awesomes.cn/不限于这个网站现在好多都有了吧
小尺寸时:

awesomes

用媒体查询,宽于768px时↓
@media (min-width: 768px)……

你说的那个需求就……

感谢大家的回复,这个确实需要js来控制,我自己想想办法,可能当时我想的有点复杂了,等实现之后我会在这里回复,感谢大家的帮助

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题