2

私はモックアップに取り組んでおり、これを作成しました: http://cynthialarenas.billybluedigital.net/

再生、概要、ハウツーのナビゲーション ボタンに問題があります。

「about」をクリックしてから「how to」をクリックすると、すべて正常に動作しますが、「how to」から「about」に移動すると、「how to」が消えます。すべてのボタンが一貫して機能し、消えないようにするにはどうすればよいですか。また、スライドのトランジションが少しおかしく、白いバナーが表示されることもあります。

jquery をコンテンツ領域のすぐ内側に配置したいのですが、フッターの上と上ですばやく点滅しているように見えます。

誰でも光を当てることができますか？

ここに私のコードのいくつかのスニペットがあります:

CSS:

#contentArea{
    width:1024px;
    height:522px;
    background:#FFF;
    float:left;
    overflow: hidden;
}

#playSlide, #howSlide, #aboutSlide {
    display: none
}

.toggleDiv p {
    margin: 0 0 12px 0
}

HTML:

<div class="toggleDiv" id="aboutSlide">
    <div class="navContainer">
    <div class="menuItem">
        <a class="show_hide" rel="#playSlide">
            <img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png">
        </a>
    </div>
    <div class="menuItem">
        <a class="show_hide" rel="#aboutSlide">
            <img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn.png">
        </a>
    </div>
    <div class="menuItem">
        <a class="show_hide" rel="#howSlide">
            <img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png">
        </a>
    </div>
</div>
4

1 に答える 1

0

これについては、ミッチェルに同意する必要があります。このようにシンプルなナビゲーションに画像を使用することは、信じられないほど非 SEO フレンドリーです。それだけでなく、それは単なる専門家ではありません。

あなたのサイトにアクセスしたときに問題が発生することはありませんが、使用している画像に代わるものを提供できます。

http://jsfiddle.net/L2MVu/1

<ul class="nav">
    <li class="active"><a href="#">play</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">how to play</a></li>
</ul>

ご覧のとおり、すべて編集可能ですが、画像から望んでいたのと同じくらいきれいです.

これはページの読み込み時間を大幅に節約するわけではありませんが、画像を使用する前に、純粋な CSS で目的の効果を得ることを常にお勧めします。

于 2013-10-15T07:08:47.730 に答える