I have download a navigation bar template and struggling to make it work as I want it to. When a heading is clicked it opens a sub menu to have further links. I do not want all headings to open the sub menu, I want some to just be a link I.E home.
When home is clicked it just highlights home as if opening the submenu and doesnt go to the link. I think this is a js issue.
Below is the html:
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Home
<li>
Club Information
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>About the Club</h4>
<ul>
<li>About IDMC</li>
<li>Where to Find Us</li>
<li>What We Do</li>
</ul>
<h4>Contacting Us</h4>
<ul>
<li>General Information</li>
</ul>
</div></div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
I believe this is the js causing the issue but not sure what to change:
var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("click",a);b.on("click",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("click").on("click",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();
You want to exclude the items that are just links, not dropdowns. So, add a class of link to the links that have no sub-items. Home
Then change the Javascript to look like this: The code should then not run on the links with a class of link.
var cbpHorizontalMenu=(function(){
var b=$("#cbp-hrmenu > ul > li"), g=b.children("a").not($('.link')), c=$("body"), d=-1;
function f(){
g.on("click",a);
b.on("click", function(h){
h.stopPropagation();
})
}
function a(j){
if(d!==-1){
b.eq(d).removeClass("cbp-hropen");
}
var i=$(j.currentTarget).parent("li"), h=i.index();
if(d===h){
i.removeClass("cbp-hropen");
d=-1
}else{
i.addClass("cbp-hropen");
d=h;
c.off("click").on("click",e);
}
return false
}
function e(h){
b.eq(d).removeClass("cbp-hropen");
d=-1
}
return {init:f}
})();
Related
I am using slimmenu for my website. but unfortunately submenu is going out of my desktop screen if there have nested child items. So i tried to add a class "edge" with'ul' when it will go out of screen.
Here is the screenshot of the preview where i used the code https://codepen.io/themeix/pen/gyxGNO
But my code doesn't work. Here is my HTML code.
<div class="main-menu-area">
<div class="logo-area">
<h1>My Logo </h1>
</div>
<div class="menu-warpper">
<div class="navigation-navbar">
<ul id="navigation" class="slimmenu">
<li>Main Item</li>
<li>Main Item</li>
<li>Main Item</li>
<li>Main Item</li>
<li>
Main Item
<ul>
<li>
Sub Menu 1
<ul>
<li>
Sub Menu 2
<ul>
<li>
Sub Menu 3
<ul>
<li>
Sub Menu 4
<ul>
<li>
Sub Menu 5
<ul>
<li>Sub Menu 6</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sub Menu 1</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I tried the following js code to inject a class edge but unfortunately its adding for all the ul when sub menu items going out of the screen.. I want to inject only for the specific ($this) submenu item when it goes out of the screen.
jQuery(".slimmenu li").on('mouseenter mouseleave', function(e) {
if (jQuery('ul', this).length) {
var elm = jQuery('ul:first', this);
var off = elm.offset();
var l = off.left;
var w = elm.width();
var docH = jQuery(".navigation-navbar").height();
var docW = jQuery(".navigation-navbar").width();
var isEntirelyVisible = (l + w <= docW);
if (!isEntirelyVisible) {
jQuery(this).addClass('edge');
} else {
jQuery(this).removeClass('edge');
}
}
});
in that js code edge class adding for all the submenu items but i want to inject it only for the current .has-submenu item while mousehove and its going out of the screen. and removeclass also not working when i leave the mouse. Can anyone help me to fix that issue for me by using js?
remove your menu width....there is limited space between the nav link and that's why this was happened.
I'm trying to get my responsive navigation to collapse when clicking a navigation item (link).
This is my navigation:
<nav class="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav-toggle"></li>
</ul>
</nav>
Here's how the responsive nav gets expanded:
<script>
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
</script>
I'm not sure why you're mixing old school list tags with the modern Nav because you don't need them.
If you want the menu to collapse upon selection you can use this neat technique:
<nav style="position:absolute; left:20px; top:50px;">
<div onclick="TheBox.removeAttribute('open');">
<details id="TheBox"><summary>Choices</summary>
Home<br>
About<br>
Products<br>
Services<br>
Contact
</div></details></nav>
It looks like you want to hide the navigation when the toggle link is clicked. If so, I would do the following. Note that your <a> tags were outside the <li> tags, I've moved them inside.
<nav id="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav0item">Toggle</li>
</ul>
</nav>
I would target by ID and not class, and set the display to none.
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
Since your toggle is on a <li> inside the nav, your navigation menu (and the toggle) will be hidden when activated. So, I'd make a way to show it again. You could, for instance, add this function in your JS.
function showNav() {
document.getElementById('nav').style.display = "block";}
And then add a link somewhere for the user to show the menu again.
<button onclick="showNav();" >Show Menu</button>
If you go that route, I'd also hide the Show Menu button by default by adding id="shownav" style="display: none;" to hide it initially. And then have your collapseNav function also show the button:
document.getElementById('shownav').style.display = "block";
Thank you for your responses.
This is what I was looking for:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
Now the "responsive" class gets removed when clicking on a navigation item or the logo, so my navigation returns to collapsed mode.
$('.navigation-main').find('li').has('ul').children('a').on('click', function (e) {
e.preventDefault();
// Collapsible
$(this).parent('li').not('.disabled').not($('.sidebar-xs').not('.sidebar-xs-indicator').find('.navigation-main').children('li')).toggleClass('active').children('ul').slideToggle(250);
// Accordion
if ($('.navigation-main').hasClass('navigation-accordion')) {
$(this).parent('li').not('.disabled').not($('.sidebar-xs').not('.sidebar-xs-indicator').find('.navigation-main').children('li')).siblings(':has(.has-ul)').removeClass('active').children('ul').slideUp(250);
}
});
above is my javascript.
HTML part is,
<div class="sidebar-category sidebar-category-visible">
<div class="category-content no-padding">
<ul class="navigation navigation-main navigation-accordion">
<li class="active"><i class="icon-home4"></i> <span>Dashboard</span></li>
<li>
<i class="icon-cogs"></i><span>Settings</span>
<ul>
<li>Add Institution Details</li>
<li>Academic Details</li>
<li>Student Import</li>
<li>Employee Import</li>
<li>Privileges</li>
<li>Assign <?php echo Yii::app()->params['course']; ?>s</li>
<li>Users</li>
</ul>
</li>
<li>
The code is worked for my navigation panel. But after reloading the page to selected submenu, all accordian will close. Code for navigation panel is written in seperate file and include to each page. I want the active class to set to the recently clicked menu after redirection
The submenu on each menu item slides underneath the main menu item instead of sliding out whenever I click on a menu item, which is what it's supposed to do. Problem is the site itself automatically scrolls up. Its as if the main menu items have a link to them that is anchored to the top of the site. I click on them, the submenu slide out, but the site itself scrolls up everytime.
How to make the code cross-browser compatible?
The javascript code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
The html code:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Based off of this menu: http://www.pmob.co.uk/temp/drop-down-expand.htm#
The reason is because you have "#" in your hrefs...this is telling the browser to return to the top. You need to return false on your onclick so that the default behavior (navigating to the href) doesn't happen on the items that are not truly "links".
You can always add e.preventDefault() to the event listener to remove all hyperlink-effects after clicked.
Using preventDefault is usually more recommended.
http://jsfiddle.net/Z8Uvj/
$("a").click(function(e){
//your stuff
e.preventDefault();
});
I'm looking for a solution, it must work in IE also, that I can have the content hidden and then when you click one of the menu items it shows the content. However, the content doesn't hide until a user clicks on the next link...
Please check this link
http://jsfiddle.net/varada/YLX9x/
you can use jquery hide() and show() functions for that.
Let the id of div that is to be hidden be hidden_div, let menu item be menu_item, next button be next,
Import the jquery.js
and write the ready function as below..
$(document).ready(function() {
$('#menu_item').click(function() {
$('#hidden_div').show();
});
$('#next').click(function() {
$('#hidden_div').hide();
});
});
or if you mean the content be visible till he click the next link on the menu item, add a class name say, menu_class to the menu items and write the code
$('.menu_class').click(function() {
$('#hidden_div').hide();
});
instead of $('#next').click(function()
if you have a menu like
<ul>
<li class='menu_class'>item 1</li>
<li id='menu_item' >item 2</li>
<li class='menu_class'>item 3</li>
</ul>
and the div
<div id='hidde_div' style='display:none'>
content
</div>
then if you click item 2 the div will get displayed. and if you click item 1 or item 3 it will get hidden. make sure you are using the code $('.menu_class').click(function() {
html:
<li class="main">Web
<ul>
<li>Designing</li>
<li>Development</li>
</ul>
</li>
<li class="main">IT
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</li>
<li class="main">ITES
<ul>
<li>BPO</li>
<li>Online Portal</li>
<li>Online Marketing</li>
</ul>
</li>
js:
$(document).ready(function(){
$('li ul:not(:first)').hide();
$('ul li').click(function(){
$(this).closest('.main').next().find('ul').show();
$(this).closest('ul').hide();
});
});
http://jsfiddle.net/7QheB/