My way of creating menus adds hyperlink css, how to remove? [Angular Material v. 0.10]

Question

My code currently works pretty much satisfactory, except for the fact that as soon as I add a ng-href, the standard hyperlink formatting (aka blue links) kicks in. How do I rid myself of this?

Screenshot link: https://i.stack.imgur.com/gsxfH.png

The HTML looks like this (I think the angular controllers and stuff aren't relevant here)

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            <md-toolbar class="md-tall md-hue-2">
                <span flex></span>
                <div layout="column" class="md-toolbar-tools-bottom inset">
                    <user-avatar></user-avatar>
                    <span></span>
                    <div>Name Namesson</div>
                    <div>name@name.com</div>
                </div>
            </md-toolbar>

            <md-list>
                <md-subheader>Navigation</md-subheader>
                <md-divider></md-divider>
                <md-list-item  ng-repeat="item in menu">
                    <a ng-class="{'active' : isSelected()}" ng-href="{{item.link}}">
                        <md-item-content md-ink-ripple layout="row" layout-align="start center">
                            <div class="inset">
                                <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
                            </div>
                            <div class="inset">
                                {{item.title}}
                            </div>
                        </md-item-content>
                    </a>
                </md-list-item>
                <md-subheader>Kontoinformation</md-subheader>
                <md-divider></md-divider>
                <md-list-item ng-repeat="item in admin">
                    <a ng-class="{'active' : isSelected()}" ng-href="{{item.link}}">
                        <md-item-content md-ink-ripple layout="row" layout-align="start center">
                            <div class="inset">
                                <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
                            </div>
                            <div class="inset">
                                {{item.title}}
                            </div>
                        </md-item-content>
                    </a>
                </md-list-item>
            </md-list>
        </md-sidenav>

Note: If there is a better way to make menus other than using md-list, do let me know. If my way is an OK way to make menus, I'd just like to know the cleanest / most ng-material way to get rid of the hyperlink css.

Thanks in advance!

PS. I know that better support for menus is on the way with angular-material, but I guess that's then and not now. :-)

score 0 · Accepted Answer · answered Jun 24 '15 at 12:38

0

From my chrome I can see the default styles for URL links are:

a:-webkit-any-link:active {
  color: -webkit-activelink;
}
a:-webkit-any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}
:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

Override those you don't want should be good.

answered Jun 24 '15 at 12:38

Icycool

7,099
1
25
33

Thanks for giving me this. I might resort to editing CSS directly, I was just hoping there'd be some directive or something that would do it instead. Maybe I'm thinking about it all wrong, but I want to minimize doing my own custom CSS if there is a proper directive for it. – William S Jun 24 '15 at 13:17
Are they external link? I find myself rarely using any more because I use ui-router and ui-sref pretty much works on any element. For ng-route you have the option to wrap it in a function and call it by ng-click. Not sure if this is the correct way, though, because is self-explanatory. – Icycool Jun 24 '15 at 14:37
I'm using route (the simple, old one). Maybe I should have a look at ui-router. – William S Jun 24 '15 at 14:44
could you provide me an example where you wrap a route/href inside a function followed by using ng-click? Do you mean like this answer? http://stackoverflow.com/a/14202514/2136136 – William S Jun 29 '15 at 11:29
@William S Do you mean using ng-route? or ui-router? I'm not very familiar with ng-route, so might get better answers by posting a new question, or you can search and figure out yourself (kudos for this!) – Icycool Jun 29 '15 at 12:41

My way of creating menus adds hyperlink css, how to remove? [Angular Material v. 0.10]

1 Answers1