我在我的SP环境中添加了kendoui菜单,并且在IE中(它在Chrome中仍然有效)时,它破坏了快速启动栏导航。我认为这是一个冲突,因为SP环境中的jquery比我的代码中运行的jquery更旧。这是我用于冲突的当前代码:
<script>
var j = jQuery.noConflict();
j(document).ready(function() {
j("#menu").kendoMenu();
});
</script>
下面是我用来创建菜单栏的所有代码。任何帮助都会很棒!
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: .5vw; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.rtl.min.css" />
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.mobile.all.min.css" />
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.default.min.css" />
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.silver.min.css" />
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.default.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/kendo.common.min.css" />
<script src="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/js/jquery.min.js"></script>
<script src="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/js/kendo.all.min.js"></script>
<!--IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="https://collaborate.gilead.com/medaffaIrs/Style%20library/kendoUI/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
</head>
<body>
<div id="example">
<div id="megaStore">
<div class="table" >
<ul id="menu">
<li class="k-state-active">
Metrics & Reports
<ul>
<li></li>
<li> MA-MI Metrics & Tracker </li>
<li> Monthly Reports </li>
</ul>
</li>
<li class="k-state-active">
Research
<ul>
<li></li>
<li>Phase 3b</li>
<li>ISR/Collab</li>
<li>MAST Committee</li>
<li>Publicaton Review</li>
<li>Encores</li>
<li>HIV Publications</li>
<li>NoCo</li>
</ul>
</li>
<li>
</li>
<li class="k-state-active">
GMedical Team Only
<ul>
<li></li>
<li>Meeting Minutes</li>
<li>Deck Training & Editorial Board</li>
<li>Submissions
<ul>
<li></li>
<li>DHHS</li>
<li>IAS</li>
<li>Resources</li>
<li>Guidelines</li>
</ul>
</ul>
</li>
<li class="k-state-active">
Tools & Resources
<ul>
<li></li>
<li>POA</li>
<li>GMAP</li>
<li>SRD Review Process</li>
<li>Deck Training</li>
<li>GMAP</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<style>
#megaStore {
max-width: 100%; height:auto;
margin: auto auto;
padding-top: 119px;
text-align: center;
height:auto;
background: url('https://collaborate.gilead.com/MedAffairs/HIV2/Site%20Assets/HIV-banner-v5.jpg') no-repeat center 0;
}
#menu {
max-width: 100%; height: auto;
margin: auto;
font-size: 1.25em;
text-transform: uppercase;
padding: 5px max-width ;
list-style-position: all;
}
.bob {
width: 19.935%;
margin:auto;
font-size: 1em;
}
.k-item.k-state-default.k-first
{
margin-left: 25%;
}
ul { text-align: left; }
ul li { display: inline-block; }
#template img {
margin: 5px 20px 0 0;
float: left;
}
#template {
width: 380px;
}
#template ol {
float: left;
margin: 0 0 0 30px;
padding: 10px 10px 0 10px;
}
#template:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#template .k-button {
float: left;
clear: left;
margin: 5px 0 5px 12px;
}
</style>
<script>
var j = jQuery.noConflict();
j(document).ready(function() {
j("#menu").kendoMenu();
});
</script>
</body>
</html>