Nav Bar Question (CSS or JS?)

[modernrelic]

Hi all. First time posting, so I hope this is in the right place.

I'm working on a site (single page layout), and I'm trying to create a single-line horizontal menu, with no sub-items. I'd like to make each anchor link play a sound AND swap images onClick. Is this possible to do using pure CSS? I'd prefer not to use JS, but am willing if that is the only/best way.

I've made an unsuccessful attempt using JS, but I don't know it very well, and I am stumped. If anyone wants to have a look at that attempt, there is a jsFiddle here: http://jsfiddle.net/tBpMV/2/

The sound and image swap work fine, but clicking the links does not take you anywhere. There is a small JS script on the bottom of the html that controls the image swap. If I delete that code, the links begin working, but then there's no image swap. I've tried everything I can think of to get it working, but no joy.

So anyway, I'm hoping there's a way to accomplish this without the JS. I'd sure appreciate any advice/input.

Thanks in advance!

[Pamela1991]

Hi all. First time posting, so I hope this is in the right place.

I'm working on a site (single page layout), and I'm trying to create a single-line horizontal menu, with no sub-items. I'd like to make each anchor link play a sound AND swap images onClick. Is this possible to do using pure CSS? I'd prefer not to use JS, but am willing if that is the only/best way.

I've made an unsuccessful attempt using JS, but I don't know it very well, and I am stumped. If anyone wants to have a look at that attempt, there is a jsFiddle here: http://jsfiddle.net/tBpMV/2/

The sound and image swap work fine, but clicking the links does not take you anywhere. There is a small JS script on the bottom of the html that controls the image swap. If I delete that code, the links begin working, but then there's no image swap. I've tried everything I can think of to get it working, but no joy.

So anyway, I'm hoping there's a way to accomplish this without the JS. I'd sure appreciate any advice/input.

Thanks in advance!

Hey,

I'm quite a beginner in CSS, but I just now browsed around the web trying to find a way to do this. Here is a fiddle I tried, but it didn't quite work. The onclick works, but I can't quite get the audio.

For more about "onclick" events, you can check this out.

I'm not sure if the following HTML5 will be of aid in terms of audio (taken from here.)?

<audio src="http://modernrelic.com/mmn/amp-on-off.mp3" controls preload="auto" autobuffer></audio>

Right now when I was Googling, different people around the web said this is impossible with CSS, but I don't know about that as I'm quite new with CSS. Perhaps one of the CSS gurus here can confirm whether or not this is possible with CSS or a mixture of CSS and something other than Javascript?

[modernrelic]

Thanks, Pamela! At this point, I'm inclined to agree that CSS alone won't work. What I still can't figure out is why using JS works for the audio and image swap, but prevents the anchor links from working.

I probably should have posted that question instead. I was thinking the two bits of JS I'm currently using were conflicting in some way. But when I remove the bit that runs the audio, the links are still borked. So it seems to be tied to that one small bit of code at the bottom of my html. Frustrating.

[logic_earth]

There you are.

$('ul.navigation li a').click(
function(e) {
e.preventDefault(); // prevent the default action

[dresden_phoenix]

1) CSS wont work, because even if it allowed you to bring in the sound file, it wont START playing it. Thats just not what the language is for. Even when you embed a video ( or in this case sound) it's usually a flash or js player behind it.
1.a) Yeah, HTML5 provisions for this but not all browser support HTML5 that wouldn't be a REAL solution

As far as your .js is concerned ... have you checked for a "return false;" Returning false aborts the default action (going to the link in this case).

ADDENDUM:
LogicEarth actually took the time to look at the js fiddle and still beat me to the punch..hahah

[modernrelic]

Wow, am I embarrassed! The line was commented for me and everything and I still didn't see it! Sheesh!

Logic Earth, I bow down to you. You've saved the day!

Many many thanks! And Dresden, thanks for taking the time to provide your input as well!

Now, how do I get this paper bag off my head?