.fadeToggle меняет позиции моего div

Я пытаюсь создать простое меню навигации, которое, когда оно зависнет, исчезнет в небольшом цветном квадрате (div) над параметром item, который завис. Но когда элементы парят над квадратами, они не находятся в правильном положении. Я уверен, что если бы я изменил позицию на абсолютную, это исправило бы ее, но мне нужно, чтобы она была относительной, чтобы они могли поддерживать свое местоположение. Любая помощь приветствуется, большое вам спасибо.

CodePen

HTML:.fadeToggle меняет позиции моего div

<div id='navbar'> 
    <ul class='navmen'> 
    <a href='#' class='link'> 
     <li class='navitem' id='home'>HOME</li> 
    </a> 
    <a href='#' class='link'> 
     <li class='navitem' id='item2'>ITEM2</li> 
    </a> 
    <a href='#' class='link'> 
     <li class='navitem' id='item3'>ITEM3</li> 
    </a> 
    <a href='#' class='link'> 
     <li class='navitem' id='item4'>ITEM4</li> 
    </a> 
    </ul> 
</div> 
<ul class='navmen'> 
    <li class='itemam'> 
    <div class='divmen' id='divred'></div> 
    </li> 
    <li class='itemam'> 
    <div class='divmen' id='divorange'></div> 
    </li> 
    <li class='itemam'> 
    <div class='divmen' id='divblue'></div> 
    </li> 
    <li class='itemam'> 
    <div class='divmen' id='divgreen'></div> 
    </li> 
</ul>

CSS:

.navmen { 
    display: inline; 
    position: relative; 
    left: 230px; 
} 

.link { 
    text-decoration: none; 
    color: black; 
    display: inline; 
} 

.navitem { 
    font-family: 'Pragati Narrow', sans-serif; 
    display: inline; 
    padding-left: 80px; 
    padding-right: 80px; 
    font-size: 22px; 
} 

.navitem:hover { 
    background-color: #CCCCCC; 
} 

.divmen { 
    background-color: black; 
    width: 210px; 
    height: 10px; 
} 

#divred { 
    background-color: red; 
    position: relative; 
    bottom: 77px; 
    left: 40px; 
    display: none; 
} 

#divorange { 
    background-color: orange; 
    position: relative; 
    left: 250px; 
    bottom: 107px; 
    display: none; 
} 

#divblue { 
    background-color: blue; 
    position: relative; 
    left: 460px; 
    bottom: 137px; 
    display: none; 
} 

#divgreen { 
    background-color: green; 
    position: relative; 
    bottom: 167px; 
    left: 670px; 
    display: none; 
}

JavaScript:

$(document).ready(function() { 
    $('#home').hover(function() { 
    $('#divred').fadeToggle('slow') 
    }) 
}); 
$(document).ready(function() { 
    $('#item2').hover(function() { 
    $('#divorange').fadeToggle('slow') 
    }) 
}); 
$(document).ready(function() { 
    $('#item3').hover(function() { 
    $('#divblue').fadeToggle('slow') 
    }) 
}); 
$(document).ready(function() { 
    $('#item4').hover(function() { 
    $('#divgreen').fadeToggle('slow') 
    }) 
});

источник

2015-05-22 Joshua

Если вы раскладывая предметы, используя 'position', то вы, вероятно, делать что-то в корне неправильно и' fade' не то, что вы после , Позиционирование используется для конкретных эффектов, а не для общей компоновки. –

Кроме того, ваш HTML недопустим. Ссылки должны быть ** внутри ** элементов списка. Единственным действительным дочерним элементом (ul) 'ul' является' li' –

пожалуйста, проверьте следующий код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('#home').hover(function() { 
 
    $('#divred').fadeToggle('slow') 
 
    }) 
 
    $('#item2').hover(function() { 
 
    $('#divorange').fadeToggle('slow') 
 
    }) 
 
    $('#item3').hover(function() { 
 
    $('#divblue').fadeToggle('slow') 
 
    }) 
 
    $('#item4').hover(function() { 
 
    $('#divgreen').fadeToggle('slow') 
 
    }) 
 
}); 
 
</script> 
 
<style type="text/css"> 
 
.navmen { 
 
    display: inline; 
 
    position: relative; 
 
    left: 230px; 
 
} 
 

 
.link { 
 
    text-decoration: none; 
 
    color: black; 
 
    display: inline; 
 
} 
 

 
.navitem { 
 
    font-family: 'Pragati Narrow', sans-serif; 
 
    display: inline; 
 
    padding-left: 80px; 
 
    padding-right: 80px; 
 
    font-size: 22px; 
 
} 
 

 
.navitem:hover { 
 
    background-color: #CCCCCC; 
 
} 
 

 
.itemam{ 
 
    height: 18px; 
 
} 
 

 
.divmen { 
 
    width: 210px; 
 
    display:none; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id='navbar'> 
 
    <ul class='navmen'> 
 
    <a href='#' class='link'> 
 
     <li class='navitem' id='home'>HOME</li> 
 
    </a> 
 
    <a href='#' class='link'> 
 
     <li class='navitem' id='item2'>ITEM2</li> 
 
    </a> 
 
    <a href='#' class='link'> 
 
     <li class='navitem' id='item3'>ITEM3</li> 
 
    </a> 
 
    <a href='#' class='link'> 
 
     <li class='navitem' id='item4'>ITEM4</li> 
 
    </a> 
 
    </ul> 
 
</div> 
 
<ul class='navmen'> 
 
    <li class='itemam'> 
 
    <div class='divmen' id='divred'>divred</div> 
 
    </li> 
 
    <li class='itemam'> 
 
    <div class='divmen' id='divorange'>divorange</div> 
 
    </li> 
 
    <li class='itemam'> 
 
    <div class='divmen' id='divblue'>divblue</div> 
 
    </li> 
 
    <li class='itemam'> 
 
    <div class='divmen' id='divgreen'>divgreen</div> 
 
    </li> 
 
</ul> 
 
</body> 
 
</html>

источник

2015-05-22 12:38:22

Я думаю, что вы хотите что-то вроде этого.

Нет JS/JQ требуется

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.navmen { 
 
    margin-top: 25px; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 
.navitem { 
 
    font-family: 'Pragati Narrow', sans-serif; 
 
    display: inline-block; 
 
    border-top: 10px solid transparent; 
 
    transition: border .5s ease; 
 
} 
 
.navitem a { 
 
    text-decoration: none; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    font-size: 22px; 
 
    display: block; 
 
    color: #000; 
 
} 
 
.navitem:hover a { 
 
    background: #ccc; 
 
} 
 
.red:hover { 
 
    border-top-color: red; 
 
} 
 
.green:hover { 
 
    border-top-color: green; 
 
} 
 
.blue:hover { 
 
    border-top-color: blue; 
 
}

<div id="navbar"> 
 
    <ul class="navmen"> 
 
    <li class="navitem red" id="home"><a href="#">HOME</a> 
 
    </li> 
 
    <li class="navitem green" id="item2"><a href="#">ITEM2</a> 
 
    </li> 
 
    <li class="navitem blue" id="item3"><a href="#">ITEM3</a> 
 
    </li> 
 
    </ul> 
 
</div>

источник

2015-05-22 13:08:55

.fadeToggle меняет позиции моего div

ответ

Смежные вопросы