Vertical CSS slide menu pushing the site up on click - javascript

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();
});

Related

Navbar using js. Link not working

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}
})();

Bouncing submenu jquery

I´m doing a menu that every item has it´s submenu. this is the markup:
<ul id="menu">
<li>
TITLE 1
<ul class="submenu">
<li>
sub1
</li>
<li>
sub2
</li>
</ul>
</li>
<li>
TITLE 2
<ul class="submenu">
<li>
sub1
</li>
<li>
sub2
</li>
</ul>
</li>
<li>
TITLE 3
</li>
<li>
TITLE 4
</li>
</ul>
css
.submenu{display:none}
script
function show_submenu(that) {
$('ul.submenu').slideUp();
$(that).next('ul.submenu:first').slideDown();
}
The problem I have is that if I click over an item, it slides down it´s submenu, BUT if I click over it again, it slidesup and slidesdown again it´s submenu, which is already opened... kind of weird effect for the user... any ideas how to fix it?
You need to check whether the existing submenu is visible already. If it is, you don't want to slide it down again.
var $submenu = $(that).next('ul.submenu:first'),
viz = $submenu.is(":visible");
$('ul.submenu').slideUp();
if (!viz) {
$(that).next('ul.submenu:first').slideDown();
}
http://jsfiddle.net/ExplosionPIlls/zep6H/
use toggle in jquery
$('#foo').toggle(showOrHide);
http://api.jquery.com/toggle/
It's doing exactly what you coded it to do. Instead, use .slideToggle();
function show_submenu(that){
$(that).next('ul.submenu:first').slideToggle();
}
jsFiddle example
this should help
function show_submenu(that){
if(!$(that).next('ul.submenu:first').is(":visible")){
$('ul.submenu').slideUp();
$(that).next('ul.submenu:first').slideDown();
}
}

jQuery slide down navigation

I'm trying to build a simple jQuery slide down navigation but I'm having a bit of a issue with toggle in on and off the navigation.
I have navigation as follows.
<ul id="nav">
<li>home</li>
<li class="parent">Clothing
<ul>
<li>child</li>
<li>child</li>
<li>child</li>
</ul>
</li>
<li class="parent">shoes
<ul>
<li>child</li>
<li>child</li>
<li>child
<ul>
<li>child child</li>
</ul>
</li>
</ul>
</li>
with the following jquery
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#nav').children('.parent').click(function(e){
e.preventDefault();
$this = $j(this);
$j('#nav').children('.parent').children('ul').stop().slideUp('slow', function(){
$this.children('ul').stop().slideToggle('slow');
});
});
});
Now when i click the Sub navigation slides out, clicking again does nothing, and i need it to slide back up. If i click another one what I need to happen is have the expanded nav (if any) slide back up, and then the new one slide down after, but it's just not wanting to work correctly for me! It's buggy and both display at once, and sometimes don't show.
See this...
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#nav > .parent').on('click', function(e){
e.preventDefault();
$j('#nav > .parent').children().stop().slideUp('slow');
$j(this).children().stop().slideToggle('slow');
});
});
See this jSfiddle example

onclick open sub menu, on click close sub menu?

On this page http://kimcolemanprojects.com/ I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site http://angela-moore.co.uk/
This is my html for the menu so far:
<div class="left" id="nav">
<ul id="menu">
<li id="light">
Lighting + Video
<ul style="display: none;">
<li>Django Django</li>
<li>Suntrap</li>
</ul>
</li>
<li id="photo">
Photograms
</li>
<li id="about">
<a class="active" href="about.html">About</a>
</li></ul>
</div><!--end nav-->
As you can see I only need it to work within one list item. I need help writing the Javascript for this.
So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video. The same can happen with each of the initial three links on the index page.
Quite Simple..
<script src="jquery.js"></script>
<div id="navigation">
<p>Menu</p>
<ul id="menu">
<li>Menu 1<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 2<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 3<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 4<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
This will be your HTML container etc, under this you will need your javascript to control that hiding and changing!! You can add some styling also if you feel artistic!
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropagation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if( $this.hasClass('page') ) parent.location = $this.attr('href');
if( $this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
This is a simple HTML Example and you can execute it how you like.

jquery collapsible menu help - almost there, but need 2 levels deep collapsible too!

I've taken the accordion menu from http://www.i-marco.nl/weblog/ and have customised it to what I need. One problem I have though is that I have a couple of submenu items which are also collapsible. The code I have works fine in terms of collapsing the menu, but I can't get it to retract this menu when the parent element is clicked. Can anyone see where i'm going wrong here?
Thanks in advance!
HTML snippet:
<ul class='menu collapsible' id='menu'>
<li id="home" class="selected expand top">
Home
</li>
<li id="about_the_school" class="top">
About the School<span>Click to expand</span>
<ul class='acitem'>
<li>
Welcome
</li>
</ul>
</li>
<li id="academic" class="top">
Academic<span>Click to expand</span>
<ul class='acitem'>
<li>
Curriculum & Exam System
</li>
<li>
Departments
<ul class='acitem menu collapsible'>
<li>
Art
</li>
<li>
Business Education
</li>
</ul>
</li>
<li>
Pupil Support
</li>
<li>
Careers
</li>
</ul>
</li>
</ul>
</ul>
JS:
jQuery.fn.initMenu = function(){
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(function(e){
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if (theElement.hasClass('acitem') && theElement.is(':visible')) {
if ($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal', function(){
$(this).prev().removeClass('active');
});
return false;
}
return false;
}
if (theElement.hasClass('acitem') && !theElement.is(':visible')) {
//custom - adds class at beginning of expansion
$(this).addClass('active');
$('.acitem:visible', parent).first().slideUp('normal', function(){
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function(){
$(this).prev().addClass('active');
});
return false;
}
});
});
};$(document).ready(function(){
$('.menu').initMenu();
});
On this section:
<a href="http://localhost//public_html/index.php/academic">Academic
<span>Click to expand</span>
</a>
<ul class='acitem'>
You need a collapsible class on that <ul> to get it to collapse as well, same the others, like this:
<ul class='acitem collapsible'>
You can see an updated/working demo with the fix here.

Categories