如何使用相对定位进行最佳编码以跨越整个div

时间：2014-09-17 05:06:53

标签： css

我正在尝试创建一个Tiffany＆amp; Co样式的过滤器选择器菜单。 请参阅：http://www.tiffany.com/shopping/CategoryBrowse.aspx?mcat=148206&cid=288196#p+1-n+10000-c+288196-s+5-r+-t+-ni+1-x+-pu+-f+-lr+-hr+-ri+-mi+-pp+

附件是指向我的jsfiddle的链接：http://jsfiddle.net/ger9tdxw/1/

每个＆＃39;下拉列表的宽度＆＃39;是自动的，我遇到通过CSS硬编码位置的问题。 

.filter-dropdown.gemstones .dropdown {
  /* Size & position */
    position: absolute;
    top: 32px;
    left: -182px;
    right: 0;
    width: 870px;
    padding-left: 172px;

    border: none;

    border-top: 1px dotted #000;
    border-bottom: 1px solid #000;
}

即。 ：点击资料＆gt;纯银 - 将导致向右推动第二个下拉列表，从而弄乱我设置的定位。

正如您所看到的，我使用非常原始的方法来使用left定位下拉列表：-px;和填充来定位它们。有更好的方法吗？

我在css上的表现并不是很好，所以任何建议/指针都会受到赞赏！

2 个答案:

答案 0 :(得分：0)

你的小提琴里的东西看起来过于复杂。你正在使用jquery anywhay，所以为什么不用它来定位。我会在导航中使用链接，因为它们实际上是有效的，并使用ids将它们链接到页面的相关部分。这个alos简化了jquery。这是我的粗略和准备好的改编：

HTML 

<div class="container">
    <div class="nav">
        <h4>Rings</h4><span class="count">7</span>
        <a href="#lstMaterials" class="materials">Materials</a>
        <a href="#lstGems" class="gems">Gemstones</a>
        <a href="#lstPrice" class="price">Price</a>
    </div>
    <div id="dropDownContainer" style="margin-left:1px">
        <ul id="lstMaterials" class="materials dropdown">
                        <li><a href="#"><i class="icon-envelope icon-large"></i>Sterling Silver</a>
            </li>
            <li><a href="#"><i class="icon-truck icon-large"></i>Gold</a>
            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>White Gold</a>
            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Rose Gold</a>
            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Titanium</a>
            </li>
        </ul>
        <ul id="lstGems" class="dropdown gems">
            <!-- etc -->
        </ul>
        <ul id="lstPrice" class="dropdown price">
            <!-- etc -->
        </ul>

    </div>
</div>

CSS 

.nav
{
    position:relative;

}

.nav h4 
{
    display:inline-block;
    margin-right:2px;
}

.nav .count:before
{
    content:"(";

}

.nav .count:after
{
    content:")";
    margin-right:5px;
}

.nav a 
{
    display:inline-block;
    padding-right: 20px;
}

#dropDownContainer
{
    position:relative;
}

#dropDownContainer ul
{
    list-style-type:none;
    padding:0;
}

.dropdown {display:none;}

#dropDownContainer ul
{
    border-top:dotted 1px black;
    border-bottom:dotted 1px black;
    padding-top:10px;
    padding-bottom:10px;
}

的Javascript 

/*Set Position of dropdowns*/
var mrgnLeft = $(".nav .materials").position().left + "px";
$("#lstMaterials").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .gems").position().left + "px";
$("#lstGems").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .price").position().left + "px";
$("#lstPrice").css("padding-left",mrgnLeft);


/*Show them on click*/
$(".nav a").click(function(){
     $("#dropDownContainer .dropdown").hide();
    console.log($(this).attr("href"));
    console.log( $($(this).attr("href")))
     $($(this).attr("href")).show();
    return false; //stops the native link behaviour
});

Demo

这应该让你朝着正确的方向前进。您可以轻松重新hide()并显示add\removeClass("active")并根据需要添加CSS

答案 1 :(得分：0)

我修改了HTML，CSS和Javascript。

以下是代码：

function DropDownFilter(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDownFilter.prototype = {
    initEvents: function () {
        var obj = this;
        obj.dd.on('click', function (event) {
            $(this).toggleClass('active');
            return false;
        });
        obj.opts.on('click', function () {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue: function () {
        return this.val;
        $('.filter-dropdown').removeClass('active');
    },
    getIndex: function () {
        return this.index;
    },
}

$(function () {
    var dd = new DropDownFilter($('#fdd'));
    var dd = new DropDownFilter($('#fdd2'));
    var dd = new DropDownFilter($('#fdd3'));
    $('.filter-dropdown').each(function () {
        var self = $(this);
        self.width(self.width());
    });
    $(document).click(function () {
        // all dropdowns			
        $('.filter-dropdown').removeClass('active');
    });

    $(".filter-dropdown").click(function () {
        // all dropdowns			
        $('.filter-dropdown').not(this).removeClass('active');
    });
});
@import url(http://fonts.googleapis.com/css?family=Lato:300, 400, 700);
 @import url(http://fonts.googleapis.com/css?family=Lora);
 *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
}
.filter-dropdown {
    line-height: 12px;
    padding: 0px;
    /* Styles */
    cursor: pointer;
    outline: none;
    /* Font settings */
    font-family: Lato;
    font-size: 11px;
    z-index: 9999;
}
.filter-dropdown .dropdown:after {
    content:"";
    position: absolute;
    left: 0px;
    top: 50px;
    right: 0px;
    bottom: 0px;
    border: 1px solid #EFEFEF;
    border-top-style: dotted;
    z-index: -1;
}
.filter-dropdown .dropdown {
    font-weight: normal;
    margin-top: 25px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    list-style: none;
    /* Hiding */
    display: none;
    pointer-events: none;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-top-right: 0px;
}
.main {
    line-height: 37px;
    width: 100%;
    display: table;
    position: relative;
}
.main > div {
    display: table-cell;
}
.main > div:first-child {
    width: 120px;
}
ul, li {
    padding: 0px;
    margin: 0px;
}
.filter-dropdown .dropdown li a {
    display: block;
    padding: 10px;
    padding-left: 0px;
    text-decoration: none;
    color: #999999;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.filter-dropdown .dropdown li i {
    float: right;
    color: inherit;
}
.filter-dropdown .dropdown li:first-of-type a {
}
.filter-dropdown .dropdown li:last-of-type a {
    border: none;
}
/* Hover state */
 .filter-dropdown .dropdown li:hover a {
    color: #8BABD1;
}
/* Active state */
 .filter-dropdown.active .dropdown {
    display: block;
    pointer-events: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="main">
    <div>
         <h4 style="font-size: 20px; display: inline;">Rings </h4><span style="margin-right: 30px; letter-spacing: 1px;">(7)</span>

    </div>
    <div id="fdd" class="filter-dropdown materials" tabindex="1">	<span>Materials</span>

        <ul class="dropdown">
            <li><a href="#"><i class="icon-envelope icon-large"></i>Sterling Silver</a>

            </li>
            <li><a href="#"><i class="icon-truck icon-large"></i>Gold</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>White Gold</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Rose Gold</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Titanium</a>

            </li>
        </ul>
    </div>
    <div id="fdd2" class="filter-dropdown gemstones" tabindex="1">	<span>Gemstones</span>

        <ul class="dropdown">
            <li><a href="#"><i class="icon-envelope icon-large"></i>Aquamarine</a>

            </li>
            <li><a href="#"><i class="icon-truck icon-large"></i>Colored Diamond</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Colored Gemstones</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Onyx</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Pearls</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Sapphire</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>Turquoise</a>

            </li>
        </ul>
    </div>
    <div id="fdd3" class="filter-dropdown price" tabindex="1">	<span>Price</span>

        <ul class="dropdown">
            <li><a href="#"><i class="icon-envelope icon-large"></i>$100 - 500</a>

            </li>
            <li><a href="#"><i class="icon-truck icon-large"></i>$500 - 1000</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>$1000 - 3000</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>$3000 - $7000</a>

            </li>
            <li><a href="#"><i class="icon-plane icon-large"></i>$7000++</a>

            </li>
        </ul>
    </div>
</div>

<强> Working Fiddle

相关问题
最新问题