Question

这是我第一次在任何项目中使用JQuery。

我已经实现了superfish菜单。

在我的某些页面上，我有一个水平滚动条。当页面滚动时，我想让菜单浮动在页面的中心。

另外，我需要确保菜单最右侧的子菜单不会打开页面。当我将鼠标悬停在最右边的元素上时，它会向页面开出一半。

关于如何解决这两件事的任何想法？

我非常愿意使用不同的Jquery菜单，如果有一个更好的内置这些功能......

谢谢！

javascrupt在我的页面中调用：

$(document).ready(function () {
        $("ul.sf-menu").supersubs({
            minWidth: 12,   // minimum width of sub-menus in em units 
            maxWidth: 27,   // maximum width of sub-menus in em units 
            extraWidth: 1     // extra width can ensure lines don't sometimes turn over 
            // due to slight rounding differences and font-family 
        }).superfish({ animation: { opacity: 'show', height: 'show' }, autoArrows: false });  // call supersubs first, then superfish, so that subs are 
        // not display:none when measuring. Call before initialising 
        // containing tabs for same reason.

我可以发布任何需要的代码，但是superfish文件中有很多代码，所以我不确定应该发布什么。

我发现这个脚本并且运行良好，但是当我向右滚动时，水平菜单开始堆叠，所以菜单项并排而不是垂直。我想修改它以保持菜单水平......

<script type="text/javascript"><!--
            var floatingMenuId = 'floatdiv';
            var floatingMenu =

{ targetX：-1000， targetY：10，

hasInner: typeof (window.innerWidth) == 'number',
hasElement: document.documentElement
    && document.documentElement.clientWidth,

menu:
    document.getElementById
    ? document.getElementById(floatingMenuId)
    : document.all
      ? document.all[floatingMenuId]
      : document.layers[floatingMenuId]

};

            floatingMenu.move = function () {
                if (document.layers) {
                    floatingMenu.menu.left = floatingMenu.nextX;
                    floatingMenu.menu.top = floatingMenu.nextY;
                }
                else {
                    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
                    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
                }
            }

            floatingMenu.computeShifts = function () {
                var de = document.documentElement;

                floatingMenu.shiftX =
    floatingMenu.hasInner
    ? pageXOffset
    : floatingMenu.hasElement
      ? de.scrollLeft
      : document.body.scrollLeft;
                if (floatingMenu.targetX < 0) {
                    if (floatingMenu.hasElement && floatingMenu.hasInner) {
                        // Handle Opera 8 problems    
                        floatingMenu.shiftX +=
            de.clientWidth > window.innerWidth
            ? window.innerWidth
            : de.clientWidth
                    }
                    else {
                        floatingMenu.shiftX +=
            floatingMenu.hasElement
            ? de.clientWidth
            : floatingMenu.hasInner
              ? window.innerWidth
              : document.body.clientWidth;
                    }
                }

                floatingMenu.shiftY =
    floatingMenu.hasInner
    ? pageYOffset
    : floatingMenu.hasElement
      ? de.scrollTop
      : document.body.scrollTop;
                if (floatingMenu.targetY < 0) {
                    if (floatingMenu.hasElement && floatingMenu.hasInner) {
                        // Handle Opera 8 problems    
                        floatingMenu.shiftY +=
            de.clientHeight > window.innerHeight
            ? window.innerHeight
            : de.clientHeight
                    }
                    else {
                        floatingMenu.shiftY +=
            floatingMenu.hasElement
            ? document.documentElement.clientHeight
            : floatingMenu.hasInner
              ? window.innerHeight
              : document.body.clientHeight;
                    }
                }
            }

            floatingMenu.doFloat = function () {
                var stepX, stepY;

                floatingMenu.computeShifts();

                stepX = (floatingMenu.shiftX +
    floatingMenu.targetX - floatingMenu.nextX) * .07;
                if (Math.abs(stepX) < .5) {
                    stepX = floatingMenu.shiftX +
        floatingMenu.targetX - floatingMenu.nextX;
                }

                stepY = (floatingMenu.shiftY +
    floatingMenu.targetY - floatingMenu.nextY) * .07;
                if (Math.abs(stepY) < .5) {
                    stepY = floatingMenu.shiftY +
        floatingMenu.targetY - floatingMenu.nextY;
                }

                if (Math.abs(stepX) > 0 ||
    Math.abs(stepY) > 0) {
                    floatingMenu.nextX += stepX;
                    floatingMenu.nextY += stepY;
                    floatingMenu.move();
                }

                setTimeout('floatingMenu.doFloat()', 20);
            };

            // addEvent designed by Aaron Moore    
            floatingMenu.addEvent = function (element, listener, handler) {
                if (typeof element[listener] != 'function' ||
   typeof element[listener + '_num'] == 'undefined') {
                    element[listener + '_num'] = 0;
                    if (typeof element[listener] == 'function') {
                        element[listener + 0] = element[listener];
                        element[listener + '_num']++;
                    }
                    element[listener] = function (e) {
                        var r = true;
                        e = (e) ? e : window.event;
                        for (var i = element[listener + '_num'] - 1; i >= 0; i--) {
                            if (element[listener + i](e) == false)
                                r = false;
                        }
                        return r;
                    }
                }

                //if handler is not already stored, assign it    
                for (var i = 0; i < element[listener + '_num']; i++)
                    if (element[listener + i] == handler)
                        return;
                element[listener + element[listener + '_num']] = handler;
                element[listener + '_num']++;
            };

            floatingMenu.init = function () {
                floatingMenu.initSecondary();
                floatingMenu.doFloat();
            };

            // Some browsers init scrollbars only after    
            // full document load.    
            floatingMenu.initSecondary = function () {
                floatingMenu.computeShifts();
                floatingMenu.nextX = floatingMenu.shiftX +
    floatingMenu.targetX;
                floatingMenu.nextY = floatingMenu.shiftY +
    floatingMenu.targetY;
                floatingMenu.move();
            }

            if (document.layers)
                floatingMenu.addEvent(window, 'onload', floatingMenu.init);
            else {
                floatingMenu.init();
                floatingMenu.addEvent(window, 'onload',
    floatingMenu.initSecondary);
            }    

    </script>

Answer 1

我不确定你的中心方式，但如果你的意思是水平居中：

你能将主页（水平溢出）和菜单分成单独的div吗？ e.g。

<div id="menu"><center><ul class="sf-menu">...</ul></center></div>
<div id="mainpage" style="overflow:auto;">Contents goes here</div>

（<center>标记可能必须为<div style="width:X;margin:0 auto;">，具体取决于超级鱼的工作方式）

在页面上的菜单上，抱歉，我不得不推迟给那些更有名的人回答。

JQuery菜单浮动并显示页面上的子菜单

1 个答案: