网站介绍

这是一个使用MIP框架的响应式网站导航栏。该导航栏具有高度为72像素，当显示时具有透明度为1的样式。在移动设备上，隐藏了水平滚动条(hr-xs)。导航栏位于右侧，并且通过CSS Flexbox布局实现灵活性。导航栏中的每个项目都采用无样式列表，并且行高设置为50像素。活动链接将具有不同的样式以突出显示。

HTML结构

<div class="mip-nav-wrapper">  
<div id="bs-navbar" class="container">  
<ul class="navbar-nav">  
<!-- 导航栏项目 -->  
</ul>  
</div>  
</div>

CSS样式

.mip-nav-wrapper{height:72px}.mip-nav-wrapper.show{opacity:1 !important}.mip-nav-wrapper .hr-xs{display:none}mip-nav-slidedown #bs-navbar{margin-bottom:0;margin-right:0;float:right}mip-nav-slidedown #bs-navbar .navbar-nav{display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;margin-top:10px;margin-right:-25px}mip-nav-slidedown #bs-navbar .navbar-nav li{list-style:none;line-height:50px}.active a{/* 活动链接样式 */}.mip-nav-wrapper .hr{display:none}

JavaScript代码

var bsNav = document.getElementById('bs-navbar');  
document.addEventListener('DOMContentLoaded', function() {  
// 确保在页面加载完成后再初始化MIP Navbar  
var mipThemeCSS = window.MIP.viewer.configContext.css;  
if (mipThemeCSS && mipThemeCSS['header'].backgroundColor) {  
bsNav.classList.add('mip-theme-header');  
};  
});