Радиус границы CSS отображается только после * jquery slideDown

Question

Радиус границы CSS отображается только после * jquery slideDown

0

Очень новый для jquery вот так легко на меня ;-)

Я экспериментирую с простым выпадающим меню.

Кажется, он работает нормально, но с одной небольшой проблемой.

Когда я наводил курсор на элемент меню level_1, слайд вниз включается, но настройки радиуса границы, определенные в css, кажутся только после того, как элементы level_2 соскользнули вниз.

В результате, когда div_2 div скользит вниз, края являются квадратными. Когда слайд вниз завершен, края округляются.

Я чувствую, что это может иметь какое-то отношение к дополнению. Я пробовал настройку padding на level_2 на 0 - проблема сохраняется с той, что находится слева. Кроме того, он ударяет по стилю повсюду, хотя там, вероятно, есть работа.

Я включил свой полный код ниже. Кто-нибудь знает, что здесь происходит? Это что-то очень простое или с самого начала требуется повтор? ;-)

Заранее спасибо Stef

* CSS *

<style>
.level_1 {
border-radius:15px;
border: 1px solid black;

margin: 0 1px 0 1px;
padding: 5px 10px;

width: 150px;
height: 20px;

font-family: Century Gothic;
font-size: 12px;
font-weight: 900;
color: #ffffff;

text-align: center;
vertical-align: text-bottom;

display: block;
list-style: none;
float: left;
z-index: 10;

background-color: #d800ff;
}

.level_2 {
display: block;
position: relative;
top: 10px;
left: -11px;

border: 1px solid black;
border-radius:15px;
margin: 1px 0 1px 0;
padding: 0;

width: 150px;

background-color: #b003cf;

font-family: Century Gothic;
font-size: 12px;
font-weight: 900;
color: #ffffff;

text-align: center;
vertical-align: text-bottom;

list-style: none;
}

a {
text-decoration: none;
}
</style>

*** The HTML ***
<nav class="container">
<div class="level_1">Item 1
<div>
<a class="level_2" href="#">Level 2 - Item 1</a>
<a class="level_2" href="#">Level 2 - Item 2</a>
<a class="level_2" href="#">Level 2 - Item 3</a>
</div>      
</div>

<div class="level_1">Item 2
<div>
<a class="level_2" href="#">Level 2 - Item 1</a>
</div>
</div>

<div class="level_1">Item 3
<div>
<a class="level_2" href="#">Level 2 - Item 1</a>
<a class="level_2" href="#">Level 2 - Item 2</a>
</div>
</div>

<div class="level_1">Item 4
<div>
<a class="level_2" href="#">Level 2 - Item 1</a>
<a class="level_2" href="#">Level 2 - Item 2</a>
<a class="level_2" href="#">Level 2 - Item 3</a>
<a class="level_2" href="#">Level 2 - Item 4</a>
</div>
</nav>

***The Jquery***
$('.level_1').hover(
function(){
$(this).children().stop().slideDown("slow");
},
function(){
jQuery.dequeue( this );
$(this).children().stop().slideUp("slow");
}
);

$('a').hover(
function(){
$(this).css("background-color","#9302ad");
},
function(){
$(this).css("background-color","#b003cf");
}
);
$('.level_1').children().hide();

mxbrainwrong 12 нояб. 2013, в 14:24

Источник

Теги:

jquery

css3

slidedown

1 ответ

Ещё вопросы

Turnip · Answer 1 · 2013-11-12T13-11-00.000Z

Я думаю, что проблема действительно связана с вашим дополнением, а также с относительным позиционированием подменю. Удаление left: -11px; и добавление box-sizing: border-box; к вашим a тег фиксирует это несколько (в Chrome по крайней мере)

DEMO

Могу ли я сделать предложение? Я лично нахожу этот способ структурирования этих типов меню более читабельным (и более предсказуемым)...

HTML:

<nav class="container">
    <ul>
        <li><a href="/">Item 1</a>
            <ul>
                <li><a class="level_2" href="#">Level 2 - Item 1</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 2</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 3</a></li>
            </ul>
        </li>
        <li><a href="/">Item 2</a>
            <ul>
                <li><a class="level_2" href="#">Level 2 - Item 1</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 2</a></li>
                <li><a class="level_2" href="#">Level 2 - Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

.container {
    margin-top: 40px;
}

.container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container > ul > li {
    display: inline-block;
    position: relative;

.container ul li a {
    display: block;
}

.container ul ul {
    position: absolute;
    left: 0;
    top: 30px;
    display: none;
}

Что также упрощает JQuery:

$('.container ul > li').mouseenter(function() {
   $('ul',this).stop().slideDown("slow");
}).mouseleave(function() {
    $('ul',this).stop().slideUp("slow");
});

DEMO

Очень ценится - спасибо. Я собираюсь поиграть с этим и включить его. Я думаю, что моя новизна очень очевидна. структура HTML, как это относится к меню и т. д. Еще раз спасибо ;-)