Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    69
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Creating a custom sub nav from images

    So I have scoured the internet in search of a script of tutorial that might help me achieve this, but so far all examples of sub nav hover menus are all templated. I have a navigation that includes images in random positions on the top of the page:



    2 of the items have sub items. For instance when you hover over consultations I want 2 items to drop (kind of a float) transition underneath



    Has anyone who reads this seen a script/tutorial that will put me in the right direction?

    Thanks

    Eddie

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,787
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    I haven’t seen a script/tutorial that does that but I would be able to (re-)create that from scratch. That’s all possible with CSS 3 nowadays (for older browsers JS is needed, though). I feel inclined to have a shot at it but this has to wait because I’ve got to run out shortly.

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Michigan
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would imagine that something like this for reference would help, as it has helped me starting out with all of my CSS3 dropdown menus.

    You can apply some simple transitions and delays on the hover of the select leaves in your example. I also believe that you can play around with the indent of the drowpdown in this tutorial as I remember. (I haven't looked at it for some time)

    Hope this helps.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,457
    Thanks
    23
    Thanked 631 Times in 630 Posts
    As a shot in the dark.
    Sub menu is in a div with image mapping
    http://www.w3schools.com/tags/tag_map.asp
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    69
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have investigated trying to use a CSS3 standard drop down menu and editing accordingly but because I have custom images for each sub nav and the fact that each image is not part of any list, I'm not sure this would work with what I am attempting.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •