下拉行Jquery菜单_Jquery_Css_Html

下拉行Jquery菜单
jquery css html
下拉行Jquery菜单,jquery,css,html,Jquery,Css,Html,我认为我的方法是正确的，但是当鼠标离开子链接菜单项并将鼠标悬停在非子链接上时，需要关闭子链接的栏，但如果其子链接指向子链接，则不需要关闭（希望有意义） i、例如，Home或Contact不会打开子链接栏，如果鼠标从子链接悬停状态悬停，则会将其关闭（例如，我的示例）据我所知，目前整个#主导航上都安装了鼠标，但我一直在思考如何实现这一点，可能非常简单，但他们必须从某个地方开始，对吗？只是想让每个人都知道我的菜单是从哪里来的，我正在尝试重新制作我自己的菜单，谢谢请参阅下面我的当前代码： CSS:
我认为我的方法是正确的，但是当鼠标离开子链接菜单项并将鼠标悬停在非
子链接上时，需要关闭子链接
的栏，但如果其子链接指向子链接，则不需要关闭（希望有意义）
i、 例如，Home或Contact不会打开子链接
栏，如果鼠标从子链接悬停状态悬停，则会将其关闭（例如，我的示例）
据我所知，目前整个#主导航上都安装了鼠标，但我一直在思考如何实现这一点，可能非常简单，但他们必须从某个地方开始，对吗？只是想让每个人都知道我的菜单是从哪里来的，我正在尝试重新制作我自己的菜单，谢谢
请参阅下面我的当前代码：
CSS:
html, body {
    background: #2d2620;
    text-align: center;
    margin: 0px;
    height: 100%;
    width: 100%;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    position: relative;
    background: url(body.png) center no-repeat;
    min-height: 600px;
}
#body-image {
    margin-top: 60px;
}
#main-nav {
    margin: 0px 0px 0px 2px;
    text-align: left;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 0px;
}
#main-handle {
    width: 605px;
    float: right;
    margin-top: -1px;
}
#main-nav li {
    display: inline;
    list-style: none;
}
#main-nav li a {
    margin-right: 5px;
    font-size: 15px;
    text-decoration: none;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    outline: 0;
    position: relative;
    top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
    background: #514539;
}
#sub-link-bar {
    background: #514539;
    min-height: 1px;
    border-bottom: #645546 1px solid;
}
.sub-links {
    display: none;
    position: absolute;
    width: 100%;
    text-align: left;
    left: 0px;
}
#main-nav li .sub-links li a:hover{
    background: #2d2620;
}
#main-nav li a.close{
    display: none;  
    position: absolute;
}
#main-nav li a.close:hover{
    background: #900;
}
.round {
    display:block
}
.round * {
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#645546
}
.round1 {
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #443a30;
    border-right:1px solid #443a30;
    background:#56493c
}
.round2 {
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #322a23;
    border-right:1px solid #322a23;
    background:#594c3e
}
.round3 {
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #594c3e;
    border-right:1px solid #594c3e;
}
.round4 {
    border-left:1px solid #443a30;
    border-right:1px solid #443a30
}
.round5 {
    border-left:1px solid #56493c;
    border-right:1px solid #56493c
}
.roundfg {
    background:#645546
}

</head>
 <body>
   <ul id="main-nav">
    <li><a class="main-link active" href="">Home</a></li>
    <li><a class="main-link subLink" href="">Tutorials</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Design</a> </li>
        <li><a href="" title="">HTML &amp; CSS</a> </li>
        <li><a href="" title="">Other</a> </li>
        <li><a href="" title="">PHP</a> </li>
        <li><a href="" title="">Ruby</a> </li>
        <li><a href="" title="">Site Builds</a> </li>
        <li><a href="" title="">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="" title="">Wordpress</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Articles</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">General</a> </li>
        <li><a href="" title="">Interviews</a> </li>
        <li><a href="" title="">News</a> </li>
        <li><a href="" title="">Web Roundups</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Freebies</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Books</a> </li>
        <li><a href="" title="">Icons</a> </li>
        <li><a href="" title="">Lightboxes</a> </li>
        <li><a href="" title="">Others</a> </li>
        <li><a href="" title="">Plugins</a> </li>
        <li><a href="" title="">Themes</a> </li>
        <li><a href="" title="">Tooltips</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Videos</a>
        <ul class="sub-links" style="display: none;">
            <li><a href="" title="">Screencasts</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="">Contact</a></li>
  </ul>
</div>
<div id="sub-link-bar"></div>

JavaScript:使用jQuery 1.3.2库
$(document).ready(function(){
    $("#main-nav li a.main-link").hover(function(){
        $("#main-nav li a.main-link").removeClass("active");
        $(this).addClass("active");
        $("#sub-link-bar").animate({
            height: "40px"                     
        });
        $(".sub-links").hide();
        $(this).siblings(".sub-links").fadeIn();
    });
    $("#main-nav").mouseleave(function(){
        $("#main-nav li a.main-link").removeClass("active");
        $(".sub-links").fadeOut();
        $("#sub-link-bar").animate({
            height: "1px" 
        });     
    });
});

HTML:
html, body {
    background: #2d2620;
    text-align: center;
    margin: 0px;
    height: 100%;
    width: 100%;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    position: relative;
    background: url(body.png) center no-repeat;
    min-height: 600px;
}
#body-image {
    margin-top: 60px;
}
#main-nav {
    margin: 0px 0px 0px 2px;
    text-align: left;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 0px;
}
#main-handle {
    width: 605px;
    float: right;
    margin-top: -1px;
}
#main-nav li {
    display: inline;
    list-style: none;
}
#main-nav li a {
    margin-right: 5px;
    font-size: 15px;
    text-decoration: none;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    outline: 0;
    position: relative;
    top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
    background: #514539;
}
#sub-link-bar {
    background: #514539;
    min-height: 1px;
    border-bottom: #645546 1px solid;
}
.sub-links {
    display: none;
    position: absolute;
    width: 100%;
    text-align: left;
    left: 0px;
}
#main-nav li .sub-links li a:hover{
    background: #2d2620;
}
#main-nav li a.close{
    display: none;  
    position: absolute;
}
#main-nav li a.close:hover{
    background: #900;
}
.round {
    display:block
}
.round * {
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#645546
}
.round1 {
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #443a30;
    border-right:1px solid #443a30;
    background:#56493c
}
.round2 {
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #322a23;
    border-right:1px solid #322a23;
    background:#594c3e
}
.round3 {
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #594c3e;
    border-right:1px solid #594c3e;
}
.round4 {
    border-left:1px solid #443a30;
    border-right:1px solid #443a30
}
.round5 {
    border-left:1px solid #56493c;
    border-right:1px solid #56493c
}
.roundfg {
    background:#645546
}

</head>
 <body>
   <ul id="main-nav">
    <li><a class="main-link active" href="">Home</a></li>
    <li><a class="main-link subLink" href="">Tutorials</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Design</a> </li>
        <li><a href="" title="">HTML &amp; CSS</a> </li>
        <li><a href="" title="">Other</a> </li>
        <li><a href="" title="">PHP</a> </li>
        <li><a href="" title="">Ruby</a> </li>
        <li><a href="" title="">Site Builds</a> </li>
        <li><a href="" title="">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="" title="">Wordpress</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Articles</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">General</a> </li>
        <li><a href="" title="">Interviews</a> </li>
        <li><a href="" title="">News</a> </li>
        <li><a href="" title="">Web Roundups</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Freebies</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Books</a> </li>
        <li><a href="" title="">Icons</a> </li>
        <li><a href="" title="">Lightboxes</a> </li>
        <li><a href="" title="">Others</a> </li>
        <li><a href="" title="">Plugins</a> </li>
        <li><a href="" title="">Themes</a> </li>
        <li><a href="" title="">Tooltips</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Videos</a>
        <ul class="sub-links" style="display: none;">
            <li><a href="" title="">Screencasts</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="">Contact</a></li>
  </ul>
</div>
<div id="sub-link-bar"></div>










































更新：
html, body {
    background: #2d2620;
    text-align: center;
    margin: 0px;
    height: 100%;
    width: 100%;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    position: relative;
    background: url(body.png) center no-repeat;
    min-height: 600px;
}
#body-image {
    margin-top: 60px;
}
#main-nav {
    margin: 0px 0px 0px 2px;
    text-align: left;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 0px;
}
#main-handle {
    width: 605px;
    float: right;
    margin-top: -1px;
}
#main-nav li {
    display: inline;
    list-style: none;
}
#main-nav li a {
    margin-right: 5px;
    font-size: 15px;
    text-decoration: none;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    outline: 0;
    position: relative;
    top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
    background: #514539;
}
#sub-link-bar {
    background: #514539;
    min-height: 1px;
    border-bottom: #645546 1px solid;
}
.sub-links {
    display: none;
    position: absolute;
    width: 100%;
    text-align: left;
    left: 0px;
}
#main-nav li .sub-links li a:hover{
    background: #2d2620;
}
#main-nav li a.close{
    display: none;  
    position: absolute;
}
#main-nav li a.close:hover{
    background: #900;
}
.round {
    display:block
}
.round * {
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#645546
}
.round1 {
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #443a30;
    border-right:1px solid #443a30;
    background:#56493c
}
.round2 {
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #322a23;
    border-right:1px solid #322a23;
    background:#594c3e
}
.round3 {
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #594c3e;
    border-right:1px solid #594c3e;
}
.round4 {
    border-left:1px solid #443a30;
    border-right:1px solid #443a30
}
.round5 {
    border-left:1px solid #56493c;
    border-right:1px solid #56493c
}
.roundfg {
    background:#645546
}

</head>
 <body>
   <ul id="main-nav">
    <li><a class="main-link active" href="">Home</a></li>
    <li><a class="main-link subLink" href="">Tutorials</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Design</a> </li>
        <li><a href="" title="">HTML &amp; CSS</a> </li>
        <li><a href="" title="">Other</a> </li>
        <li><a href="" title="">PHP</a> </li>
        <li><a href="" title="">Ruby</a> </li>
        <li><a href="" title="">Site Builds</a> </li>
        <li><a href="" title="">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="" title="">Wordpress</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Articles</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">General</a> </li>
        <li><a href="" title="">Interviews</a> </li>
        <li><a href="" title="">News</a> </li>
        <li><a href="" title="">Web Roundups</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Freebies</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Books</a> </li>
        <li><a href="" title="">Icons</a> </li>
        <li><a href="" title="">Lightboxes</a> </li>
        <li><a href="" title="">Others</a> </li>
        <li><a href="" title="">Plugins</a> </li>
        <li><a href="" title="">Themes</a> </li>
        <li><a href="" title="">Tooltips</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Videos</a>
        <ul class="sub-links" style="display: none;">
            <li><a href="" title="">Screencasts</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="">Contact</a></li>
  </ul>
</div>
<div id="sub-link-bar"></div>


以下是新的JS：
$(document).ready(function(){
    $('#main-nav > li').hover(function(){
        //Checks if it's already active, if so, does nothing.
        if(!$(this).find('.main-link').hasClass('active')){
            $("#main-nav > li a.active").removeClass("active");
            $(this).find('.main-link').addClass("active");
            //checks if there's a subnav, then opens it
            //otherwise it closes the #sub-link-bar
            if($(this).find('li').length){
                //$("#main-nav li a.close").stop().fadeIn();
                //There is no .close
                var that = this;
                $("#sub-link-bar").stop().animate({ height: "40px"}, function(){
                    $(that).find(".sub-links").fadeIn();
                });
            }
            else {
                 $(this).find(".sub-links").stop().fadeOut( function(){
                    $(this).css('opacity','1');
                    $("#sub-link-bar").stop().animate({height: "1px"});
                 });
            }
        }
    }, function(){
        //Checks if it has a subnav, if so, hides the text first, then the bar
        //if not, just closes the bar
        if($(this).find('li').length){
            $(this).css('opacity','1');
            $("#sub-link-bar").stop().animate({height: "1px"});
        }
        $("#sub-link-bar").stop().animate({height: "1px"});   
       $(this).find('.main-link').removeClass('active');
    });
});

还将top:49px
添加到您的子链接中。
两个问题：1）您是否必须使用jquery 1.3.2，因为它非常旧？2） 你有CSS吗？不，不是全部，我只是尽我所能工作，完全接受建议。我以前也问过另一个问题，关于是否使用Jquery或CSS来创建这种类型的菜单http://jqueryjs.googlecode.com/files/jquery-    1.3.2.min.js
（其中有4个空格）只是一个复制/粘贴错误？是的，这不是我的代码中的内容，天知道那里发生了什么…用你的代码创建了一个。它没有深入到jQuery 1.3.2，所以我使用了jQuery 1.6.4。谢谢，但是当我将鼠标悬停在主页或联系人项目上时，子链接栏仍然会显示动画，我不希望这些项目具有子链接属性。太棒了，太棒了。谢谢你，伙计。正如你所知道的，我从他们那里得到了这个想法，他们的菜单稍微有点复杂，因为它使用幻灯片代替，而且不会褪色。可能会试着在淡入淡出方面做些工作，让它工作得更快一点。没问题。为了使其工作更快，只需将速度添加到动画中，如动画{…}，300）
或淡出（300）
。你有可能接受我的回答吗？