Home/ Questions/Q 9130981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:03:51+00:00

want that the navigation menu moves up & content moves left when the sidebar

  • 0

want that the navigation menu moves up & content moves left when the sidebar is moved (slide) using jquery ?
i am making a structure for my web page and using jquery to slide navigation & sidebar but the content & footer remains where it is and the removed portion is empty, so how to make it interdependent ? 

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
 $("#slidesidebar").click(function(){
    $("#sidebar").slideToggle("slow");
    }); 
}); 
</script>

<style type="text/css">
nav {
    position: fixed;
    left:15%;
    top: 0;
    width: 100%;
    height: 6%;
    background: #555;
  }

  #content {
    position: relative; 
    top:auto;
    width:85%;
    top:6%;
    margin: 0 0 auto auto;
    background:black;
  }

  #main {
  }

  #sidebar{
    position: fixed;
    left:0;
    width:15%;
    color: white;
    background:green;
  }

  footer {
    width: 100%; 
    position: fixed;
    opacity:0.8;
    bottom: 0;
    height:5%;
    left:0;
    background:red;
  } 
 </style>
</head>

<body>

<div id="sidebar">
Sidebar Content
Sidebar Content
</div>

<nav>
Navigation Menu
</nav>

    <div id="content">
        <div id="main" align="center">
Content
</div>


        <footer>
<button style="font-size: .8em;" id="slidesidebar">Flip Side-Search</button>
       Footer
        </footer>

</div>    
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can pass a function to the slideToggle to be called when the animation is complete. There you can manipulate the content how ever you like.

    $("#sidebar").slideToggle("slow", function(){
 $("#content").css({width:"100%", float:"left"});
 });

    Or you could have the content grow at the same time:

    $(document).ready(function(){
 $("#slidesidebar").click(function(){
   $("#sidebar").slideToggle("slow");
    $("#content").animate({width:"100%"});
   }); 
});

    If this doesn’t do the trick, try playing with the “float” parameter of content.

    • 0