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 :


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 :











Posted in angularjs, JavaScript | Tagged , | 1 Comment

One Response to Simple Navigation Menu in AngularJS

  1. pattern says:

    Texas Instruments (TI) – Analog, Embedded Processing …

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="">