css 可能是 jquery 帮助

Question

我的设计师设计了以下导航

他希望实现它，以便导航下方的暗栏动画到当前页面加载页面（想想进度条）。对于 PHP 来说没有明显的问题，我可以对其进行排序，以便当前的 a 有一个类，这样我就可以识别当前页面，但是我不知道如何为导航下方的栏设置动画，有人有吗建议？

Answer 1

你可以尝试这个 jquery 插件：
http://grasshopperpebbles.com/ajax/a-jquery-progress-bar-插件/

Answer 2

抱歉，我会在这里发帖。

我认为你需要一个 div 内的 div 。外部 div（代表导航下方的整行）需要是整个导航的宽度。然后，您可以使用 jquery 将内部 div（进度条）设置为与上面的 nav 元素相同的宽度，并将其左侧位置设置为您已添加类的导航项的位置。

类似的东西

$(document).ready(function(){

    $('.selectedNav').click(function(){

    var navWidth = $(this).width();
    var posLeft = $(this).position();

    $('#innerDiv').animate({'width': navWidth, 'left': posLeft.left});

    });

});

Answer 3

• 制作一个绿色框的图像，其中包含文本和栏“剪切”（例如透明），
• 将其放入
• 中，放置另一个 div一：
• 将“进度”div 的宽度设置为第 1 步的 90 像素、第 2 步的 195 像素、第 3 步的 278 像素、第 4 步的 414 像素
• 如果需要，请使用 jQuery 动画进行设置: $.animate({width: 195}) 使其滚动。

执行此操作，您的栏和文本都会移动。

如果您不关心文本，请跳过图像部分，只需制作一个灰色 div 来执行相同的操作。

有关动画效果，请参见 www.vouchr.com。