I am trying to create a simple responsive Nav Bar for Service Portal. I tried a Of-the-Shelf code available on the internet. pasted in my widget but the the JQuery part of it doesn't seem to be working. The entire functionality is broken and not working as expected.
I tried creating dependencies as well with JS include type URL and adding the CDN link in that field.
Can someone please answer this once for all I feel like lot of the FIRE-POWER for UI, which we find on the internet goes unutilized because of ServiceNow not able to work with external Libraries.
Please let me know how solve this.
Below is the Code:
HTML
<nav>
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li> <a href="#">Categories </a>
<ul>
<li><a href="#">Category One</a></li>
<li><a href="#">Category Two</a></li>
<li><a href="#">Category Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.6.1.slim.js"
integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk="
crossorigin="anonymous"></script>
<script>
$('nav li').hover(
function() {
$('ul', this).stop().slideDown(200);
},
function() {
$('ul', this).stop().slideUp(200);
}
);
</script>CSS
nav { background: #2ba0db; }
nav ul {
font-size: 0;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
color: #fff;
display: block;
font-size: 14px;
padding: 15px 14px;
transition: 0.3s linear;
}
nav ul li:hover { background: #126d9b; }
nav ul li ul {
border-bottom: 5px solid #2ba0db;
display: none;
position: absolute;
width: 250px;
}
nav ul li ul li {
border-top: 1px solid #444;
display: block;
}
nav ul li ul li:first-child { border-top: none; }
nav ul li ul li a {
background: #373737;
display: block;
padding: 10px 14px;
}
nav ul li ul li a:hover { background: #126d9b; }
CLIENT SCRIPT
//Client Script
api.controller=function() {
/* widget controller */
var c = this;
$(document).ready(function(){
responsive_menu = $('.navbar_ul');
$('#menu-acces').on('click', function(e) {
e.preventDefault();
responsive_menu.slideToggle();
});
$(window).resize(function(){
var obtener_ancho = $(this).width();
if(obtener_ancho > 480 && responsive_menu.is(':hidden')) {
responsive_menu.removeAttr('style');
}
});
$('nav li').on('click', function(e) {
var obtener_ancho = $(window).width();
if(obtener_ancho < 480 ) {
responsive_menu.slideToggle();
}
});
});
};Widget Dependencies.
RESULTS:
Reality
Expected:
Would be great if some one can help.
Thanks.
100% working solution.
Replace HTML with following:
<nav>
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li> <a href="#">Categories </a>
<ul>
<li><a href="#">Category One</a></li>
<li><a href="#">Category Two</a></li>
<li><a href="#">Category Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk="
crossorigin="anonymous"></script>
<script>
$('nav li').hover(
function() {
$('ul', this).stop().slideDown(200);
},
function() {
$('ul', this).stop().slideUp(200);
}
);
</script>
Note:
I just changed "https://code.jquery.com/jquery-3.6.1.slim.js" to "https://code.jquery.com/jquery-3.6.1.js"
Result:
see..
