Как сделать такое окно с выбором

venrom 24.08.2013 Общие вопросы, Стили (CSS) 3365

вопрос

Всем привет,подскажите как сделать такое окно,чтобы при щелчке открывалось при повторном щелчке закрывалось,пробовал с display:none и display:block ничего невыходит,окно остается в том же состоянии,т.е и не открывается и не закрывается,а все время открыто

Ответил: Exile

Пароль: dle-faq.ru

4 комментария

Юзер

venrom - 2015-05-1524 августа 2013 21:23 - #15917

вот html

<div class="wrapFilter">
                                            <div class="genresFilter catFilter showList">
                                            <div class="titleFilter">
                                            <span>Все жанры</span>
                                            </div>
                                                <ul>
                                                    <li>
                                                    <a href="http://localhost/tags/RPG/">RPG</a>
                                                    </li>
                                                    <li>
                                                    <a href="http://localhost/tags/RPG/">Экшен</a>
                                                    </li>
                                                    <li>
                                                    <a href="http://localhost/tags/RPG/">Симулятор</a>
                                                    </li>
                                                    <li>
                                                    <a href="http://localhost/tags/RPG/">Стратегия</a>
                                                    </li>
                                                </ul>
                                            </div>
                    </div>

Гости

235

Exile - 2015-05-1524 августа 2013 21:25 - #15918

Кинь еще CSS, и сможешь сам ответить на свой вопрос..

Юзер

venrom - 2015-05-1524 августа 2013 21:27 - #15919

вот css

.wrapFilter {
display: inline-block;
margin-left: 76px;
position: absolute;
vertical-align: bottom;
margin-top: -60px;
}

.wrapFilter .titleFilter {
vertical-align: top;
display: inline-block;
padding-right: 12px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAYAAABbNsX4AAAAGXRF…BVHjaYly1++R/BjTAFOpixogsAOb///8fjEE6YGyAAAMAmQUT8quXtLkAAAAASUVORK5CYII=") no-repeat right center;
line-height: 0;
margin-top: 15px;
position: relative;
}

.wrapFilter .titleFilter span {
    border-bottom: 1px dotted;
    color: #3B6D96;
    cursor: pointer;
    display: inline-block;
    font: 15px/1 "PT Sans",helvetica,"segoe UI",arial,sans-serif;
}
.wrapFilter .catFilter ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    display: none;
    left: -16px;
    padding: 0 15px 15px;
    position: absolute;
    top: -1px;
    width: 150px;
    z-index: 1;
}
.wrapFilter .catFilter ul {
    padding-top: 45px;
}

.wrapFilter .catFilter {
    float: left;
    margin-right: 30px;
    position: relative;
}
.wrapFilter .catFilter.showList ul {
    display: block;
}
.wrapFilter .catFilter ul {
    display: none;
}

.wrapFilter .catFilter ul li:first-child {
    line-height: 45px;
}
.wrapFilter .catFilter ul li:first-child {
    border-bottom: 0 none;
    border-top: 1px solid #E2E2E2;
}

.wrapFilter .catFilter.showList .titleFilter {
    z-index: 10;
    margin-top:20px;
}
.wrapFilter .catFilter.showList .titleFilter {
    background: none repeat scroll 0 0 transparent;
}
.wrapFilter .catFilter ul li a {
    color: #8A8A8A;
    display: block;
    font: 15px/2 "PT Sans",helvetica,"segoe UI",arial,sans-serif;
    margin: 0 -15px;
    padding: 0 15px;
}


.wrapFilter .catFilter ul li a {
    color: #8A8A8A;
    display: block;
    font: 15px/2 "PT Sans",helvetica,"segoe UI",arial,sans-serif;
    margin: 0 -15px;
    padding: 0 15px;
}
a, .entity, .ava .userName, .thisEmbedLink h6 {
    color: #3B6D96;
}

a {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    cursor: pointer;
    font-size: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline;
}
a, img {
    border: medium none;
    outline: medium none;
}

.wrapFilter .catFilter ul li:hover a {
color: #3b6d96;
background: #e5f3f5;
}