Question

我在wordpress中创建了一个下拉菜单，其中显示了在子菜单上悬停导航项目的情况。但是，我觉得子菜单显得太快，所以我想添加一个幻灯片动画，以便子菜单可以减少和缩回，使其外观更加渐进。继承了我尝试过的代码，我觉得它应该可行，但显然我错过了一些东西。

HTML

<div class="navbar-container container">

    <div class="">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
            <a class="navbar-brand" href="https://son.sites.unc.edu/">School of Nursing</a>

    </div>

    <div class="row">
        <nav class="collapse navbar-collapse" role="navigation">
            <ul id="menu-top-menu" class="nav navbar-nav hover"><li class="active menu-home"><a href="https://son.sites.unc.edu/">HOME</a></li>
              <li class="dropdown menu-about"><a class="dropdown-toggle disabled" data-target="#" href="#">ABOUT<b class="fa caret-dropdown"></b></a>
               <ul class="dropdown-menu">
                <li class="menu-welcome"><a href="https://son.sites.unc.edu/about-2/welcome-from-the-dean/">Welcome</a></li>
                <li class="menu-contact"><a href="https://son.sites.unc.edu/ahec-speakers-programs-catalog/contact/">Contact</a></li>
                <li class="menu-mission-and-philosophy"><a href="https://son.sites.unc.edu/about/philosophy-of-nursing-and-nursing-education/">Mission and Philosophy</a></li>
                <li class="menu-quick-facts"><a href="https://son.sites.unc.edu/about/quick-facts/">Quick Facts</a></li>
                <li class="menu-milestones"><a href="https://son.sites.unc.edu/about-2/milestones/">Milestones</a></li>
                <li class="menu-accreditation"><a href="https://son.sites.unc.edu/about/accreditation/">Accreditation</a>    </li>
                <li class="menu-diversity-facts"><a href="https://son.sites.unc.edu/about-2/diversity-facts/">Diversity Facts</a></li>
                <li class="menu-news-and-events"><a href="https://son.sites.unc.edu/gerontology-aging/news-and-events/">News and Events</a></li>
                <img class="menuAbout" src="http://son.sites.unc.edu/files/2015/12/outreach.jpg"></ul>
             </li>
          </ul>            
       </nav>
    </div>

</div>

JAVASCRIPT

function mainmenu(){
 $('#menu-top-menu li').hover(function(){
  $(this).find('ul:first').slideDown("slow");
 },function(){
   $(this).find('ul:first').slideUp("slow");
  });
 }
$(document).ready(function(){
 mainmenu();
});

这是CSS

.dropdown-menu li a:hover{
 background-color: #fff;
 color: #7BAFD4;
}

.form-control-nav{
 display: block;
 width: 100%;
 height: 42px;
 padding: 6px 12px;
 font-size: 14px;
 line-height: 2;
 color: #555;
 background-color: #fff;
 background-image: none;
 border: 0px solid #ccc;
 border-radius: 3px;
 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 /* box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); */
 -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.btn{padding:0px !important;} 

.btn-search{
 background-image: none;
 background-color: #fff;
 background-repeat: repeat-x;
 border: none;
 border-radius: 3px;
 color: #003150;
 text-shadow: none;
 font-family: "Open Sans",sans-serif;
 padding: none;
 }

 .search-submit{
  z-index: 30;
 }
 #search-form input,
 #search-form input:hover{
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }

 #search-form input:hover{
  width: 200px;
 }

 #search-form input{
  width: 30px;
 }

 #menu-search{
  display: inline-table !important;
 }

 .breadcrumbs .current, .breadcrumbs{
  display: none;
 }
 .navbar-nav>li>.dropdown-menu{
  margin-top: -30px;
 }
 .menuImage{
  position:relative;
  z-index: 300;  
 }

 .menuAbout{  
  z-index:301;
  max-width:40%; 
  height: auto;
  padding-bottom: 10px;
 } 

.menuAcademics{  
 z-index:301;
 max-width:40%; 
 height: auto;
 padding-bottom: 10px;
}

.menuFaculty{  
 z-index:301;
 max-width:40%; 
 height: auto;
 padding-bottom: 10px;
}

.menuExcellence{  
 z-index:301;
 max-width:40%; 
 height: auto;
 padding-bottom: 10px;
}

.menuOutreach{  
 z-index:301;
 max-width:40%; 
 height: auto;
 padding-bottom: 10px;
} 

.dropdown-menu{
 box-shadow: none;
 background-color: #fff;
 z-index: 8;
}

.dropdown-menu li{
 margin-top:30px;
 margin-left: 30px;
}

#menu-top-menu li a b{
 display: none;
 }

#menu-top-menu { 
 margin: 0 auto; 
 list-style: none; 
 position: relative; 
 width: 100%;
 text-align: center;
}
#menu-top-menu li { 
 display: inline-block; 
}

#menu-top-menu li ul li{
 display: block;
}

#menu-top-menu li ul{
 width: 100%;
}
#menu-top-menu a { 
 color: #003150; 
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 letter-spacing: 0.04em;
 font-size: 14px; 
 float: left;
 padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase;
 z-index:9;
} 
#menu-top-menu a:hover { 
 color: #7BAFD4; 
}
#magic-line { 
 position: absolute !important;
 bottom: -2px; 
 left: 0; 
 width: 100px; 
 height: 2px; 
 background: #7BAFD4;
 z-index: 15;
}
.active a {
 color: #7BAFD4 !important;
 }

 .ie6 #menu-top-menu li, .ie7 #menu-top-menu li { 
  display: inline; 
  }
 .ie6 #magic-line {
   bottom: -3px;
 }

 .navbar-default{
  box-shadow: none;
 }

 .nav>li{
  position:static !important;
 }

 .navbar-default .navbar-nav>li.active a {
  color: #7BAFD4;
 }

.navbar-default .navbar-nav>li>a:hover{
 color: #7BAFD4;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
background-color: #ffffff !important;
}

.navbar-container .container{
 width: 100% !important;
 margin-left: 0;
 margin-right: 0;
 }

.container{
 width: 100% !important;
}
.navbar-nav>li{
 float: none;
 padding-right: 60px;
}

 .navbar-brand, .navbar-nav>li>a {
  text-shadow:0 0px 0 rgba(0,0,0,0);
 } 

 .header-logo, .brand-logo{
  text-align: center;
  margin-top:-50px;
  z-index: 0;
  position:relative;
 }

 .gray{
  z-index: 100;
  position:relative;
 }

Answer 1

我需要在文档就绪函数中隐藏.dropdown-menu类，所以我只是在那里添加了这个：

$('.dropdown-menu').hide();

Wordpress下拉菜单

1 个答案: