XF 1.2 Logo slide out on hover

[Matthew Hawley]

So I would like to have this

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

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

 

[Shelley]

So I would like to have this

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

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

For the standard logo use a small image (background1) and on hover use an alternate logo design (background image 2) with transition & transform?

 

[Matthew Hawley]

For the standard logo use a small image (background1) and on hover use an alternate logo design (background image 2) with transition & transform?

The code icon is font awesome.

 

[Shelley]

The code icon is font awesome.

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.

 

[Matthew Hawley]

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.

You can.

.fa .fa-code { }

 

[Shelley]

You can.

.fa .fa-code { }

Then it's doable.

 

[Matthew Hawley]

So...do you have any code?

 

[Russ]

So...do you have any code?

http://www.w3schools.com/cssref/sel_hover.asp

 

[Matthew Hawley]

http://www.w3schools.com/cssref/sel_hover.asp

I know about that....That won't do what I am trying to achieve. Read the first post.

 

[Sheldon]

Learn.

 

[Matthew Hawley]

Learn.

I was planning on learning jquery on http://try.jquery.com/

 

[Matthew Hawley]

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.

 

[Matthew Hawley]

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.

 

[TPerry]

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 in case you didn't know .

 

[xIsabel38]

He wants the Nav Tabs to slide to the right on hover. Sorta like how this menu slides out when you click it.

 

[TPerry]

He wants to Nav Tabs to slide to the right on hover. Sorta like how this menu slides out when you click it.

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.

 

[xIsabel38]

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.

 

[TPerry]

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.

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

-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.

 

[xIsabel38]

I'm sure he would appreciate any help.

 

[TPerry]

I'm sure he would appreciate any help.

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.