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

Utilizing Jquery Effectively to Dynamically Alter Images Based on Ids

Knockout Mapping is causing a complete re-render of all elements

The implementation of $(this).addClass within AJAX success is not yielding the desired results

Establishing Fixed Positioning

How can you insert text onto a page with restricted space?

Organize WordPress loop posts based on tags in real-time

Optimizing HTML5 metatags and styles for a mobile application

I am encountering an issue where my input is moving to the following line after the initial one. What could be

What's the Purpose of Using an Arrow Function Instead of Directly Returning a Value in a React Event Handler?

Styling a nested scrollbar using JQuery

What is the process for altering the color of an HTML output depending on its values?

Despite successful installation, node remains elusive on Ubuntu VPS

Troubarked by problems NodeJS faces when trying to establish a connection with CosmosDB using a connection

Sort through each individual column in the table

Interactive drop-down menus created on the fly

The styling for material UI's default endAdornment is lacking accuracy

Registering the service worker resulted in an error stating "Undefined is not a function"

Scrolling horizontally in ng-grid version 2.0.11

Utilize jQuery to seamlessly transfer each recorded audio file from rows to corresponding input fields within the table

Tips for making an appended element match the height of an image