The placement of the sliding navigation menu is consistently positioned beneath the header

I created a jQuery menu that's also available on JSfiddle here:

$(document).ready(function () {
    $(".navigation_button").on('click', function () {
    
    var $panel = $(this).next('.panel');
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } else {
      $panel.slideDown(500).addClass('active');
    }
    
    });
});
body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}


/* Navigation Mobile */

.navigation {
  width: 70%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua;
}

.navigation>nav {

}


.navigation>nav>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation>nav>ul li a {
  display: block;
  text-decoration: none;
  color: black;
}


/* Navigation Button */

.navigation_button {
 width: 20%;
 height: 60%;
 float: right;
 cursor: pointer;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: fuchsia;
}

.bar1, .bar2, .bar3 {
 width: 100%;
 height: 20%;
 margin: 4% 0;
 background-color: #333; 
}



/* Menu Content */

.menu_box {
 width: 100%;
 float: right;
 line-height: 2.0;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.panel{ 
 width: 100%;
 padding-left: 0%;
 cursor: pointer;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.button_menu {
 padding-left: 1%;
 background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
  Image
  </div>
  
  <div class="navigation">
  
    <div class="navigation_button">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    </div>

   <nav class="panel">

    <ul class="menu_box">
      <li class="button_menu"> 1.0 Menu </li>
      <li class="button_menu"> 2.0 Menu </li>
      <li class="button_menu"> 3.0 Menu </li>
    </ul>

   </nav>

  </div>
  
</div>

The menu functions perfectly when the .navigation_button is the same size as the .navigation.

However, I adjusted the height of the .navigation_button to height: 60%; and now clicking the button causes the .panel to appear below the .navigation_button instead of beneath the .header.


To address this issue, I attempted adding position:absolute; to the .panel while giving it the same height as the .header, but this resulted in the panel sliding in from the top of the page.

Another solution was closing the .header <div> after the .navigation_button, however, this caused the animation to cease functioning.


What adjustments must be made in the code to ensure that the .panel consistently appears directly below the .header, regardless of where the .navigation_button is positioned within the .header?

Answer №1

To position the .panel below the .header, you can set its position as absolute and align it 0 from the left and 100% from the top of its first non-static parent, which in this case is the .header (with a position value of fixed). This will ensure that the .panel appears below the .header. However, in the provided example, the .panel does not expand to cover the width of the blue .navigation element. If you want this behavior, then set the position of the .navigation element as relative.

Check out the demonstration below:

$(document).ready(function () {
    $(".navigation_button").on('click', function () {
    
    var $panel = $(this).next('.panel');
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } else {
      $panel.slideDown(500).addClass('active');
    }
    
    });
});
body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}


/* Navigation Mobile */

.navigation {
  position: relative; /* remove this if you want the panel to stretch further */
  width: 70%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua;
}

.navigation>nav {

}


.navigation>nav>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation>nav>ul li a {
  display: block;
  text-decoration: none;
  color: black;
}


/* Navigation Button */

.navigation_button {
 width: 20%;
 height: 60%;
 float: right;
 cursor: pointer;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: fuchsia;
}

.bar1, .bar2, .bar3 {
 width: 100%;
 height: 20%;
 margin: 4% 0;
 background-color: #333; 
}



/* Menu Content */

.menu_box {
 width: 100%;
 float: right;
 line-height: 2.0;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.panel{ 
 /* changes from here...*/
 position: absolute; 
 top: 100%;
 left: 0;
 /*...here*/
 
 width: 100%;
 padding-left: 0%;
 cursor: pointer;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.button_menu {
 padding-left: 1%;
 background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
  Image
  </div>
  
  <div class="navigation">
  
    <div class="navigation_button">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    </div>

   <nav class="panel">

    <ul class="menu_box">
      <li class="button_menu"> 1.0 Menu </li>
      <li class="button_menu"> 2.0 Menu </li>
      <li class="button_menu"> 3.0 Menu </li>
    </ul>

   </nav>

  </div>
  
</div>

Answer №2

Insert the following snippet into '.panel'

position: fixed;
top:50%;
left: 0;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Swapping the non-DOM element text with another content

Currently facing an issue in my project where I need to replace plain text inside a contenteditable element without being enclosed in a DOM element. Here, I'm extracting the textNode using window.getSelection(); and looking to perform a text replaceme ...

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

left-floating div

I am currently working on designing a page that requires multiple columns to be displayed. The columns should float left and never appear stacked on top of each other. Ideally, I would like the columns to extend beyond the screen without a scrollbar, makin ...

Google Docs integrated with JqueryMobile for seamless document creation and editing

Recently, I experimented with a plugin that allows for viewing pdf documents directly in the browser. While it worked flawlessly on my desktop browser, I encountered some display issues when trying to access it from my mobile device. The document didn&apos ...

Delay in form submission

I am attempting to auto-submit a form with its value after 10 seconds. I am having trouble incorporating a setTimeout function with the submit action. setTimeout(function() { $('#FrmID').submit(); }, 10000); $(document).ready(function() { ...

ajax - unable to fetch information from the same domain

UPDATE: The solution provided by Cavid Kərimov indeed works. By setting the form as shown below, it also resolves the issue. <form onsubmit="return false;"></form> I am attempting to fetch a simple text string from a PHP file using jQuery an ...

Transferring data asynchronously with AJAX to a PHP script

How can I send $username using PHP with data: new FormData(this),$username to the add.php file using AJAX code? <script type="text/javascript"> $(document).ready(function (e) { $("#uploadFormuserimg").on('submit',(function(e) { ...

navigate through laravel pagination to different pages

Is there a way to navigate to a particular page on the pagination? ...

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

Having trouble with jsoup parsing code not functioning properly on Android

I'm struggling with parsing HTML. My goal is to extract all the tables from the following website and retrieve the content of the second cell in each table. Below is the code I have written to achieve this. I added a TextView to display the extracted ...

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

Using either Javascript or JQuery to update every cell in a particular column of a table

I need to use a button to add "OK" in the Status column of table tblItem, which is initially empty. How can I achieve this using JavaScript or JQuery? The table has an id of tblItem Id Item Price Status 1 A 15 2 B 20 3 C ...

Unable to locate the Bootstrap CSS file when deploying on PythonAnywhere

I recently created an admin panel that integrates with a database. To automate the process of generating the admin panel, I utilized flask-admin. Running the server locally on my PC displayed the bootstrap swatch correctly and everything worked seamlessly. ...

An Illustrative Example of Inheritance in Javascript?

I've been searching on various platforms for a straightforward example of inheritance without much luck. The examples I've come across are either too complex, obscure, or just not user-friendly. I have multiple service functions that all share so ...

Does Internet Explorer have a tool similar to Firebug for debugging websites?

Is there a tool similar to Firebug that is compatible with Internet Explorer? Edit I am currently using IE8, so I need a solution that works specifically with IE8. ...

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

Deleting Data with Ajax in PHP Laravel

I am trying to delete some data from the database using Ajax. I have followed the steps below, but when attempting to delete, I encountered the following error: Failed to load resource: the server responded with a status of 404 (Not Found) This is my r ...

Tips on personalizing the default html template in nuxt

Struggling to customize the default page from my Nuxt app due to limited documentation. Link to Documentation I'm interested in extracting only certain elements like the title or links in the head section. For example, how can I access just the li ...

Unfortunately, Node Sass does not have compatibility with your current environment, which is Windows 64-bit with an unsupported runtime

Having been a regular user of Node.js to utilize gulp and sass for my HTML projects, I recently encountered a new issue. An error message stating "Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (57)" has no ...

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...