根据父div的宽度左右浮动div

时间:2013-05-21 11:16:36

标签: jquery css3

很抱歉,如果标题令人困惑,因为我找不到适合自己问题的标题。但我肯定知道自己要实现的目标。

如果您查看http://applearn.tv/的下拉列表,那么您可以在鼠标悬停时看到下拉列表正在改变它的方向,即如果鼠标悬停在第一个菜单上,则div将从右向左显示,而最后一个菜单则从左侧显示对。目前这是静态的,但我想用jquery得到同样的概念。

对不起,我没有这个jsfiddle。

如果有任何教程或小提琴,请告诉我。

谢谢。

1 个答案:

答案 0 :(得分:0)

您可以通过检查窗口宽度,下拉框宽度和放大来找出下拉框的位置。导航项位置左侧

你可以尝试这个逻辑,当前导航的id左边坐标出现在窗口的左半部分然后应用float:left else apply float:right

代码:

    $('.navLink').click(showNavigation);

    function showNavigation() {

        var navigationItem = $(this);//Assuming this is anchor tag
        var holderItem = navigationItem.next('div.navigationItem');
        var windowWidth = $(window).width();
        var navigationLeft = navigationItem.offset().left;

        //Find current position, if this is greater than half of window width then apply float:left else float:right
        var currentPosition = (windowWidth - navigationLeft) + navigationItem.width();

        //class float_left_class stands of float:left and class float_rght_class stands for float:float_rght_class
        var holderClass = (currentPosition > windowWidth / 2) ? 'float_left_class' : 'float_rght_class';

        //remove previosly added class and add new class
        holderItem.removeClass('float_left_class float_rght_class').addClass(holderClass);

        //then show holder item
        holderItem.show();
    }

风格:

.float_left_class{
    float:left;
}

.float_rght_class{
    float:right;
}
.navigationItem{
    display:none;
}

HTML:

<ul>
    <li>
        <a href="#" class="navLink">Navigation 1 </a>
        <div class="navigationItem">Detail</div>
    </li>
</ul>