0

現在、ウェブサイトにナビゲーション バーと aa div があります。div はナビゲーション バーをわずかに覆っていますが、ウィンドウのサイズを変更すると、ナビゲーション バーが完全に覆われます。ナビゲーションバーを常にある程度カバーしたいのですが、完全ではありません。

HTML

<body>
    <div id="wrapper">
        <ul>
            <li class="nav"><a href="#">Home</a></li>
            <li class="nav"><a href="#">About Me</a></li>
            <li class="nav"><a href="#">Projects</a></li>
            <li class="nav"><a href="#">Resume</a></li>
            <li class="nav"><a href="#">Contact</a></li>
        </ul>
        <div id="bod">
            <h1 class="title">Home</h1>
        </div>
    </div>
</body>

CSS

#bod {
    height: 100%;
    width: 86%;
    background-color: #F4F3EE;
    position: absolute;
    top: 0px;
right: 0px;
    box-shadow: -1px 0px 10px 1px #999;
    -moz-box-shadow: -1px 0px 10px 1px #999;
    -webkit-box-shadow: -1px 0px 10px 1px #999;}

.nav {
    border: 1px solid #F4F3EE;
    width:20%;
    height:100px;
    color: #F4F3EE;
    margin: 2px 0px 0px 10px;
    text-align: left;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 30px;
    padding: 0px 0px 5px 0px;
    list-style-type: none;
    border-radius: 5px;
    box-shadow: -1px 0px 10px 1px #999;
    -moz-box-shadow: -1px 0px 10px 1px #999;
    -webkit-box-shadow: -1px 0px 10px 1px #999;
    box-shadow: inset 1px 2px 4px #F4F3EE;
    -moz-box-shadow: inset 1px 2px 4px #F4F3EE;
    -webkit-box-shadow: inset 1px 2px 4px #F4F3EE;
    background: #b58aa5;
    background: -moz-linear-gradient(top,  #ad8599 1%, #b58aa5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5));
    background: -webkit-linear-gradient(top,  #ad8599 1%,#b58aa5 100%);
    background: -o-linear-gradient(top,  #ad8599 1%,#b58aa5 100%);
    background: -ms-linear-gradient(top,  #ad8599 1%,#b58aa5 100%);
    background: linear-gradient(to bottom,  #ad8599 1%,#b58aa5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0 );

JavaScript

$(document).ready(function() {
    $('.nav').mouseenter(function() {
        $(this).animate({marginLeft: '-=20px'}, 100);
    $(this).addClass('.nav1');
    });
    $('.nav').mouseleave(function() {
        $(this).animate({marginLeft: '+=20px'}, 100);
    });
});

ウィンドウのサイズが変更されたときにユーザーがナビを表示できるようにするために何をすべきか、私は一生理解できません。

4

1 に答える 1

0

left: 200px;オンに設定する#bodと、修正されます。width: 86%;次に、設定されている も取り除くことができます#bod。あなたは絶対にポジショニングしています#bod。これは#bod、通常の流れから取り出され、独自のものに変わることを意味します。top、left、bottomおよびを設定rightして、Web ページの辺と の間のスペースを指定できるようになりまし#bodた。bottom: 0px;オンにすれば、どちらもオンに#bodする必要はありません。height: 100%;#bod

于 2013-05-02T01:31:14.507 に答える