Large clickable boxes as navigation with CSS and DOM
A client asked for a proof of concept how you could create large clickable boxes as a navigation. They wanted the whole box clickable, and if the link is a section link with child elements they wanted an indicator that there is more. The links without children should simply send the user to the site, the parent links should not follow the main link, but expand the children.
Check out the demo page: large boxes as links and feel free to get inspired. If wanted, I can write a quick explanation on how it is done and you could send sexier styles.
April 7th, 2006 at 4:43 pm
It looks great, but it is not very comfortable when you have habit to use middle mouse click to opens links in new tabs. I tried to made there some changes. Instead of calling onclick event, call mousedown
boxnav.addEvent(lis[i],’mousedown’,boxnav.navigate,false);
and in function navigate instead of window.location=target this
var DI=document.uniqueID;
if((DI&&event.button==1)||(!DI&&e.which==1)){
window.location=target;
}
if((DI&&event.button==4)||(!DI&&e.which==2)){
window.open(target,”,”);
}
But it seems me bit messy.
August 28th, 2007 at 2:46 am
Thank you for a nice example.
I tried to alter your demo so it suits my needs but I failed.
I need clickable boxes – deals (the whole box with a class=”deal”) to point users to the deal link specified in the first link of the same box.
I started to use jquery so there might be a way to write it in a few lines I just do not know how.
I tried this
$('*.deal').click(function() {
window.location = $('a:first', this).attr('href');
});
but it seems not working at all.
My markup look like the following:
<div class="deal">
<h1>< *a hre*f="#">Lorem ipum in a div</></h1>
<p>le "deal" element should be clickable pointing to the first link of the deal box.</p>
</div>
<ul id="deals">
<li class="deal">
<h2>< *a hre*f="#1">Lorem ipsum</></h2>
<ul>i>Feature 1</ul></li>
<li>/li>
</li></ul>
s="deal">
<h2>< *a hre*f="#2">Dolor sit amet</></h2>
<ul>i>Feature 1
<li>Feature 2</li>
</ul>
Could you possibly help me please?
Thank you
August 28th, 2007 at 12:22 pm
The markup in the previous comment is totally broken due to comment filters, but I hope you know what I mean.
September 5th, 2007 at 9:24 pm
Right, solution can be found here:
groups.google.com/group/jquery-en/browse_thread/thread/6bca9e6421a37f42
March 17th, 2008 at 4:30 am
Hi Chris,
I’m looking for a hover effet that will open a sub-menu.
In your example, you open a sub-menu but only when the “CSS showcases” link is clicked. I’d like to have the sub-menu of “CSS Beauty, Style Reactor, …” opened when “CSS showcases” is hovered (somewhere aside).
Do you know perhaps of such control?
Best regards,
Assaf
May 16th, 2009 at 9:28 pm
[...] Large clickable boxes as navigation with CSS and DOM [...]