jQuery仿百度知道宽屏导航下拉菜单代码

jQuery仿百度知道宽屏导航下拉菜单代码

这是一款jQuery仿百度知道导航菜单,绿色宽屏的下拉导航菜单样式代码。这是一款非常实用的宽屏导航菜单代码。

使用方法
在页面引入相关JS文件jquery.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
$('.nav-menu-content-box').hover(function() {
  $(this).addClass('dow-hover');
  $(".nav-menu-content").show('slow');
}, function() {
  $(this).removeClass('dow-hover');
});
   
});
   
var maxHeight = 400;
   
$(function(){
   
$(".nav-menu-content-box > li").hover(function() {
   
  var $container = $(this),
      $list = $container.find("ul"),
      $anchor = $container.find("a"),
      height = $list.height() * 1.1,
      multiplier = height / maxHeight;
   
  $container.data("origHeight", $container.height());
   
  $anchor.addClass("hover");
   
  $list
      .show()
      .css({
          paddingTop: $container.data("origHeight")
      });
   
  if (multiplier > 1) {
      $container
          .css({
              height: maxHeight,
              overflow: "hidden"
          })
          .mousemove(function(e) {
              var offset = $container.offset();
              var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
              if (relativeY > $container.data("origHeight")) {
                  $list.css("top", -relativeY + $container.data("origHeight"));
              };
          });
  }
   
}, function() {
   
  var $el = $(this);
   
  $el
      .height($(this).data("origHeight"))
      .find("ul")
      .css({ top: 0 })
      .hide()
      .end()
      .find("a")
      .removeClass("hover");
   
});
   
});
</script>

CSS样式

1
2
<link href="css/base.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>

文件信息:

    0

    发表评论