Creating a dynamic navigation bar with CSS and Javascript for maximum flexibility

Question

Creating a dynamic navigation bar with CSS and Javascript for maximum flexibility

I'm looking to create a menu that functions similarly to the image shown

The red arrow signifies that when I click on the button, it will toggle the visibility of the menu
The orange arrow indicates that when the menu is hidden, the box should expand in width and vice versa

https://i.sstatic.net/LP5cv.png

Currently, I have created the HTML structure, but I am facing a couple of issues

1) The sliding effect doesn't occur simultaneously with hiding/showing the content. I would like it to hide and slide at the same time.

            $("#menu_btn").on("click", function () {
                var menu = $("#left_menu #btn");
                if (menu.css('display') !== "none") {
                    $("#left_menu #btn").hide("slide", {direction: "left"}, 1000);
                } else {
                    $("#left_menu #btn").show("slide", {direction: "right"}, 1000);
                }
            });

2) How can I integrate code to adjust the width after the sliding effect? Additionally, the box is positioned absolutely within the container - how can I maintain the same top position after expanding/reducing the content?

$(".content #bg").css("width","600");
$(".content #bg").css("width","1000");

Thank you for any assistance provided.

javascript jquery html css

Answer 1

Answer №1

If you need a solution, try something similar to this example: https://jsfiddle.net/7k4kdmxu/4/

CSS:

.container{width:100%; margin:0 auto;}
nav{
   width:20%;
    float:left;
     background:#efefef; 
}
.openNav{ width:20%;}
#content.openNavContainer{ width:80%!important;}
.closeNav{width:10%;}
#content.closeNavContainer{ width:90%!important;}
#content{
    width:80%;
    float:right;
    background:#e9e9e9; 
}
nav ul {list-style:none;}
nav ul li{list-style:none; display:block;}

HTML

<div class="container">
<nav>
    <a href="#" id="open">Open -></a>
    <ul>

        <li><a href="#">HOME</a></li>
 <li><a href="#">ABOUT</a></li>
 <li><a href="#">OUT VALUE</a></li>
 <li><a href="#">SEASONAL</a></li>
        <li><a href="#">CONTACT</a></li>
   </ul>
    <a href="#" id="close"><- Close </a>
</nav>
    <div id="content"><p>Body Content Can Go Here</p></div>
</div>

JS/JQ

$(function(){
$("#open").click(function(){

    $("nav").addClass("openNav");
     $("nav").removeClass("closeNav");
    $("#content").addClass("openNavContainer");
    $("#content").removeClass("closeNavContainer");
});
$("#close").click(function(){
        $("nav").addClass("closeNav");
      $("nav").removeClass("openNav");
    $("#content").addClass("closeNavContainer");
    $("#content").removeClass("openNavContainer");
    });
});

Answer 2

If you need a solution, try something similar to this example: https://jsfiddle.net/7k4kdmxu/4/

CSS:

.container{width:100%; margin:0 auto;}
nav{
   width:20%;
    float:left;
     background:#efefef; 
}
.openNav{ width:20%;}
#content.openNavContainer{ width:80%!important;}
.closeNav{width:10%;}
#content.closeNavContainer{ width:90%!important;}
#content{
    width:80%;
    float:right;
    background:#e9e9e9; 
}
nav ul {list-style:none;}
nav ul li{list-style:none; display:block;}

HTML

<div class="container">
<nav>
    <a href="#" id="open">Open -></a>
    <ul>

        <li><a href="#">HOME</a></li>
 <li><a href="#">ABOUT</a></li>
 <li><a href="#">OUT VALUE</a></li>
 <li><a href="#">SEASONAL</a></li>
        <li><a href="#">CONTACT</a></li>
   </ul>
    <a href="#" id="close"><- Close </a>
</nav>
    <div id="content"><p>Body Content Can Go Here</p></div>
</div>

JS/JQ

$(function(){
$("#open").click(function(){

    $("nav").addClass("openNav");
     $("nav").removeClass("closeNav");
    $("#content").addClass("openNavContainer");
    $("#content").removeClass("closeNavContainer");
});
$("#close").click(function(){
        $("nav").addClass("closeNav");
      $("nav").removeClass("openNav");
    $("#content").addClass("closeNavContainer");
    $("#content").removeClass("openNavContainer");
    });
});

Creating a dynamic navigation bar with CSS and Javascript for maximum flexibility

Answer №1

Similar questions

Remove the border when the menu is clicked on and add an overlay

Creating styles with CSS to position text below an image

Tips for integrating jQuery AJAX with PHP arrays for efficient data handling

Save a JSON object from a URL into a JavaScript variable using jQuery

Buttons in Highcharts

The disadvantages of utilizing multiple Ajax requests

What is the proper way to utilize Vue and Buefy Tab components?

Implement dynamic routes within your Nuxt single page application once it has been generated

``I am having trouble getting the Bootstrap carousel to start

What is the reason behind the necessity of having event triggers created within the AJAX request?

Loss of Content Loaded into ViewModel in ASP.NET MVC 3 After Callback

jQuery dialog unexpectedly expanding to full page in web browser

How can I add data to a relational table that includes a foreign key reference?

Unable to prevent a touchend event from being canceled due to the event being non-cancelable, such as when scrolling is currently ongoing and cannot be disrupted

Unable to access GLB model after building it in Three.js

discord.js: Bot keeps sending duplicate embeds

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

What could be causing my Angular to malfunction?

Ensure that the search input field is in focus whenever the showSearch state is true

Encountering a challenge while rendering an Ajax partial using link_to to specify a controller action