The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Animated menu bar

View previous topic View next topic Go down

Solved Animated menu bar

Post by Scarlet D. on September 12th 2015, 2:18 pm

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Opera, Other
Who the problem concerns : All members
Forum link : http://onepiecegr.forum-pro.org/

Description of problem

Hello. As the title says I would like someone to help me find out how to make animated navbars (menu bars). I want every button of my navbar to become bigger or glow when someone mouseover it, any guide?

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Animated menu bar

Post by Ange Tuteur on September 12th 2015, 2:46 pm

Hi @Heartsealed,

Since you're using images I wouldn't recommend a shadow because that wont render well. However, you can make the images change size on hover. Try adding the following rule to your stylesheet :
Display > Colors > CSS stylesheet
Code:
a.mainmenu img {
  width:100px;
  transition:300ms;
}

a.mainmenu img:hover {
  width:125px;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Animated menu bar

Post by Scarlet D. on September 12th 2015, 2:55 pm

It works nearly perfect, only problem is that the forum is shaking when I mouseover on menu (maybe from size differences) is there anything you can do for this?

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Animated menu bar

Post by Ange Tuteur on September 12th 2015, 3:10 pm

Setting a default or minimum height should work. Try adding the following rule to your stylesheet.
Code:
#page-header .navbar .linklist {
  min-height:60px;
}

If necessary you can increase the amount. ( 60px )

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Animated menu bar

Post by Scarlet D. on September 12th 2015, 3:16 pm

thanks a lot Ange, it works perfect ! ^^

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Animated menu bar

Post by Ange Tuteur on September 12th 2015, 3:47 pm

You're welcome ^^

Topic archived

Have a nice weekend. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum