1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Logo slide out on hover

Discussion in 'Styling and Customization Questions' started by Matthew Hawley, Dec 13, 2013.

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    So I would like to have this

    [​IMG]

    Then the logo come out to the right with animation and the navtabs move aswell.

    [​IMG]

    I was thinking of using JQuery but I don't know much about JQuery. Any suggestions? :)
     
  2. Shelley

    Shelley Well-Known Member

    For the standard logo use a small image (background1) and on hover use an alternate logo design (background image 2) with transition & transform?
     
    Wuebit likes this.
  3. Matthew Hawley

    Matthew Hawley Well-Known Member

    The code icon is font awesome.
     
  4. Shelley

    Shelley Well-Known Member

    I haven't yet dealt with font awesome so not 100% sure but couldn't you still apply css to it in your EXTRA.css? If so, it'll be possible.
     
  5. Matthew Hawley

    Matthew Hawley Well-Known Member

    You can.
    Code:
    .fa .fa-code { }
     
  6. Shelley

    Shelley Well-Known Member

    Then it's doable.
     
  7. Matthew Hawley

    Matthew Hawley Well-Known Member

    So...do you have any code?
     
  8. Russ

    Russ Well-Known Member

  9. Matthew Hawley

    Matthew Hawley Well-Known Member

  10. Sheldon

    Sheldon Well-Known Member

    Learn.
     
  11. Matthew Hawley

    Matthew Hawley Well-Known Member

  12. Matthew Hawley

    Matthew Hawley Well-Known Member

    I'm trying to use animate.css https://daneden.me/animate/ But I can't figure out how to make something appear when you hover over a different element.
     
  13. Matthew Hawley

    Matthew Hawley Well-Known Member

    I got it working, except for the navtabs moving with it.

    http://www.screenr.com/ANVH

    When I get the navtabs working, I will post the code incase someone wants to use it. :)

    If anyone has any suggestions for the navtabs plz tell me. :)
     
    Last edited: Dec 14, 2013
    wickedstangs likes this.
  14. Tracy Perry

    Tracy Perry Well-Known Member

    So you aren't wanting the navtabs to move... your'e wanting the logo to go over them?
    Or, for clarification - you want the navtabs spaced far enough to the right so that when it expands it fills the empty space?

    Most of us aren't Carnac.jpg in case you didn't know :ROFLMAO:.
     
  15. xIsabel38

    xIsabel38 Well-Known Member

    He wants the Nav Tabs to slide to the right on hover. Sorta like how this menu slides out when you click it.
     
    Last edited: Dec 14, 2013
  16. Tracy Perry

    Tracy Perry Well-Known Member

    Kinda hard to tell with no sound from his example. It looks like it does slide to the right when he hovers (or clicks - can't really tell) on it. Guess I'm not fully understanding what exactly he wants. dunno.gif
     
  17. xIsabel38

    xIsabel38 Well-Known Member

    To me, it looks like it just instantly replaces itself in the new location and not really flows or slides out. I believe he wants that flow as in the menu I linked above. He wants it via hover and not via click which is the opposite way I choose to go for my linked menu.
     
  18. Tracy Perry

    Tracy Perry Well-Known Member

    If he's doing it via CSS and based upon hover he should be able to use the code to do it (I don't get real heavy into it but a lot of examples use
    Code:
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
    
    to do something similar.

    That example that I pulled also uses some simple .js for it.
     
    wickedstangs and xIsabel38 like this.
  19. xIsabel38

    xIsabel38 Well-Known Member

    I'm sure he would appreciate any help.
     
  20. Tracy Perry

    Tracy Perry Well-Known Member

    I've got my plate full right now helping 2 people with their VPS's and then EOY stuff for 3 clients. That's why I'm still up at 2:56AM central time working on packaging up a VM console export to ship to another IT provider to move over to a dedicated server for it before 12/31 rolls around (it has to be up and running by then).
    I'm more of the hardware geek than the styling geek anyways. :p
     
    Wuebit likes this.

Share This Page