1

ドロップダウン メニューのスタイル設定中に問題が発生しました。すべてが正常に機能していますが、CSS に絶対配置があります (これは機能します) が、画面の解像度を変更すると、もちろん適切に機能しません。私はデザイナーよりもプログラマーの方が多いので、これについて助けを求めたいと思います:-) これが私のメニューです

<div class="navigation">
<!-- some links -->
    <div id="menu">
        <a href="gallery.html">Galerie</a>
        <div id="submenu">
            <a href="galleryOldRooms.html" title="Starší pokoje">Starší pokoje</a><br />
            <a href="galleryNewRooms.html" title="Novější pokoje">Novější pokoje</a>
        </div>
    </div>
</div>

そして、ここに関連するCSSがあります

#submenu {
   display: none;
   padding: 0px;
   margin-top: 5em;
   margin-left: 27.5em;
   position: absolute;
   left: 0px;
}
.nav a {
   border-right: 2px solid #161616;
   color: #CCC;
   float: left;
   font: bold 1em Verdana,sans-serif;
   line-height: 51px;
   padding: 0 20px;
}

そして、ドロップアウトを行うJQueryの一部

$(document).ready(function() {
    $("#menu").hover(function() {
        $("#submenu").fadeIn(); 
        }, 
    function() {
        $("#submenu").fadeOut();
    });
});

これを改善して、ブラウザと解像度に依存しないようにするにはどうすればよいですか?回答ありがとうございます!

編集 ディスプレイの解像度を増減したり、より大きな画面で見ようとすると、解像度に応じてドロップダウンメニューが左側または右側に移動します。これは明らかに私がしないことです。ここにリンクがあります。まだ完成していないので、意地悪しないでください:-)

4

3 に答える 3

2

持っている#menu必要がありますposition:relative;

このように、 は#submenuとその内部position:absolute;に従って、 の左の境界線にくっつくことを意味します。これは必要なものです。おそらく、トップを増やすか減らす必要があります。#menuleft:0px;#menumargin-leftmargin-toptop:30px;

#menu
{
    position:relative;
}
#submenu {
   display: none;
   padding: 0px;
   position: absolute;
   left: 0px;
   top:30px; //find the best value
}

アップデート

#menuがなければならないと言ったとき、 はGalerieのみを含む div であるposition:relative;と思いました。そうでない場合、に 4 つのリンクすべてが含まれている場合: Uvod .. Cenik.. など...そしてもちろん最初にくっつきます。#menu<a> #menu

あなたがする必要があるのは、ギャラリー用の特別なdivコンテナを追加することです.

<div id="menu">
   <a href="">Uvod</a>
   <a href="">Cenik</a>
   <div id="galerieParent">
       <a href="">Galerie</a>
       <div id="submenu">
          ......
       </div>
   </div>
   <a href="">Kontakt</a>
</div>

ここで、position:relative;を に設定する必要があります#galerieParent。

于 2013-01-25T20:32:36.643 に答える
1

ここにはいくつかの問題があります。ほとんどの開発者がこのタイプのメニューを設定する方法に合わせてレイアウトを変更しました。また、ID とクラスのほとんどを元に戻しました。これらは、ID の重複をほぼ保証するような方法で使用されています。

これはあなたの質問に対する理想的な回答ではないかもしれませんが、役立つ情報が含まれていると思います。

http://jsfiddle.net/mrPse/8/

#nav {
    position: relative;
}
#nav a {
    border-right: 2px solid #161616;
    color: #CCC;
    float: left;
    font: bold 1em Verdana, sans-serif;
    line-height: 51px;
    padding: 0 20px;
}
#nav > li {position: relative; display: inline-block;}
#nav li ul li a {border-right: 0;}
.submenu {
    display: none;
    padding: 0px;
    margin-top: 3em;
    position: absolute;
    left: auto;
    width: 180px;
}
.submenu li a {border-right: 0;}

<ul id="nav">
    <li><a href="index.html">Úvod</a></li>
    <li><a href="prices.html">Ceník</a></li>
    <li class="menu">
        <a href="gallery.html">Galerie</a>
        <ul class="submenu" style="display: none;">
            <li><a title="Starší pokoje" href="galleryOldRooms.html">Starší pokoje</a></li>
            <li><a title="Novější pokoje" href="galleryNewRooms.html">Novější pokoje</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Kontakt</a>

    </li>
</ul>

$(".menu").hover(function () {
    $(this).children(".submenu").fadeIn();
}, function () {
    $(this).children(".submenu").fadeOut();
});
于 2013-01-25T20:58:10.947 に答える
0

CSSを追加する必要があります

#menu {position:relative;}

変更する

#submenu {margin-left:14.5em;}

必要に応じて調整します。

于 2013-01-25T20:30:02.390 に答える