Dynamic resizing navigation with JQUERY

Question

Dynamic resizing navigation with JQUERY

I have successfully created a navigation menu that dynamically resizes each list item to fit the entire width of the menu using JavaScript.

$(function() {

    changeWidth(500);

    function changeWidth(menuWidth){
        var menuItems = $('#menu li').size();
        var itemWidth = (menuWidth/menuItems)-2;

        $('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

You can see it in action here.

I was wondering if there is a way to set the width to be 100% instead of declaring an absolute width like I currently have (500px)?

Thanks in advance!

javascript jquery css navigation

Answer 1

Answer №1

Check out this improved demonstration: http://jsfiddle.net/MZ2wt/2/

This code essentially adjusts the width based on the <body>. Keep in mind that if your element is not a direct child of body, the results may be unusual. To avoid this, consider passing a reference to the element being resized and use $(this).parent().width() instead of $("body").width()

Answer 2

Check out this improved demonstration: http://jsfiddle.net/MZ2wt/2/

This code essentially adjusts the width based on the <body>. Keep in mind that if your element is not a direct child of body, the results may be unusual. To avoid this, consider passing a reference to the element being resized and use $(this).parent().width() instead of $("body").width()

Answer 3

Answer №2

Adjust the CSS to make the menu 100% width, then modify your function to calculate the menu width and resize the <li> elements accordingly.

Consider using the width() method instead of the css() method to set the width without needing to add "px" at the end of the value.

Additionally, you can implement a resize handler that triggers your function when the window size changes...

Answer 4

Adjust the CSS to make the menu 100% width, then modify your function to calculate the menu width and resize the <li> elements accordingly.

Consider using the width() method instead of the css() method to set the width without needing to add "px" at the end of the value.

Additionally, you can implement a resize handler that triggers your function when the window size changes...

Answer 5

Answer №3

After reviewing the jsFiddle example, it appears that you are seeking to make the LI elements' width equal to the UL's width divided by the number of LI elements.

I have made some modifications to your jsFiddle. I changed the LI elements to float left instead of using display inline because inline elements cannot have fixed widths. Additionally, I set the LI elements to have text-align center and transferred the float left property from the A element to the LI element.

You can view the updated jsFiddle here: http://jsfiddle.net/ABC123/27/

$(function() {
    var lis = $('#menu ul li');
    lis.css('width', ($('#menu ul').outerWidth() / lis.length) + 'px');
});

Answer 6

After reviewing the jsFiddle example, it appears that you are seeking to make the LI elements' width equal to the UL's width divided by the number of LI elements.

I have made some modifications to your jsFiddle. I changed the LI elements to float left instead of using display inline because inline elements cannot have fixed widths. Additionally, I set the LI elements to have text-align center and transferred the float left property from the A element to the LI element.

You can view the updated jsFiddle here: http://jsfiddle.net/ABC123/27/

$(function() {
    var lis = $('#menu ul li');
    lis.css('width', ($('#menu ul').outerWidth() / lis.length) + 'px');
});

Answer 7

Answer №4

If you're looking to change the width of a menu dynamically, you could try something like this: Check out the demo here

$(function() {

// Function to change the width of the menu
changeWidth(100); // This value could also be set in CSS

function changeWidth(menuWidth) {
    $('#menu').css({'width': menuWidth + '%'});
    var menuWidth = $('#menu').width();
    var menuItems = $('#menu li').size();
    var itemWidth = (menuWidth / menuItems) - 2;

    $('#menu a').css({'width': itemWidth + 'px'});
} });

Additionally, adding a listener for window resize events could provide a more interactive experience.

Answer 8

If you're looking to change the width of a menu dynamically, you could try something like this: Check out the demo here

$(function() {

// Function to change the width of the menu
changeWidth(100); // This value could also be set in CSS

function changeWidth(menuWidth) {
    $('#menu').css({'width': menuWidth + '%'});
    var menuWidth = $('#menu').width();
    var menuItems = $('#menu li').size();
    var itemWidth = (menuWidth / menuItems) - 2;

    $('#menu a').css({'width': itemWidth + 'px'});
} });

Additionally, adding a listener for window resize events could provide a more interactive experience.

Answer 9

Answer №5

.custommenu1{
    width:100%;
    padding:3px;
    height:30px;
    background-color:#282828;
}

Set the width to 100% for the custommenu1 class and do not specify a width for the menu.

$(function() {

    adjustWidth();

    function adjustWidth(){
        var menuItems = $('#menu li').length;
        var menuWidth = $('#menu').width();
        //alert(menuWidth);
        var itemWidth = (menuWidth/menuItems)-2;

        //$('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

Answer 10

.custommenu1{
    width:100%;
    padding:3px;
    height:30px;
    background-color:#282828;
}

Set the width to 100% for the custommenu1 class and do not specify a width for the menu.

$(function() {

    adjustWidth();

    function adjustWidth(){
        var menuItems = $('#menu li').length;
        var menuWidth = $('#menu').width();
        //alert(menuWidth);
        var itemWidth = (menuWidth/menuItems)-2;

        //$('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

Dynamic resizing navigation with JQUERY

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to make views in React Native adjust their size dynamically in a scrollview with paging functionality

Visibility of the br tag is not detected

Changes made in React are not reflected in the DOM

Provide users with the option to select a specific destination for saving their file

PUPPETER - Unpredictable pause in loop not functioning as expected

What could be causing justify-content: flex-start; to not function as expected?

Webpack automatically prepends "auto/" to script tags in the compiled HTML file

What is the optimal method for saving and organizing data in SQL?

Adding a subtle gradient to the image, just ahead of the SVG

Admin template system for CodeIgniter

HTML5 canvas game issue: background fails to load

I am experiencing an issue where the Javascript keydown event does not recognize the character "@" in the EDGE browser

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

methods for transferring JSON data from JavaScript to PHP

What methods can be used to prevent accessing 'res' after the resolution of getServerSideProps?

Maximizing page space with ReactJS and advanced CSS techniques

Retrieve data from a JSON array using either JavaScript or PHP

Middleware for enabling the Cross-Origin Resource Sharing (CORS) functionality to efficiently manage preflight

Utilizing Codeigniter Ajax to return multiple rows in an ajax call, implementing two conditions (AND) in the SELECT query within the model file

What is the process for implementing a security rule for sub-maps with unique identifiers in Firebase?