Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 19
  1. #1
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Hey Guys,

    I recently came across Michael Heald's site, http://www.fullyillustrated.com and I was intrigued by the Navigation (top right) as I hadn't seen it done in this way before.

    I have tried to work out how it is done but am at a loss - can anybody take a look and see if you can work out how it is coded.

    The thing that gets me is that it uses 1 .gif image that has 2 sets of text on it - one is the (unactive link) darker colour and the other is the (hover over) lighter colour.

    Am truly baffled, yet intrigued!

    Any insights greatly appreciated.
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I didn't study it too long, but 1 image with two parts on it leads me to believe
    they slide the image (by position) and hide the part that doesn't show.

    This was the best example I could find:
    http://www.cssbake.com/cookbook/overlap-that-menu/

    Not sure if he used the same techniques, but I think it's similar.



    .


  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ooooooooo. shiny!!! and nice.

    while($get_it !== true){ continue; }

  5. #4
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Not really that helpful Dorky...
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    That's gotta be javascript the way the hovers slide.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I have the best solution ....
    Email, or call the site owner and ask him/her how they did it.

    Most people (webmasters, programmers, artists) are very friendly and helpful.
    They will probably point you directly to the source of what they used.

    In any event, it doesn't hurt to ask.


  8. #7
    Junior Member memyselfandi's Avatar
    Join Date
    Mar 2010
    Location
    England
    Posts
    7
    Member #
    21504
    Im just learning but it just looks like buttons you make on macromedia but cleverly displayed but hey dont count on me its justmy best quess. :alien:

  9. #8
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Do a view source..come on....
    <script type="text/javascript" src="http://www.fullyillustrated.com/wp-content/themes/fullyIllustrated/_include/js/jquery.js"> </script>
    <script type="text/javascript" src="http://www.fullyillustrated.com/wp-content/themes/fullyIllustrated/_include/js/jq-easing.js"> </script>
    <script type="text/javascript" src="http://www.fullyillustrated.com/wp-content/themes/fullyIllustrated/_include/js/main.js"> </script>

    jquery.js -> jquery javascript library
    jquery easing plugin -> may be using this for other animations and smoother animations
    main.js -> his compact js file (you wont be able to pull anything from it other than hes using the 'slide' animation)

    http://docs.jquery.com/UI/Effects/Slide
    -> Jquery slip n slide :O

    $("#menu a").hover(function(){
    $(this).slide('left', 'slide_value_integer', 'show/hide');
    });

  10. #9
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    here you go:

    animate() method.
    hes not using easing

    attached is a sample project....i just did it with links sliding, obviously youd be adjusting the background-position property on mousein/mouseout instead of opacity, but ya.
    enjoy

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Smarty...


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com