グローバルナビの作り方

こんな感じのやつ

機能としては

• クリックしたナビに下線
• ナビに応じて画面内容も変更

くらいかなあ。
調べてみると色々なやり方があったけど、今回は主にAngularJSのng-styleを使用してみた。
もっと効率の良い方法があると思うので見つけ次第変更していく予定。

html

<ul class="globalNav">
  <li ng-click="indexCtrl.method.clickNav(1);"/>
    <a ng-href="./#/introduction" ng-style="indexCtrl.value.style.styleTop">
       <strong>トップ</strong>
       <span>Top</span>
    </a>
  </li>
  <li ng-click="indexCtrl.method.clickNav(2);">
    <a ng-href="./#/main" ng-style="indexCtrl.value.style.styleCourse">
       <strong>コース</strong>
       <span>Course</span>
    </a>
  </li>
  <li ng-click="indexCtrl.method.clickNav(3);" style="margin-left:-5px;">
    <a ng-href="./#/myPage" ng-style="indexCtrl.value.style.styleMyPage">
    <strong>マイページ</strong>
    <span>My Page</span>
    </a>
 </li>
</ul>

クリックしたナビはng-hrefで各画面に遷移できる

javascript

function clickNav(nav){
            if(nav == 1){
                $scope.indexCtrl.value.style.styleTop = {borderBottom:'solid #457B9D'};
                $scope.indexCtrl.value.style.styleCourse = {borderBottom: '#fff'};
                $scope.indexCtrl.value.style.styleMyPage = {borderBottom: '#fff'};
            }else if(nav == 2){
                $scope.indexCtrl.value.style.styleCourse = {borderBottom:'solid #457B9D'};
                $scope.indexCtrl.value.style.styleTop = {borderBottom: '#fff'};
                $scope.indexCtrl.value.style.styleMyPage = {borderBottom: '#fff'};
            }else{
                $scope.indexCtrl.value.style.styleMyPage = {borderBottom:'solid #457B9D'};
                $scope.indexCtrl.value.style.styleTop = {borderBottom: '#fff'};
                $scope.indexCtrl.value.style.styleCourse = {borderBottom: '#fff'};
            }
};

クリックしたナビ番号(仮)をng-clickでjavaScriptに飛ばし、番号に従ってng-styleを設定する。
今回はクリックしたナビに下線を引く処理なので、クリックしたナビには{borderBottom:'solid #457B9D'}のように、下線に色をつけるように設定する。
その他のナビには{borderBottom: '#fff'}で白に初期化する。

まとめると、もっと効率良い方法がある気がしてならん。
時間があったら他の方法も検討していきたい。