JQuery slide animation reveal div height issue

HTML & CSS
1

I’m building slide dropdown menu by using jQuery, but it expand my header height. I already set position: relative to parent but it doesn’t work. Hope anyone can fix my issue.

http://codepen.io/thehung1724/full/FnCKB/

2

Not in the code you’ve presented to us. :stuck_out_tongue:

Yes, set parent to position: relative and then the dropdown element to position: absolute. Rather than set it to display: none, it’s arguably better to position it way off screen and then move it back onto screen when hovering.

3

Yes, I’ll try it. Thank you.

4

Hi @ralphm

I’m using <ul> method to display select and tried your suggestion but it doesn’t work correctly. Please view my code and give me advice.

http://codepen.io/thehung1724/pen/IqsuJ

5

I can’t actually work out what you are trying to do here exactly?

You were using a nested list in the first example which would have worked if you had added Ralph’s code I believe.

In the last example you just have a straight list!

If you don’t want the revealed items to take up space in the flow of the page then they will need to be absolutely placed beneath the first item.

You may need to explain in a bit more detail what you are trying to achieve if the above is bot what you want.

6

Hi @PaulOB

I’ve tried Ralph’s code in the first example and it worked. With the second example, I’m used single list items and tried Ralph’s suggestion but it doesn’t work correctly.

I also updated my 2nd example.

7

Hi,

The second version is a bit awkward as you have no main container for the drop list items and therefore placing them absolutely underneath is going to be tricky.

You could just set a height to match the first list item and let the items overflow. This will still remove the drop items from the flow.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  padding: 0;
  margin: 0;
}
ul,
ol {
  list-style: none;
}
header {
  background-color: #dfdfdf;
}
.languages {
  font-family: "Source Sans Pro", sans-serif;
  margin: 0;
  padding: 0;
  width: 100px;
  margin: 100px auto 20px;
	position:relative;
  list-style-type: none;
	height:35px;
}
.languages li {
  display: none;
	line-height:35px;
}
.languages li a {
  background: none repeat scroll 0 0 #4c4a49;
  color: #a7a5a5;
  display: block;
  font-size: 0.85em;
  padding:0;
	line-height:35px;
  text-align: center;
  width: 60px;
}
.languages li a:hover {
  background: none repeat scroll 0 0 #333;
  border: medium none;
  color: #a7a5a5;
}
.languages li.active {
  display: block;
}
</style>
</head>

<body>
<header>
<ul class="languages">
    <li class="active">
      <a href="/fr/">FR<i class="fa fa-caret-down"></i></a>
    </li>
    <li><a href="/nl/">NL</a></li>
    <li><a href="/de/">DE</a></li>
    <li><a href="/en/">EN</a></li>
    <li><a href="/ru/">RU</a></li>
</ul>
</header>
<p>test</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
<script>
$(function () {
    $el_languages = $('.languages');
    $el_languages.hover(function () {
        $el_languages.find('li').show();
    }, function () {
        $el_languages.find('li:not(.active)').hide();
    });
});
</script>
</body>
</html>
1 Like
8

Thank you. It worked like a charm.