jquery 如何正确设置下拉菜单的样式

z9zf31ra  于 2022-11-03  发布在  jQuery
关注(0)|答案(3)|浏览(242)

我在设计下拉菜单样式时遇到了问题。一切都很好,但我在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();
    });
});

我如何改进这一点,使其更独立于浏览器和分辨率?

编辑

当我提高或降低显示器的分辨率,或者试图在更大的屏幕上查看时,下拉菜单会根据分辨率的不同而移动到左侧或右侧。显然我不会这样做。Here是链接,它还没有完成。

bkhjykvo

bkhjykvo1#

#menu必须具有position:relative;
这样一来,#submenu将根据#menu得到position:absolute;,其中,left:0px;意味着它将粘在#menu的左边框上,这就是您想要的,不需要margin-leftmargin-top,只需添加top:30px;,并测试它是否正确定位在Galerie下,可能需要增加或减少顶部。


# menu

{
    position:relative;
}

# submenu {

   display: none;
   padding: 0px;
   position: absolute;
   left: 0px;
   top:30px; //find the best value
}

更新

当我说#menu必须有一个position:relative;时,我以为#menu是一个div,只包含<a>Galerie,如果不是这样,如果#menu包含所有4个链接:Uvod .. Cenik..等等...那么它当然会在一开始就坚持下去。
您需要做的是为Galerie添加一个特殊的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

1aaf6o9v

1aaf6o9v2#

这里有很多问题。我已经修改了布局,使其更符合大多数开发人员设置这种类型菜单的方式。我还颠倒了大部分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();
});
3b6akqbq

3b6akqbq3#

您需要添加一些CSS


# menu {position:relative;}

并且变更了


# submenu {margin-left:14.5em;}

根据需要进行调整。

相关问题