2 Replies - 842 Views - Last Post: 22 October 2015 - 03:53 PM

#1 trickstar34   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 109
  • Joined: 05-June 09

On Hover Animated Navbar

Posted 21 October 2015 - 06:56 PM

So I'm doing a complete overhaul of my business site and I wanted to add a little bedazzle to it seeing as I run a tech related company. So as a part of it I wanted more than a simple drop down menu, I have came across multiple web sites that have had animated effects and I decided to search for ways to create these navbars as I have no idea where to get started and found an example that works almost exactly as I wanted. So, like most web designers looking for a shortcut to a tedious task, I have been trying for the last 7 hours to cannibalize the code for the navbar and this one has me completely stumped. I made what I think is serious progress as I sifted through 2 layers of hiding the code through iframes using Chrome Developer Tools and got the HTML mark up and isolated the menu code into 3 possible script files, one being a sort of set-up file that implements the other 2 that are standard libraries. These standard libraries I have found to be requirejs and reactjs. When I realized it was more complicated then that I somehow came to the conclusion using Google searches of "hints" I found in the code it uses something called bootstrap. Apparently these are very widely used among professional designers (and I haven't used them myself ever so I have no idea where to begin) so I figured someone here would be able to explain what I'm trying to accomplish.

I believe what I am trying to do can be accomplished through bootstrap but I'm not sure (I taught myself how to make web sites, I am a CS major but my school doesn't offer classes on these specific things so I have to learn on my own). Maybe if someone could just tell what this type of effect is called and the standard library that can be used to do it it would be of great help.

I am trying to mimic what happens when you hover the mouse over any of the menu items on this site:
Wix - IT Solutions Template

Thanks in advance for any help.

Is This A Good Question/Topic? 0
  • +

Replies To: On Hover Animated Navbar

#2 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 16479
  • View blog
  • Posts: 65,313
  • Joined: 12-June 08

Re: On Hover Animated Navbar

Posted 22 October 2015 - 07:57 AM

Yeeaaaaaaah.. I won't pick apart a 'wix' site to isolate their specific code. Have you looked elsewhere? A cursory search of "animate fade menu button on hover" pulled up examples, pay for code, etc.

Examples:

https://bootstrapbay...itions-buttons/
http://www.cssauthor...-hover-effects/
http://tympanus.net/...tons-with-css3/
Was This Post Helpful? 1
  • +
  • -

#3 trickstar34   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 109
  • Joined: 05-June 09

Re: On Hover Animated Navbar

Posted 22 October 2015 - 03:53 PM

Thank you! Those links really help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1