7b2美化顶部菜单二合一

因为本人喜欢简约的移动端看着干净直接开整

效果图电脑端

效果图移动端

步骤

.header-banner {position: absolute;height: 1px;}
.header-banner-content {height: 0px;position: absolute;}

2、隐藏顶部后会发现主菜单和幻灯部分有很大的空隙，我们贴入这个代码高度自己调整。

.site-header{height: 30px;}

3、间隙调整好以后，往下滚动页面，主菜单回收顶部没收完

.site.up .site-header-in{transform: translate(0,-60px);}

4、搜索框弄出来！

.header-banner-content > div {
  position: absolute;
  top: 15px;
  right: 10px;
}