-4

我正在尝试在我的博客上放置一个下拉菜单：frolichearts.blogspot.com

我试过寻找答案，但我就是听不懂他们在说什么。请帮我。

这是导航栏的代码：

    <script type='text/javascript'>
        jQuery(document).ready(function($){
            $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
            $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
            $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();

            $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a"); 
                $(this).addClass("tabs-widget-current"); 
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); 
                var activeTab = $(this).attr("href"); 
                $(activeTab).fadeIn();
                return false;
            });
        });
    </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>
4

1 回答 1

0

试试这个例子

这将是你的 html

<nav>
<ul class="nav">
        <li class="menu"><a href="#"></a></li>
        <li class="menu"><a>About</a>
             <ul class="subnav01">
                  <li><a href="#">About One</a></li>
                  <li><a href="#">About Two</a></li>
                  <li><a href="#">About Three</a></li>
                  <li><a href="#">About Four</a></li>
                  <li><a href="#">About Five</a></li>
                  <li><a href="#">About Six</a></li>
             </ul>
        </li>
        <li class="menu"><a>Products</a>
             <ul class="subnav01">
                  <li><a href="#">Product One</a></li>
                  <li><a href="#">Product Two</a></li>
                  <li><a href="#">Product Three</a></li>
                  <li><a href="#">Product Four</a></li>
                  <li><a href="#">Product Five</a></li>
                  <li><a href="#">Product Six</a></li>
             </ul>
        </li>
        <li class="menu"><a href="#">Services</a></li>
        <li class="menu"><a href="#">Contact</a></li>
   </ul>
</nav>

你的 CSS

* {
margin: 0;
padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: darkgray;
}

.nav {
    list-style: none;
}

.nav li {
margin: 0 0 10px 0;
font-family: Helvetica;
font-size: 11px;
text-align: right;
text-transform: uppercase;
line-height: 1;
width: 100px;
float: left;
}

.nav li:nth-child(5) {
    margin: 0;
}

.nav li a {
    height: 10px;
    padding: 10px 10px 10px 0;
    color: white;
    text-decoration: none;
    display: block;
    cursor: pointer;
    position: relative;
}

.subnav01, .subnav02 {
    width: 300px;
    display: none;
    list-style: none;
}
.subnav01 li, .subnav02 li {
    width: 150px;
    margin: 0;
    text-align: center;
}

.subnav01 li a, .subnav02 li a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: dodgerblue;
    height: 10px;
    display:block;
}

.subnav01 li a:hover, .subnav02 li a:hover {
    background: dimgray;
}

.active > a {
    background: dodgerblue !important;
}

jQuery部分

    jQuery(document).ready(function($){
    $("li.menu").on("hover", function(e){
        deactivateAll(this);
        toggle(this);
    });

    function deactivateAll(item) {
        $( "li" ).not(item).each(function( index, elem ){
            if ($(elem).hasClass("active")) {
                toggle(elem);
            }
        });
    }

    function toggle(elem) {
        $(elem).find("ul").stop(true,true).slideToggle("slow");
        $(elem).toggleClass("active");
    }
});
于 2013-05-20T12:55:07.500 回答