Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы Как сделать такое окно с выбором

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


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

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

Комментарии пользователей (4)

venrom
3

60 | 13

venrom - 24 августа 2013 21:23 - Юзер

вот 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>                    

Exile
17

235 | 68

Exile - 24 августа 2013 21:25 - Гости

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

venrom
3

60 | 13

venrom - 24 августа 2013 21:27 - Юзер

вот 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;
}

venrom
3

60 | 13

venrom - 24 августа 2013 22:11 - Юзер

спасибо!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы