学做网站培训课程介绍

当前位置:

bootstrap下拉菜单鼠标悬停弹出

本课程视频是VIP会员课程,学习请进入VIP学习区

bootstrap下拉菜单默认情况是鼠标点击后出现下拉菜单,对于我们实际做网站时,需要把它改成鼠标悬停弹出下拉菜单。

wordpress + bootstrap

bootstrap下拉菜单鼠标悬停弹出改造步骤

  1. 将自己网站引入bootstrap框架;
  2. 在网页的底部,加上以下的JS代码。
    <script>/*下拉菜单*/
    $(document).ready(function(){
    dropdownOpen();
    });
    function dropdownOpen() {
    var $dropdownLi = $('li.dropdown');
    $dropdownLi.mouseover(function() {
    $(this).addClass('open');
    }).mouseout(function() {
    $(this).removeClass('open');
    });
    }</script>
  3. 其中li,dropdown 是官网给的事例中的li标签的 class属性。通过以上的代码,我们就可以变成鼠标悬停弹出bootstrap下拉菜单了。

补充:除了上面的代码之外,我们还可以使用下面的JS代码,还可以实现缓冲下拉的效果。


  $(document).ready(function(){
 if($(window).width()>768){

            //鼠标划过就展开子菜单

            $('ul.nav li.dropdown').hover(function() {

              $(this).find('.dropdown-menu').stop(true, true).slideDown();

            }, function() {

              $(this).find('.dropdown-menu').stop(true, true).slideUp();

            });

      }
});

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • bootstrap是一个特别好用的网站前端框架,可以让我们制作响应式网站时比较简单。对于响应式网站制作时,响应式导航是比较重要的部分。下面学做网
  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • Dreamweaver跳转菜单制作 视频教程 (1123736 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • DW鼠标经过更换图片变化 视频教程 (1154142 次浏览)
    dreamweaver鼠标经过更换图片特效就是当鼠标经过图像就是当鼠标经过图像时,原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的:原始
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 做网站时,为了达到滚动展示图片的效果,我们需要在网站上添加滚动代码,滚动分为四种形,向上滚动、向下滚动、向左滚动、向右滚动。(相关知识:HTML
  • bootstrap下拉菜单默认情况是鼠标点击后出现下拉菜单,对于我们实际做网站时,需要把它改成鼠标悬停弹出下拉菜单。bootstrap下拉菜单鼠标悬停