Develop Reference

Link with a non-clickable background image

I have a menu that is formatted as an unordered list where the links (instead of the list items) have a background images that look like bullets. Due to the complexity of the CSS, I am not able to change this - the background images have to "belong" to the links, not to the list items.
My issue is that I would like to be able to have the links direct me to their respective pages, while also having the background images work to expand subcategories. This means that I need to somehow "separate" the background image from the link in order to reference it separately in my jQuery animation.
I would like to be able to do something like this:
$( document ).ready(function() {
$("#mainnav ul li").on("click", function(e) {
var $t = $(e.target);
if (!$t.is("a")) {
$(this).children("ul").slideToggle("slow", "linear");
return false;
}
});
});
because right now I am just using this and it doesn't work when I actually want to click on the links:
$("#mainnav ul li").click(function () {
$(this).children("ul").slideToggle();
return false;
});
I've attached a demo (though keep in mind that this not my actual code, it is just an example of how I would like this to work): http://jsfiddle.net/stamblerre/GzD3M/11/
I would like to be able to click on JUST the pencils to expand the subcategories so that I can use the text to click on the link and be directed to another page. Does anyone have any ideas on how to do this without associating the background-image with the list items rather than the links?
Thank you!!
With the help of many of the people on this thread, I've figured out my issue, here's the solution: http://jsfiddle.net/stamblerre/GzD3M/19/

You can check the clicked point to see if it's in the icon's region, actually we can just check the horizontal coordinates. We know that you set padding-left:15px for the a element, which means the icon's width is about 15px. If the clicked point is in the icon's region, we will let the click event propagate, otherwise stop it from propagating.
$('#mainnav ul li > a').click(function(e){
if(e.pageX - $(e.target).offset().left >= 15) {
e.preventDefault();
e.stopPropagation();
}
});
Demo.

You can send your background-image into a pseudo element and use pointer-events so it doesn't catch the click.
DEMO
#mainnav a {
margin-left: 20px;
background-repeat: no-repeat;
}
#mainnav a:before {
content: url(http://shapeshed.com/images/articles/pencil_icon.gif);
margin-left: -20px;
margin-right:5px;
pointer-events:none;/* this is where it happens if browser understands it */
vertical-align:middle;
}
#mainnav ul {
list-style-type: none;
}
#mainnav ul ul {
display: none;
}

just add next to the link another link with the pencil image inside with a unique class that will open the nested ul, something like this:
<ul>
<li>
<img src="pencil.jpg"> Click me
<ul style="display:none" class="nested_ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
jquery:
$(document).ready(function() {
$('.pencil').click(function(e) {
e.preventDefault();
$(this).parent().children(".nested_ul").slideToggle("slow", "linear");
});
});
it's 100% working!...good luck.

Keep submenu open on mouse out

A navigation menu I'm working on has a default CSS behavior (for those rare people who have JavaScript disabled). By default, the submenu is not displayed:
.main-navigation ul ul {
display:none;
}
On hover, the submenu is revealed:
.main-navigation ul li:hover > ul {
display:block;
}
For the JavaScript-minded majority, the menu is juiced up with the following jQuery snippet:
jQuery(document).ready(function($) {
/* cancel the default CSS hover behavior */
$('.main-navigation ul li').on('mouseover',function(){
$('.main-navigation ul li:hover > ul').css('display', 'none');
$(this).css('cursor', 'pointer');
});
/* toggle submenu display (if the submenu actually exists) */
$('.main-navigation ul li a').click(function() {
var li = $(this).closest('li');
if(li.has('ul')) li.find('ul').slideToggle(100);
});
});
This toggling works great, except it only works as long as the mouse cursor stays over the parent link. If the submenu is open, and the user happens to move the mouse away from the parent link, the submenu snaps shut.
Question: How do I keep the submenu open on mouse out, if it's been already open?
I tried adding something like this to my jQuery snippet:
$('.main-navigation ul li').on('mouseout',function(){
if ($('.main-navigation ul li ul').css('display') = 'none') {
$('.main-navigation ul li ul').css('display', 'none');
} else if ($('.main-navigation ul li ul').css('display') = 'block') {
$('.main-navigation ul li ul').css('display', 'block');
}
});
Not only it's mediocre coding, but it also actually doesn't work. ;-(
How should I fix this issue?
Thank you in advance for your suggestions!

i'm not sure the click issue yet (looking at it), but you don't need JavaScript to "disable" the CSS. Simply use <noscript> tags, like so:
<noscript>
<style type="text/css">
.exampleclass:hover { display: block; }
</style>
</noscript>
Or you could simply add a no-js class to you main menu element, then remove that class if JS is enabled at the very start of your JavaScript. Then write your "no-js css" to use .no-js + whatever children instead of the main class.
UPDATE
The problem is simple, when you use mouseover to cancel your "non-js" css, the menu is still being hidden everytime the user hovers over that submenu. In other words, you're not just removing the "no js" css, you're hiding it on every mouseover of .main-navigation ul li!
Simply follow something in my first suggestion, then remove the mouseover function completely and viola! problem solved!
I wrote a jsFiddle using your code to show how I might approach it.
jsFiddle
Code
$(function() {
// See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul`
// See Also in HTML where i added class `no-js` to `#site-navigation`
$(".no-js").removeClass("no-js");
$('.main-navigation ul li a').on("click", function(e) {
// first hide sibling sub-menus!
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
// no need for the if statement you had.
// jQuery is "smart", if it doesn't exist,
// then this function simply won't do anything!
$(this).closest('li').find('ul').slideToggle(100);
})
// and just to add a little for ya,
// the following will slideUp our submenu if user hovers away from MAIN MENU
.closest("ul").on("mouseleave", function(e) {
$(this).find("ul:visible").slideUp("slow");
});
})
Step-by-Step
Where you have manual script at between <script type="text/javascript"> tags, just before that noscript tage you threw in(which you can remove), replace all your JS with the following:
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery(".no-js").removeClass("no-js");
jQuery('.main-navigation ul li a').on("click", function(e) {
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
jQuery(this).closest('li').find('ul').slideToggle(100);
})
// If you find the menu hiding to fast, simply remove or comment out the next 3 lines
jQuery('.main-navigation ul').on("mouseleave", function(e) {
jQuery(this).find("ul:visible").slideUp("slow");
});
});
</script>
Remove the NOSCRIPT TAGS
In your CSS Code:
/* Find the area that was written as */
.main-navigation ul li:hover > ul {
display:block;
}
/* And replace it with the following */
.main-navigation.no-js ul li:hover > ul {
display:block;
}
Finally, look in your HTML, find the line written as <nav id="site-navigation" class="main-navigation" role="navigation"> and replace it with:
<nav id="site-navigation" class="main-navigation no-js" role="navigation">

so here is where IE did something neat, and jquery makes it browser agnostic so it's usable. mouseleave is 'mouseout' for the selected element and any of its subelements in IE, and jquery makes it work for the other browsers.
The mouseleave JavaScript event is proprietary to Internet Explorer.
Because of the event's general utility, jQuery simulates this event so
that it can be used regardless of browser. This event is sent to an
element when the mouse pointer leaves the element. Any HTML element
can receive this event.
mouseover - when someone mouses over the 'parent' ul li you want to show any sub uls
click - when someone clicks the parent ul li you want to hide or show any sub uls
mouseleave - IE specific that jquery makes browser agnostic for you.
leave the menus in a working state using <noscript> tags, and intend the javascript to go from there if it is available.
fiddle -- this fiddle is just to give you a start, as i didn't put in any of your css.
$(function () {
$("ul").on({"mouseover":function(event){
$(this).find("ul").show("slow");
}},"li.menu-item",null).on({"click":function(event){
$(this).find("ul").toggle("slow");
}},null,null).on({"mouseleave":function(event){
$(this).find("ul").hide("slow");
}},null,null);
});

Remove bootstrap dropdown caret

I'm working on my personal portfolio with bootstrap and the navigation dropdown has a caret as you can see at http://portfolio.tomvervoort.net.
The caret next to portfolio is ok but when you click on portfolio the dropdown also has a white caret on top. Does anyone knows how to remove this one?

Your caret is inside .dropdown-menu:after. So, write like this:
.navbar .dropdown-menu:after{
display:none;
}

Had the same problem in Rails (with twitter bootstrap rails gem), and the fix was slightly different.
.navbar .nav > li > .dropdown-menu::after,
.navbar .nav > li > .dropdown-menu::before {
display:none;
}

In the current version of TBS (v2.2.1), you also need to target the :before pseudo-selector like so:
.navbar .dropdown-menu:after, .navbar .dropdown-menu:before {
display:none;
}

Try doing this:
.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
display:none;
}
works fine for me. :-)

from git hub post
now we can directly use noCaret prop. this post is basically from DropDownButton but it works for NAvButton as well

After trying a few solutions and trying to follow the right class references, a quick fix, but nest it if you can so it doesn't affect other global a tags:
a::after {
content: none !important;
}

how can I prevent constant flickering when hovering over navigation link?

I have created a navigation where if you hover over a link you see the lower nav nav, if you click a link that lower nav menu stays active etc etc. Problem is that when I hover over top level link the hover event gets continually fired off causing serious flickering. Can anyone advise where I might be going wrong or can resolve this?
jsbin link here http://jsbin.com/ijofis/15

You can just use css for the hiding/unhiding:
li:hover ul {display:block !important;}​
Your code would be simplified.
/*
Task: The messed up GOMO navigation
*/
$(document).ready(function () {
var lowerNav = $('.lower', '#main-nav').hide();
$('#main-nav > li > a').on('click' , function(e){
if(!$(this).parent().hasClass('flag')){
$('#main-nav > li').removeClass('flag');
$('.lower').hide();
$(this).parent().addClass('flag');
$(this).next().show();
}
e.preventDefault();
});
});​
Here's an example: http://jsfiddle.net/nTwKH/
Alternatively, this line of CSS seems to fix your current code:
a {text-decoration:none;color:#343434; z-index:1; position: relative;}

Change hover to mouseenter so that your function is only executed when you enter the link.

Mouseleave jQuery event will remove the click effect

ok, I have a tabbed page and on click of a tab, I am showing a particular section and highlighting this tab to red background. Now I want to use the hover effect and on hover the tab should highlight to red background. It works but then when I mouseleave from the clicked tab, the background effect goes away.
In short, How do I highlight the tab to red background on hover for this fiddle

Why not use some pure css for this:
#nav ul li:hover { background-color: red; }
Updated Fiddle
EDIT
If you're trying to do this with jQuery (as a learning experience), I would define a new css class called hoverRed
.hoverRed { background-color: red; }
then use the hover function:
$("#nav ul li").hover(function() {
$(this).addClass("hoverRed");
}, function() {
$(this).removeClass("hoverRed");
});
The first function gets called when the hover begins, the second gets called when the hover ends (and the mouse leaves)
updated fiddle

Use this:
#nav ul li:hover
{
background: red;
}
Update:
Here is the fiddle for your mouseenter and mouseleave events. Here is the code that I added.
CSS
.lihover{background: red;}
jQuery
$("li").mouseenter(function(){
$(this).addClass("lihover");
}).mouseleave(function(){
$(this).removeClass("lihover");
});