0

CSS3/HTML と jQuery を使用して独自のドロップダウン メニューを設計しています。私はいくつかの問題を抱えていますが、なぜ私が問題を抱えているのか理解できないようです.

http://johns-webdesign.com/portfolioV2/

ご覧のとおり、「ポートフォリオ」にカーソルを合わせると、右側に大きなギャップがあり、すべてが押し込まれます。なぜこれが起こっているのか理解できないようです。

jQuery コード:

<script type="text/javascript">
  $(document).ready(function(){

   $(".nav_link_port").mouseover(function(){$(".nav_link_temp").fadeIn('slow')});
   $(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeIn('slow')});
   $(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeOut('slow')});      
  });
</script>

HTML コード:

<div id="nav">
        <a href="#" class="nav_link">Home</a> 
        <a href="#" class="nav_link">About</a> 
        <a href="#" class="nav_link_port">Portfolio</a> 
        <a href="#" class="nav_link_temp">Templates</a> 
        <a href="#" class="nav_link">Contact</a>
</div>

CSS:

.nav_link {
    display: block;
    float:left;
    font-family: 'Open Sans';
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f7a70e;
    color: #fff;
    margin-right:5px;
    text-decoration:none;
    padding:15px;
    position:relative;
    z-index:100;
        -webkit-transition: background 0.15s linear;
        -moz-transition: background 0.15s linear;
        -ms-transition: background 0.51s linear;
        -o-transition: background 0.15s linear;
        transition: background 0.15s linear;
}
.nav_link_port {
    display: block;
    float:left;
    font-family: 'Open Sans';
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f7a70e;
    color: #fff;
    margin-right:5px;
    text-decoration:none;
    padding:15px;
    position:relative;
    z-index:101;
        -webkit-transition: background 0.15s linear;
        -moz-transition: background 0.15s linear;
        -ms-transition: background 0.51s linear;
        -o-transition: background 0.15s linear;
        transition: background 0.15s linear;

}
.nav_link_temp {
    display:none;
    float:left;
    font-family: 'Open Sans';
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f7a70e;
    color: #fff;
    margin-right:5px;
    text-decoration:none;
    padding:15px;
    position:relative;
    z-index:102;
    top:52px;
    left:-120px;
        -webkit-transition: background 0.15s linear;
        -moz-transition: background 0.15s linear;
        -ms-transition: background 0.51s linear;
        -o-transition: background 0.15s linear;
        transition: background 0.15s linear;    
}
.nav_link:hover {
    background-color: #4f69a3;
}
.nav_link_port:hover,.nav_link_temp:hover  {
    background-color: #4f69a3;
}

CSS が乱雑であることはわかっていますが、修正できます。これは、ナビをテストするための簡単なコードでした。

4

2 に答える 2

0
.nav_link_temp {
    display:none;
 //   float:left;

delete this line

于 2013-03-13T19:12:59.087 に答える
0

プロジェクトについてこれ以上コンテキストを提供しない限り (単に楽しみのために独学しているのですか?)、なぜ車輪を再発明するのでしょうか?

http://twitter.github.com/bootstrap/components.html#navs

Twitter の Bootstrap を使用して、目的のコンポーネントをポップインすると、SO に質問を投稿するよりも短い時間で、適切なスタイルのドロップダウン ナビゲーション バーが作成されます。

[コメントに基づく更新]

http://jsfiddle.net/jgaAg/

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Templates</a>
            </li>
            <li><a href="#">Second Subitem</a>
            </li>
            <li><a href="#">Numero Tres</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>

私はあなたのためにこのフィドルを一緒に投げました。かなりクリーンでシンプル。それがあなたを正しい方向に向けてくれることを願っています!:)

于 2013-03-13T19:15:16.977 に答える