Simple Navigation Menu in AngularJS

I struggled for about half a day trying to get some sort of menu system in AngularJS working. It seems very trivial, and in jQuery it is a breeze, but with angularJS it took a bit of searching and fiddling about and a bit of stackoverflow love .

I wanted something like this :

temp

I have a number of fixed DIVs (or list items. It doesn’t really matter).

On a mouseOver event the style changes via adding and removal of a class. In the same way, a click should change the style to a third style. The CSS looks like this :

 

This is what the HTML looks like. Note the event handlers for click and mouseOver.

This is what the Javascript looks like :

 

You can see the JSFiddle here :

https://jsfiddle.net/zxjg3tpo/10/

 

 

 

 

 

 

 

 

 

 


Posted in angularjs, JavaScript | Tagged , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE