1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Trying to get something similar to...

Discussion in 'HTML & Website Design' started by aurelsfr, Dec 10, 2013.

  1. #1
    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
    aurelsfr, Dec 10, 2013 IP
  2. Darkhodge

    Darkhodge Well-Known Member Premium Member

    Messages:
    2,112
    Likes Received:
    76
    Best Answers:
    1
    Trophy Points:
    185
    #2
    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:

    HTML:
    1.  
    2. <ul id="circlemenu" class="list">
    3.     <li class="blog"><a href="/blog/" class="ir">Blog</a></li>
    4.     <li class="about"><a href="/about/" class="ir">About</a></li>
    5.     <li class="galleries"><a href="/galleries/" class="ir">Galleries</a></li>
    6.     <li class="photobox"><a href="/photobox/" class="ir">Photobox</a></li>
    7.     <li class="referrals"><a href="/referrals/" class="ir">Referrals</a></li>
    8.     <li class="workshops"><a href="/workshops/" class="ir">Workshops</a></li>
    9.     <li class="contact"><a href="/contact/" class="ir">Contact</a></li>
    10.     <li class="rockingmoose"><a href="/rockingmoose/" class="ir">Rocking Moose</a></li>
    11. </ul>
    12.  
    Code (Text):
    1.  
    2. #home #circlemenu {
    3.     width: 540px;
    4.     height: 540px;
    5.     background: url(../images/home.nav.sprite.png) no-repeat left top;
    6.     position: relative;
    7.     margin: 130px auto 0;
    8.     opacity: .8;
    9. }
    10.  
    The 2 important bits to note are:
    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:

    HTML:
    1.  
    2. <ul id="circlemenu" class="list about">
    3.     ...
    4. </ul>
    5.  
    Which then allows the following CSS to be applied:

    Code (Text):
    1.  
    2. #home #circlemenu.about {
    3.     background-position: left -1080px;
    4. }
    5.  
    I hope I explained that clearly, if not don't hesitate to give me a shout!

    Hodge
    Darkhodge, Dec 10, 2013 IP
    sarahk likes this.
  3. SystemOAD

    SystemOAD Well-Known Member

    Messages:
    550
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    195
    Digital Goods:
    1
    #3
    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 :)
    SystemOAD, Dec 10, 2013 IP
  4. aurelsfr

    aurelsfr Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    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 !
    aurelsfr, Dec 10, 2013 IP
  5. SystemOAD

    SystemOAD Well-Known Member

    Messages:
    550
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    195
    Digital Goods:
    1
    #5
    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 :)
    SystemOAD, Dec 11, 2013 IP
  6. Darkhodge

    Darkhodge Well-Known Member Premium Member

    Messages:
    2,112
    Likes Received:
    76
    Best Answers:
    1
    Trophy Points:
    185
    #6
    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!
    Darkhodge, Dec 11, 2013 IP
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #7
    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:

    Code (Text):
    1. <ul id="circleMenu">
    2.     <li class="blog"><a href="/blog/">Blog</a></li>
    3.     <li class="about"><a href="/about/">About</a></li>
    4.     <li class="galleries"><a href="/galleries/">Galleries</a></li>
    5.     <li class="photobox"><a href="/photobox/">Photobox</a></li>
    6.     <li class="referrals"><a href="/referrals/">Referrals</a></li>
    7.     <li class="workshops"><a href="/workshops/">Workshops</a></li>
    8.     <li class="contact"><a href="/contact/">Contact</a></li>
    9.     <li class="rockingmoose"><a href="/rockingmoose/">Rocking Moose</a></li>
    10. </ul>
    With CSS something like this:
    Code (Text):
    1. #circleMenu {
    2.     list-style:none;
    3.     position:relative;
    4.     width:12em;
    5.     height:38em;
    6.     margin:0 auto;
    7. }
    8.  
    9. #circleMenu li {
    10.     display:inline;
    11.     /*
    12.         Basically stripping formatting off these to avoid headaches in
    13.         certain browsers.
    14.     */
    15. }
    16.  
    17. #circleMenu a {
    18.     position:absolute;
    19.     width:12em;
    20.     text-align:center;
    21.     line-height:2em;
    22.     padding:5em 0;
    23.     font-weight:bold;
    24.     color:#000;
    25.     text-decoration:none;
    26.     -webkit-border-radius:12em;
    27.     border-radius:12em;
    28. }
    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!
    Last edited: Dec 11, 2013
    deathshadow, Dec 11, 2013 IP
    Nigel Lew and kk5st like this.
  8. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #8
    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!
    deathshadow, Dec 11, 2013 IP
  9. Darkhodge

    Darkhodge Well-Known Member Premium Member

    Messages:
    2,112
    Likes Received:
    76
    Best Answers:
    1
    Trophy Points:
    185
    #9
    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.
    Darkhodge, Dec 11, 2013 IP
  10. aurelsfr

    aurelsfr Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #10
    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, Dec 12, 2013 IP
  11. Darkhodge

    Darkhodge Well-Known Member Premium Member

    Messages:
    2,112
    Likes Received:
    76
    Best Answers:
    1
    Trophy Points:
    185
    #11
    @aurelsfr As I said, you don't need to use jQuery. You can do the same with straight up JS.
    Darkhodge, Dec 12, 2013 IP
  12. aurelsfr

    aurelsfr Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #12
    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-)
    aurelsfr, Dec 14, 2013 IP
  13. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #13
    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!
    deathshadow, Dec 15, 2013 IP
    Strider64 likes this.
  14. aurelsfr

    aurelsfr Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #14
    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...
    aurelsfr, Dec 17, 2013 IP
  15. aurelsfr

    aurelsfr Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #15
    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 ?
    aurelsfr, Dec 17, 2013 IP
  16. Darkhodge

    Darkhodge Well-Known Member Premium Member

    Messages:
    2,112
    Likes Received:
    76
    Best Answers:
    1
    Trophy Points:
    185
    #16
    Do you have a link to the test page you're speaking of?
    Darkhodge, Dec 18, 2013 IP
  17. aurelsfr

    aurelsfr Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #17
    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...
    aurelsfr, Dec 18, 2013 IP
  18. ThinkingManCreative

    ThinkingManCreative Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #18
    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.
    ThinkingManCreative, Jan 31, 2014 IP