2016-04-30 8 views
1

私はあなたに質問があります。私はfullpage.jsで新しいプロジェクトを作ろうとしています。Menu Fullpage.js

しかし、私の質問は、私がしようと、メニューを作成する方法を、次のとおりです。

問題は、私はにポートフォリオに例えばクリックしたときに、ある、それは大丈夫だ、私は2番目のスライド上だけど、... ISN 「tは可能私は別のタブ

(HTMLパート)

<nav> 
    <ul> 
     <li data-menuanchor="Accueil"><a href="#Acc">Accueil</a></li> 
     <li data-menuanchor="PortFolio"><a href="#Port">PortFolio</a></li> 
     <li data-menuanchor="Contact"><a href="#Con">Contact</a></li> 
    </ul> 
</nav> 

とJSの部分の上でクリックするための:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#fullpage').fullpage({ 
      sectionsColor: ['', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], 
      anchors: ['Accueil', 'PortFolio', 'Contact'], 

     }); 
     $.fn.fullpage.setScrollingSpeed(1500); 
    }); 
</script> 

ありがとうございました:)

答えて

1

Ouuups!私は何のためにこの投稿を作成して申し訳ありません..私は解決策を見つける。

解決策は、私のCSSファイルを変更することでした。

、この設定:

#menu li { 
 
\t display:inline-block; 
 
\t margin: 10px; 
 
\t color: #000; 
 
\t background:#fff; 
 
\t background: rgba(255,255,255, 0.5); 
 
\t -webkit-border-radius: 4px; 
 
      border-radius: 4px; 
 
} 
 
#menu li.active{ 
 
\t background:#666; 
 
\t background: rgba(0,0,0, 0.5); 
 
\t color: #fff; 
 
} 
 
#menu li a{ 
 
\t text-decoration:none; 
 
\t color: #000; 
 
} 
 
#menu li.active a:hover{ 
 
\t color: #000; 
 
} 
 
#menu li:hover{ 
 
\t background: rgba(255,255,255, 0.8); 
 
} 
 
#menu li a, 
 
#menu li.active a{ 
 
\t padding: 9px 18px; 
 
\t display:block; 
 
} 
 
#menu li.active a{ 
 
\t color: #fff; 
 
} 
 
#menu{ 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
\t height: 40px; 
 
\t z-index: 70; 
 
\t width: 100%; 
 
\t padding: 0; 
 
\t margin:0; 
 
}