CODEWITHSUNDEEP
jqueryhtmlcss
Murray Rowsell
Murray Rowsell

Reputation: 13

My dropdown menu moves the content below it

Sorry if this post isn't formatted correctly, this is my first SO post.

I have recently learned the basics of html, css, html5 and css3 and have been trying to expand what I can do and make better websites so I can start a portfolio and use more advanced techniques. The first thing I wanted to learn how to do is make a dropdown menu with jquery and after a few tutorials I managed to get it the way I like it.

The problem I'm having is that when my menu drops down all the content below the menu moves down with it, I looked for some solutions here and most people suggested making the position of the menu absolute and the z-index 100. This does stop the content from moving down, however it makes my dropdown menu go towards the right instead of dropping down.

Below I will post my HTML, CSS and JQuery (in the CSS I have removed the position:absolute and z-index:100 but it was under .navigation li ul)

$(function() {
  $('.btn').on('click', function() {
    var panelID = $(this).attr('data-panel');
    $('.' + panelID).fadeToggle(1000);
  });

});

$(document).ready(function() {
  $('.navigation li').hover(function() {
    $('ul', this).fadeIn();
  }, function() {
    $('ul', this).fadeOut();
  });
});
header,
nav,
footer,
section {
  display: block;
}

.container {
  width: 960px;
  background-color: dimgrey;
  margin: 0 auto;
  padding: 0;
}

.quadcol {
  width: 240px;
  float: left;
}

.clearfloat {
  clear: both;
}

.panelh {
  width: 200px;
  background-color: aquamarine;
  color: black;
}

.panel1,
.panel2,
.panel3,
.panel4 {
  width: 200px;
  background-color: white;
  color: black;
  margin-top: 10px;
  display: none;
}

h3 {
  font-size: 30px;
  padding: 5px;
  display: block;
  margin: 0;
}

.btn {
  align-self: center;
}

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation li {
  float: left;
  width: 190px;
  background-color: chartreuse;
  color: black;
  border: 1px solid dimgrey;
  text-align: center;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation li ul {
  display: none;
  text-align: center;
  float: left;
  padding: 0;
  margin: 0;
  z-index: 100;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  list-style: none;
}

.navigation li:hover {
  color: chartreuse;
  background-color: black;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation ul li:hover {
  color: chartreuse;
  background-color: black;
  margin-left: 5px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>
    <hgroup align="center">
      <h1>JQuery Test Website</h1>
      <h2>A website for testing my JQuery skills</h2>
    </hgroup>
    <nav>
      <ul class="navigation">
        <li>Item 1</li>
        <li>Item 2
          <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
            <li>Item 2.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5
          <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
            <li>Item 5.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
      </ul>
    </nav>
  </header>


  <div class="clearfloat"></div>



  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel1">Button 1</button>
    <div class="panel1">
      <div class="panelh">
        <h3>Panel 1</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel2">Button 2</button>
    <div class="panel2">
      <div class="panelh">
        <h3>Panel 2</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel3">Button 3</button>
    <div class="panel3">
      <div class="panelh">
        <h3>Panel 3</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel4">Button 4</button>
    <div class="panel4">
      <div class="panelh">
        <h3>Panel 4</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>

  <div class="clearfloat"></div>
</div>
<!--End of container div-->

Upvotes: 1

Views: 1422

Answers (1)

Chiller
Chiller

Reputation: 9738

You need to use position:absolute; on the ul tag and position:relative; on the li tag (parent of ul)

Absolute position will make the dropdown list out of the flow of the document, which will not affect the position of the other elements

See code snippet:

$(function() {
  $('.btn').on('click', function() {
    var panelID = $(this).attr('data-panel');
    $('.' + panelID).fadeToggle(1000);
  });

});

$(document).ready(function() {
  $('.navigation li').hover(function() {
    $('ul', this).fadeIn();
  }, function() {
    $('ul', this).fadeOut();
  });
});
header,
nav,
footer,
section {
  display: block;
}

.container {
  width: 960px;
  background-color: dimgrey;
  margin: 0 auto;
  padding: 0;
}

.quadcol {
  width: 240px;
  float: left;
}

.clearfloat {
  clear: both;
}

.panelh {
  width: 200px;
  background-color: aquamarine;
  color: black;
}

.panel1,
.panel2,
.panel3,
.panel4 {
  width: 200px;
  background-color: white;
  color: black;
  margin-top: 10px;
  display: none;
}

h3 {
  font-size: 30px;
  padding: 5px;
  display: block;
  margin: 0;
}

.btn {
  align-self: center;
}

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation li {
  float: left;
  width: 190px;
  background-color: chartreuse;
  color: black;
  border: 1px solid dimgrey;
  text-align: center;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  position:relative;
}

.navigation li ul {
  display: none;
  text-align: center;
  float: left;
  padding: 0;
  margin: 0;
  z-index: 100;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  list-style: none;
  position:absolute;
}

.navigation li:hover {
  color: chartreuse;
  background-color: black;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation ul li:hover {
  color: chartreuse;
  background-color: black;
  margin-left: 5px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>
    <hgroup align="center">
      <h1>JQuery Test Website</h1>
      <h2>A website for testing my JQuery skills</h2>
    </hgroup>
    <nav>
      <ul class="navigation">
        <li>Item 1</li>
        <li>Item 2
          <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
            <li>Item 2.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5
          <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
            <li>Item 5.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
      </ul>
    </nav>
  </header>


  <div class="clearfloat"></div>



  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel1">Button 1</button>
    <div class="panel1">
      <div class="panelh">
        <h3>Panel 1</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel2">Button 2</button>
    <div class="panel2">
      <div class="panelh">
        <h3>Panel 2</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel3">Button 3</button>
    <div class="panel3">
      <div class="panelh">
        <h3>Panel 3</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel4">Button 4</button>
    <div class="panel4">
      <div class="panelh">
        <h3>Panel 4</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>

  <div class="clearfloat"></div>
</div>
<!--End of container div-->

Upvotes: 3

Related Questions