Trying to get something similar to...

Hi all, I'm quite new here, designing for a few years now, mostly on WP websites, and today I've been asked for a menu like the circles one on http://www.heandshephoto.com , with the rollover effect. I already created the .png with all the items, exactly like the exemple, a 4800px height image with 9 "circle flowers" but now I'm stuck about how to proceed...
I've never used that kind of menu, I guess it's a matter of CSS sprite and a list, or something like that, and I didn't find the solution neither on Google nor in Photoshop... Can you guys help me please ?

Thanks

 

I had a quick look using the developer tools on Chrome.

It looks like he's got a list with the id "circlemenu" with the HTML & CSS below:

<ul id="circlemenu" class="list">
    <li class="blog"><a href="/blog/" class="ir">Blog</a></li>
    <li class="about"><a href="/about/" class="ir">About</a></li>
    <li class="galleries"><a href="/galleries/" class="ir">Galleries</a></li>
    <li class="photobox"><a href="/photobox/" class="ir">Photobox</a></li>
    <li class="referrals"><a href="/referrals/" class="ir">Referrals</a></li>
    <li class="workshops"><a href="/workshops/" class="ir">Workshops</a></li>
    <li class="contact"><a href="/contact/" class="ir">Contact</a></li>
    <li class="rockingmoose"><a href="/rockingmoose/" class="ir">Rocking Moose</a></li>
</ul>

HTML:

#home #circlemenu {
    width: 540px;
    height: 540px;
    background: url(../images/home.nav.sprite.png) no-repeat left top;
    position: relative;
    margin: 130px auto 0;
    opacity: .8;
}

Code (markup):

The 2 important bits to note are:

• The <ul> has a background image sprite assigned to it, which can be seen here - http://www.heandshephoto.com/wp-content/themes/heandshe3/lib/images/home.nav.sprite.png
• It's positioned relatively, which is important as the developer has positioned each of the links absolutely within the list.

From what I can see, it looks like he's got a bit of JavaScript that fires when someone hovers over each of the links. It'll then grab the class of the parent <li> and add that to #circlemenu. They then use this to position the background image sprite to show the hover over effect they need.

For example, if they hover over "About", #circlemenu becomes:

<ul id="circlemenu" class="list about">
    ...
</ul>

HTML:

Which then allows the following CSS to be applied:

#home #circlemenu.about {
    background-position: left -1080px;
}

Code (markup):

I hope I explained that clearly, if not don't hesitate to give me a shout!

Hodge

 

They are using an image map, this is the best site for doing it IMHO http://www.image-maps.com/

Simply upload your image and follow the simple on screen instructions to add your links in the right places and then copy paste the given code to your site

 

Thanks guys for your replies
@Darkhodge I think you found the right lines, however, I'm such a noob I can't figure out how to get it... I made my background image exactly like their's, but that JavaScript you're talking about is freaking me out... I'm gonna read your reply a dozen times to understand it (plus I'm French, some of my technical English skills aren't that good at 7:00AM...)
@SystemOAD I didn't think about image mapping ! I uploaded my 4000px height image on the site but I'm quite lost when it comes to create it... Maybe I should try to find a solution to proceed this mapping on Fireworks or Photoshop ?

Thank you guys for helping me and finding these solutions. I'll keep you in touch !

 

Send me your image and I will do it for you, its a 5min job on that site once you read it and know exactly what to do

 

I'm not sure if this'll help clarify it, but I've coded a fresh example here - http://jsfiddle.net/9nyXY/

It'll show you the HTML, CSS and jQuery separately, so hopefully it'll help clarify!

For my example, I created a menu that's 400x400px. The sprite I created can be seen here - http://s10.postimg.org/pmbimjm5l/Menu_2.png

Let me know if you still have questions!

 

First up, just LOVE that original code with it's stupid malfing classes for nothing; perfectly good ID on the parent, what's it need class="list" for, and if EVERY child is getting the same class, NONE of them need classes. Seriously, WHY THE **** do people write code that way?!?

Of course, this is EXACTLY the type of artsy fartsy design asshattery that really has no business on a website -- sucking down so much space for nothing and just getting between the user and what's actually IMPORTANT, the content. Any client who asked me to do that would get a rather stern talking to about accessibility, content delivery, and calling an orthodontist to aid in dislodging their head from 1997's backside. Crap like this results in a site that is effectively just a splash page -- and splash pages have been on the "don't do it" lists for over a decade now.

That said IF I were to try and implement something like that, in this day and age with CSS3 in the mix I wouldn't even use images for that. IE8/lower might get a slightly degraded appearance, but I'd approach it thus:

<ul id="circleMenu">
	<li class="blog"><a href="/blog/">Blog</a></li>
	<li class="about"><a href="/about/">About</a></li>
	<li class="galleries"><a href="/galleries/">Galleries</a></li>
	<li class="photobox"><a href="/photobox/">Photobox</a></li>
	<li class="referrals"><a href="/referrals/">Referrals</a></li>
	<li class="workshops"><a href="/workshops/">Workshops</a></li>
	<li class="contact"><a href="/contact/">Contact</a></li>
	<li class="rockingmoose"><a href="/rockingmoose/">Rocking Moose</a></li>
</ul>

Code (markup):

With CSS something like this:

#circleMenu {
	list-style:none;
	position:relative;
	width:12em;
	height:38em;
	margin:0 auto;
}

#circleMenu li {
	display:inline;
	/*
		Basically stripping formatting off these to avoid headaches in
		certain browsers. 
	*/
}

#circleMenu a {
	position:absolute;
	width:12em;
	text-align:center;
	line-height:2em;
	padding:5em 0;
	font-weight:bold;
	color:#000;
	text-decoration:none;
	-webkit-border-radius:12em;
	border-radius:12em;
}

Code (markup):

Absolute positioning the child elements as needed... remembering that 45 degrees is 70.71%. That's sin(45deg) or sqrt(2)/2 -- so for the 12em in my example 8.5em is 'close enough'.

I tossed together a live demo here:
http://www.cutcodedown.com/for_others/aurelsfr/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/aurelsfr/

Is wide open for easy access to the gooey bits and pieces.

Tested working perfect in IE10+, the latest each of Safari, Chrome, Opera and FF, as well as Opera 12. (since a lot of Opera users are sticking with 12.x given the steaming pile of crippled crap 15+ is). In IE 9 it loses the transition animations (oh noes, not that), and in IE8/earlier they are square instead of round and overlap, but it's still a functional menu. I'd consider putting the round menu version inside a media query (since IE8/earlier doesn't know media queries) and designing a better fallback for those browsers. You could also try using DX filters, but the IE9 filter vs. property issue would make that a PITA... one could also use extra SPAN inside the anchor (or LI) to position an actual opacity -- but really all those 'fixes' for IE8/lower really aren't worth the effort in my book anymore. Anyone using 8/lower should be thankful the menu works at all!

In any case, look ma, no images!

 

Oh, and don't take this the wrong way, but...

WHAT THE **** BLUE BLAZES DOES THAT NEED THAT FAT BLOATED IDIOTIC BS KNOWN AS JQUERY FOR?!?

Sorry, but that treads really far into pet peeve territory... some serious whiskey tango foxtrot right there. Everything wrong with jQuery bull, can be found right there. POSTER CHILD for what I mean when I say "scripting for nothing" and "scripting doing CSS' job".

But of course, 99% of the time someone says "use jQuery", you probably shouldn't... It is at best a crutch for inept developers, at worst encouraging crap that has no malfing business on websites in the first place!

 

First of all, I do agree that using a library like jQuery in the above example is overkill and it would be better if you use straight up JS.

Saying that however it's something I feel comfortable using and believe it's suitable for the purpose of illustration. I think it's up to the OP to optimise it as they see fit.

Secondly using JS at all in this example is something I would try to avoid, but I was showing the OP how that particular website developer approached it. Personally I would absolute position each individual link with background image sprites, which are then brought forward and highlighted on :hover, i.e. A pure CSS solution but as I said I was just trying to show that particular website's approach.

 

Hey guys, thanks all for the replies. Don't fight for me ^^
@SystemOAD I'm sending you the pic via FB
@Darkhodge jQuery ? Oh my... I didn't think that would require jQuery action :/
@deathshadow Your solution is good, but I can't use CSS3 made shapes, cause the menu image is made of different graphic fonts... and to be honest, I don't think my friend would give a sh** about accessibility...

 

@aurelsfr As I said, you don't need to use jQuery. You can do the same with straight up JS.

 

Hi all, @Darkhodge I followed your example on JSFiddle, works perfectly. Just one single question : where do I put the JS code ??? (I'm running the script on WP - yeah, I know-)

 

So use webfonts or put the graphics in instead of the text (either as IMG or as image replacement). Would still work.

Well, to be honest and brutally frank, they probably shouldn't even be allowed to have a website at that point... though their even wanting this type of stupid massive space-wasting menu crap told us that already!

 

Hi guys, it's me again.
@deathshadow I guess you're right regarding webfonts and massive menu, I do agree with your point of view. But in this specific case, that's just not the point, no offense

I adapted @Darkhodge JSFiddle script (you can see it here http://jsfiddle.net/aurelsfr/Wqjd7/5/ ) but integration isn't that easy for me... I pasted the HTML code within a WP page (please don't laugh, not my choice), the CSS in a custom .css field, and the javascript in a script.js file. So, I guess it should work. But it does not. Hum, I guess I will stay noob in websites for a loooooong time...

 

Ok guys, here are the news : I think my problem is the jquery thing... @Darkhodge you told about straight up js possibility. I wonder if using simple js wouldn't be easier for me to integrate this... What do you think ? What js should I use ?

 

Do you have a link to the test page you're speaking of?

 

The whole website is hidden by some "coming soon" plugin... I may have found another way to proceed, using a plugin I previously used for a clickable svg map...

 

Okay So THANK THE GODS For this form... My client wants to do that same type of menu on a WP theme, They like the scroll effect. I have tried to email the creator of the theme to ask them if they would like to sell a license of it but have not gotten a reply (in 3 weeks). So my question is.. My client wants to use the same theme style on their website, the want to use images (tree leaves) instead of circles.

1. How in the heck does my CSS noob self do this with leaves.
2. Is there anyone out there who would like to replicate the base theme and get paid!

3. Thank you all for this thread its a life saver regardless.