# Href does not working in side menus

**URL:** <https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847>\
**Category:** ionic-v1\
**Created:** [June 26, 2016, 6:27pm UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847 "2016-06-26T18:27:59Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 26, 2016, 6:27pm UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/1 "2016-06-26T18:27:59Z")

</div>

Hello,please i have problm with the list of side menu,the links not working,but it was working last day ! (when i click in item ,it not working)  
this my code :

```
  <ion-pane ion-side-menu-content >
    <ion-nav-bar class="bar-dark" animation="nav-title-slide-ios7">
      <ion-nav-back-button> </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left" >
    
    <ion-content class="full-page-bckg-menu">
      <ion-list >
        <a class="item" href="#/tab.home" menu-close>Home</a>
        <ion-item ui-sref="tab.profil" ><i class="icon ion-android-person "></i> Mon espace
        </ion-item>
        <ion-item href="#/tab/airport"><i class="icon ion-android-plane "></i> Aéroports
         </ion-item>
        <ion-item href="#/tab/infos" ><i class="icon ion-ios-list "></i> Devices
         </ion-item>

        
    <ion-item href="#/tab/exlpore" menu-close><i class="icon ion-ios-heart "></i> Exlpore</ion-item>
    <ion-item href="#/tab/exlpore" menu-close><i class="icon ion-ios-heart "></i> About </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>
  
</ion-side-menus>
```

---

<div class="post-metadata">

**Author:** ![rberthome](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rberthome/32/99452_2.png) [@rberthome](https://forum.ionicframework.com/u/rberthome)\
**Post date:** [June 27, 2016, 9:20am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/2 "2016-06-27T09:20:24Z")

</div>

Hello,

Use the states’ names you put with $stateProvider in your app.js and use ui-sref.

I made an example : [http://play.ionic.io/app/ecf25e5358b3](http://play.ionic.io/app/ecf25e5358b3)

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 9:24am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/3 "2016-06-27T09:24:12Z")

</div>

Hi,yes i have used the same states’name in $state provider,  
it’s working in the ohter pages ,but only in this page (side-menu) !,and it was working normally ☹

---

<div class="post-metadata">

**Author:** ![rberthome](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rberthome/32/99452_2.png) [@rberthome](https://forum.ionicframework.com/u/rberthome)\
**Post date:** [June 27, 2016, 9:28am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/4 "2016-06-27T09:28:42Z")

</div>

I don’t get it. What’s your purpose ? What do you mean by “**but only in this page (side-menu)**”

Can you do a codeopen or [play.ionic.io](http://play.ionic.io) to reproduce this issue ?

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 9:35am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/5 "2016-06-27T09:35:14Z")

</div>

this is ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/5/a58d4fa27b85190072e60813664e50363427041f.png)  
when i click in some item it not working ,? for example "Mon espace " ,i want to go to this page but it’s not clickable ,and the ui-sref ou href are correct !  
it’a a long project ,how can i do a codepen or [paly.ionic.io](http://paly.ionic.io) ?!

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 9:44am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/6 "2016-06-27T09:44:11Z")

</div>

the states :  
$stateProvider

// setup an abstract state for the tabs directive  
.state(‘tab’, {  
url: ‘/tab’,

```
controller: 'tabsCtrl',
templateUrl: 'templates/tabs.html'

```

})

// Each tab has its own nav history stack:

.state(‘tab.home’, {  
url: ‘/home’,  
views: {  
‘tab-home’: {  
templateUrl: ‘templates/tab-home.html’,  
controller: ‘HomeCtrl’  
}  
}  
})  
.state(‘tab.profil’,{

```
  url: '/profil',
  views: {
    'tab-home': {
      templateUrl: 'templates/profil.html',
      
    }
  }
})

```

.state(‘tab.vols’, {  
url: ‘/vols’,  
views: {  
‘tab-vols’: {  
templateUrl: ‘templates/tab-vols.html’,  
controller: ‘VolCtrl’  
}  
}  
})  
.state(‘tab.airport’, {  
url: ‘/airport’,  
views: {  
‘tab-vols’: {  
templateUrl: ‘templates/airport.html’,

```
    }
  }
})
.state('tab.result', {
  url: '/result',
  views: {
    'tab-vols': {
      templateUrl: 'templates/result.html',
      controller:'resCtrl'
    }
  }
})

```

.state(‘tab.arrive’, {  
url: ‘/arrive’,  
views: {  
‘tab-vols’: {  
templateUrl: ‘templates/arrive.html’,  
controller:‘resCtrl’  
}  
}  
})  
.state(‘tab.services’, {  
url: ‘/services’,  
views: {  
‘tab-services’: {  
templateUrl: ‘templates/tab-services.html’,  
controller: ‘ServiceCtrl’  
}  
}  
})  
.state(‘tab.infos’,{

```
  url: '/infos',
  views: {
    'tab-services': {
      templateUrl: 'templates/info.html',
      controller:'InfoCtrl',
     
      
    }
  }
})

```

.state(‘tab.explore’, {  
url: ‘/explore’,  
views: {  
‘tab-explore’: {  
templateUrl: ‘templates/tab-explore.html’,  
controller: ‘ExpCtrl’  
}  
}  
})  
;

// if none of the above states are matched, use this as the fallback  
$urlRouterProvider.otherwise(’/tab/home’);

});

---

<div class="post-metadata">

**Author:** ![rberthome](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rberthome/32/99452_2.png) [@rberthome](https://forum.ionicframework.com/u/rberthome)\
**Post date:** [June 27, 2016, 9:48am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/7 "2016-06-27T09:48:25Z")

</div>

Is your tab state abstract ?

Have you tried this ?

> ```
> <ion-item menu-close ui-sref="tab.home">
> Home
> </ion-item>
> <ion-item menu-close ui-sref="tab.profil" >
> <i class="icon ion-android-person"></i> Mon espace
> </ion-item>
> <ion-item menu-close ui-sref="tab.airport">
> <i class="icon ion-android-plane"></i> Aéroports
> </ion-item>
> <ion-item menu-close ui-sref="tab.infos" >
> <i class="icon ion-ios-list"></i> Devices
> </ion-item>
> <ion-item menu-close ui-sref="tab.exlpore">
> <i class="icon ion-ios-heart"></i> Exlpore
> </ion-item>
> <ion-item menu-close ui-sref="tab.exlpore">
> <i class="icon ion-ios-heart"></i> About 
> </ion-item>
> 
> ```

---

<div class="post-metadata">

**Author:** ![jlopez90](https://avatars.discourse-cdn.com/v4/letter/j/8c91f0/32.png) [@jlopez90](https://forum.ionicframework.com/u/jlopez90)\
**Post date:** [June 27, 2016, 9:52am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/9 "2016-06-27T09:52:18Z")

</div>

Take care: should be tab.explore … misspelling

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 9:54am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/10 "2016-06-27T09:54:52Z")

</div>

yes i tried it, so the last day i added many classes in css,now i delet them all ,and it’s working normal ! so the css have influence to that ?  
because i overwrite many classes ,i don’t know what influence to that ?  
thanks

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 9:56am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/11 "2016-06-27T09:56:59Z")

</div>

i don’t understand u ,sorry ?

---

<div class="post-metadata">

**Author:** ![rberthome](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rberthome/32/99452_2.png) [@rberthome](https://forum.ionicframework.com/u/rberthome)\
**Post date:** [June 27, 2016, 9:58am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/12 "2016-06-27T09:58:25Z")

</div>

It could, it depends on what you changed but it shouldn’t have any impacts on it.

I want to add something about your topic.  
The href method works with the url instead of the ui-sref which works with the state name.

In your case, you mixed the two. In your states configuration you named your state **tab.home** , the url associated is **/home**. With this, you have to put **ui-sref=“tab.home”** or **href=“#/home”**

Try to not mixed the two of them, it’s harder to read.

The next point where you have problem is in the veiws part of your states.  
The property you put in this object is the name of the ion-nav-view it will replace.

For exemple, in your tabs.html you have something like that :

> ` <ion-nav-view name="tabContent"></ion-nav-view>`

then you have to write your states like this :

> ```
> .state('tab.airport', {
> url: '/airport',
> views: {
> 'tabContent': {
> templateUrl: 'templates/airport.html',
> }
> }
> })
> 
> ```

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 10:05am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/13 "2016-06-27T10:05:18Z")

</div>

it’s resolved,the problm is in the class css" full-page-bckg-menu" ,i addes it to get a t list like this

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/6/c660719b090b8a325f79560b2ebfff227b3c39ef.png) but i didn’t obtain this result ,  
si this is the class css :  
.full-page-bckg-menu {  
background-image: -webkit-linear-gradient(top, #f96332 0%, #000 100%);  
background-image: -o-linear-gradient(top, #f96332 0%, #000 100%);  
background-image: linear-gradient(to bottom, #f96332 0%, #000 100%);  
background-repeat: repeat-x;  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFF96332’, endColorstr=’#FF000000’, GradientType=0); }

.full-page-bckg-menu:after {  
content: “”;  
position: absolute;  
top: 0;  
left: 0;  
right: 0;  
bottom: 0;  
background: url(…/img/avion4.png) no-repeat center top;  
background-size: cover;  
opacity: 0.3;  
-webkit-filter: blur(5px);  
-moz-filter: blur(5px);  
-o-filter: blur(5px);  
-ms-filter: blur(5px);  
filter: blur(5px); }  
so here what’s the problem ,why i didn’t get the same the result of that list ? and why ,when i add this class the items are not clickable ?  
any explication please ? and solution for that look ,desired ,thanks  
reberthome ,yes i mixed them to try wich is working ,and i’m new in ionic 🙂 i’m starter ,

---

<div class="post-metadata">

**Author:** ![rberthome](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rberthome/32/99452_2.png) [@rberthome](https://forum.ionicframework.com/u/rberthome)\
**Post date:** [June 27, 2016, 1:38pm UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/14 "2016-06-27T13:38:18Z")

</div>

The problem is your .full-page-bckg-menu:after is over your list. that’s why you cannot do it like this.

I wrote something quickly but it could be better : [http://play.ionic.io/app/ecf25e5358b3](http://play.ionic.io/app/ecf25e5358b3)

---

<div class="post-metadata">

**Author:** ![narjes](https://avatars.discourse-cdn.com/v4/letter/n/f07891/32.png) [@narjes](https://forum.ionicframework.com/u/narjes)\
**Post date:** [June 27, 2016, 3:22pm UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/15 "2016-06-27T15:22:13Z")

</div>

thank you so much @rberthome ,i will try it 🙂 wink:

---

<div class="post-metadata">

**Author:** ![sukyan](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@sukyan](https://forum.ionicframework.com/u/sukyan)\
**Post date:** [February 18, 2021, 8:36am UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/16 "2021-02-18T08:36:14Z")

</div>

Excuse me i want to see the answer but i can’t see anything??

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:52pm UTC](https://forum.ionicframework.com/t/href-does-not-working-in-side-menus/55847/17 "2021-07-19T20:52:06Z")

</div>

Closed on July 19, 2021, 8:52pm UTC