Creating a dynamic menu layout using CSS

I've experimented with various methods to create a fluid menu, but none have been successful. Currently, I have an interactive menu that sometimes displays 6 items and other times 7 items.

When I have 7 items, the menu aligns perfectly across the width, but when I have only 6 items, there is excess space on the right side of the menu.

I am looking for a solution that doesn't require me to constantly change the code every time I activate or deactivate an item and I believe CSS might hold the key to solving this issue.

Is it possible to fill up the empty space with the items without resorting to tables?

HTML:

<nav id="menu_container">
    <ul id = "menu">
        <li class="menu_1 active"><a href="/home/" title="Home">Home</a></li>
        <li class="menu_2"><a href="/test/" title="test">test</a></li>
        <li class="menu_3"><a href="/test-2/" title="test 2">test 2</a></li>
        <li class="menu_4"><a href="/bigger-menu-item/" title="bigger-menu-item">bigger-menu-item</a></li>
        <li class="menu_5"><a href="/another-big-menu-item/" title="another-big-menu-item">another-big-menu-item</a></li>
        <li class="menu_6"><a href="/contact/" title="Contact">Contact</a></li>
    </ul>                   
</nav>

CSS:

#menu_container {
    background: transparent url('/img/menu-bg.png') no-repeat;
    float:left;
    position:relative;  
    z-index: 999999;
    width: 690px;
    height:42px;
    margin:29px 0 29px 19px;
}

#menu_container > ul {  
    padding: 0;
    margin: 0;
    margin-left:29px;
}

#menu_container > ul > li {
    color: #ffffff;
    float: left;
    list-style-image: none;
    position: relative;
    text-align:center;
    height:31px;
    padding:11px 7px 0;
}

Assigning a specific width to the items results in some text spanning over two rows, which is not desirable.

I hope my issue is clear. Thank you for any help you can provide.

Update: View the jsFiddle here: http://jsfiddle.net/UDv2A/1/

Answer №1

To center the contents, consider removing the float and displaying the lis as inline-block:

#menu_container > ul {
    padding: 0;
    text-align: center;
}
#menu_container > ul > li {
    color: #ffffff;
    display: inline-block;
    list-style-image: none;
    position: relative;
    text-align: center;
    height: 31px;
    padding: 11px 7px 0;
}

For expanding the widths of the lis, you can use display: table;:

#menu_container > ul {
    padding: 0;
    margin: 0 auto;
    display: table;
    width: 100%;    
}
#menu_container > ul > li {
    color: #ffffff;
    list-style-image: none;
    position: relative;
    text-align: center;
    height: 31px;
    padding: 11px 7px 0;
    display: table-cell;
    width: auto;
}

For fluid resizing, ensure that #menu_container has a width of 100%.

Answer №2

Here is an alternative approach:

Check out the code on jsfiddle

/* Adjusting width for five items */
#menu_container > ul > li:first-child:nth-last-child(5),
#menu_container > ul > li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}


/* Modifying width for six items */
#menu_container > ul > li:first-child:nth-last-child(6),
#menu_container > ul > li:first-child:nth-last-child(6) ~ li {
    width: 16.66%;
    width: calc(100% / 6);
}

Answer №3

Why not experiment with using a variable width of 100% instead of a fixed width for a different look?

Answer №4

@pscheuller just shared the correct method for filling the container.

In my opinion, one downside of these styles is that the padding on items is not consistent. Items with longer text will end up with larger paddings. Personally, I like to have equal space on both the left and right sides, so I center the <ul> within the container and provide each item with the same padding.

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

Deactivate the second subradio button when the first option is selected and vice versa

Need some assistance, hoping for your help. I have 2 choices with subcategories. 1 - Option A ---- variant 1 ---- variant 2 ---- variant 3 2 - Option B ---- variant 4 ---- variant 5 ---- variant 6 Check out my code here Users must choose betwe ...

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

Utilizing J Query and AJAX to retrieve user details through API without the need for page refresh

I'm new to using Ajax and Jquery. 1) When I try to add a new user using the post method through a form within an HTML Modal, the Modal doesn't automatically close upon clicking the Submit button. I end up having to refresh the page to see if the ...

Sliding left and right with the help of jQuery

Hey there! I'm currently working on designing a sliding menu bar that can move left or right based on user interaction with arrow buttons. When the user hovers over the right arrow, the navigation bar smoothly slides from right to left until it reache ...

Methods for automating the clicking of a hyperlink within Bootstrap tabs programmatically

I am attempting to programmatically trigger a click event on a specific href link within Bootstrap tabs. For reference, here is the link to the codepen: linkToCodePen <ul class="nav nav-tabs" id="myNavTabs"> <li class="active">&l ...

Issue with jQuery click event not triggering on dynamically created input boxes for removal

Having some trouble with the remove buttons not working on dynamically generated text boxes. The click function doesn't seem to be triggering, and I'm a bit stuck. Any ideas on what might be causing this issue? Take a look at the following co ...

Preserve Chinese characters using Spring-MVC in Java

How can I properly save Chinese characters from a form submission into the database? I have already specified the contentType in the jsp like this: <%@ page contentType="text/html;charset=UTF-8" %> I have also included this tag within the head sec ...

Seeking guidance on resolving issues with this div table

After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include: The spacing on the right side is too large. Tables always appear stacked without any spacing in bet ...

When the AJAX function is called again, the previous loading process is interrupted, without the use of jQuery

I have created a function that loads a URL into an element, but it seems to be encountering issues when called repeatedly in a loop to load multiple elements. The current load operation stops prematurely: function loadDataFromURL(url, elementId) { var ...

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...

Display the homepage if a user accesses a page intended for an ajax request

Currently, I am utilizing jQuery to create a straightforward website. The main page is called 'index.html' and it has the capability to load different content (such as 'info1.html' or 'info2.html') through jQuery ajax requests ...

Bootstrap card elements are failing to display properly, deviating from the expected

My Bootstrap cards are displaying strangely. Instead of having a border, white padding, and a white background like the examples I've seen, mine look like plain text without any styling. Here is an image for reference: https://i.stack.imgur.com/9MsP ...

Show the outcome of a mysql_query in PHP directly within MYSQL

I've been trying to figure out how to display my MySQL results in PHP using tables. Despite doing a lot of research on this topic, I haven't been able to find a solution yet. Here's the code that I have: <html> <head> </head& ...

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

Retrieving a unique custom data-attribute using select2 on a <select> element

If you were presented with the following HTML5 snippet: <select id="example"> <option value="AA" data-id="143">AA</option> <option value="BB" data-id="344">BB</option> </select> $("#example").select2(); What i ...

Responsive cards using Bootstrap styling

Currently trying my hand at mastering flexbox for responsive design with Bootstrap. In the picture, there are 4 cards where 2 should be displayed at the bottom and the other 2 at the top, but on mobile phones, they should all stack at the bottom. I attempt ...

Is there a way to create a header that fades out or disappears when scrolling down and reappears when scrolling up?

After spending some time researching and following tutorials, I have not made much progress with my goal. The task at hand is to hide the top header of my website when the user scrolls down and then make it reappear when they scroll back up to the top of t ...

What is the best way to create a scrollable nested div?

Link to Image My goal is to keep the red section fixed while allowing only the blue section to scroll when there is overflow. The red section consists of two divs. I have attempted using position: fixed to achieve this, but encountered issues such as ove ...

Styling with CSS 3: Adding Shadows and Rounded Edges

Encountered an intriguing discovery and I'm hoping you can shed some light on it. Here's the code in question: width:940px; margin:0 auto; padding:13px 29px 39px 31px; background:#fff; -webkit-border-radius:10px; -moz-border-radius:1 ...