Ensure that each child li in the responsive dropdown menu has a width equal to the longest

Hello! I am currently working on a responsive dropdown menu and have a question regarding the width of the child li elements. Is it possible to make all the child li elements have the same width as the longest child li element? If so, what do I need to change in my code?

If you would like to take a look at the code, I have uploaded it to jsfiddle. The crucial part can be found at the bottom under "WIDE: Nav".

Check out the code here

Here is the HTML:

<nav id="twNav-s1" class="twNav twNav-vertical twNav-left">
   <ul>
      <li>
         <div class="nav-sep"></div>
         <a href="#">Blog</a>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">About</a>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">Media</a>
         <ul>
            <li>
               <div class="nav-sep"></div>
               <a href="#">Stuff</a>
            </li>
            <li>
               <div class="nav-sep"></div>
               <a href="#">StuffStuff</a>
            </li>
            <li>
               <div class="nav-sep"></div>
               <a href="#">StuffStuffStuff</a>
            </li>
         </ul>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">Contact</a>
      </li>
      <li>
         <div class="nav-sep"></div>
      </li>
   </ul>
</nav>

And here is the CSS:

.twNav {
    background: rgb(86,107,132);
    -webkit-box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75);
    box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75);
    border-right: 1px solid #8aa5c7;
    position: fixed;
    opacity: 0.97;
}

.twNav a {
    display: block;
    color: #fff;
    font-size:13.5pt;
    font-weight: 300;
    text-decoration:none;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}

/* More CSS styles... */
htmlcssdrop-down-menuresponsive-design

Answer №1

To customize the appearance of dropdown menu items, consider adding a specific class such as "menu-item" to the <a> tags and setting a fixed width for them, e.g. 100px.

See an example here.

HTML:

<li>
    <div class="nav-sep"></div>
    <a href="#" class="menu-item">Option A</a>
 </li>
 <li>
    <div class="nav-sep"></div>
    <a href="#" class="menu-item">Option B</a>
 </li>
 <li>
     <div class="nav-sep"></div>
     <a href="#" class="menu-item">Option C</a>
 </li>

CSS:

.menu-item {
    width: 100px;
}

Answer №2

After much research, I discovered that the initial approach I wanted to take was not feasible. However, thanks to a helpful solution using jQuery, I was able to achieve my desired outcome.

Check out this helpful thread on setting nested li's width

For a practical example of how I implemented this solution, you can view it here: http://jsfiddle.net/0cny47a9/2/

Below is the script that I used:

$(document).ready(function(){

    $("#menu-header-menu > li > ul").each(function() { // Iterating over menu items with submenu

    var Widest=0; // Initialize widest LI as zero
    var ThisWidth=0; // Temporary width variable for current LI
    var ParentWidth=0; // Width of Parent li

        ParentWidth=parseInt($(this).css('width')); // Get parent LI width
        $($(this).children()).each(function() { // Loop through children LIs to find the widest one
          ThisWidth=parseInt($(this).css('width')); // Get current LI width

        if (ThisWidth>Widest) { // Check if this LI is the widest
                Widest=ThisWidth; 
                if (Widest<ParentWidth) {
                    Widest=ParentWidth;
                }
            }
        });

        $("#menu-header-menu > li > ul > li > ul").each(function() {
            $(this).children().css('width',ParentWidth);
        });

        Widest+='px'; // Add unit
        $(this).children().css('width',Widest);
    });

});

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

Tips on effectively centering a wide div

After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...

javascriptjqueryhtmlcss

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

javascripthtmlprimefaces

Is it possible to drag the parent element but only select the text within the child

How can I make the parent div draggable, yet keep the text in the child span selectable? <aside draggable="true" id="dragme"> This is an aside, drag me. <span id="copyme" draggable="false">But copy me!</span> </aside> A simila ...

javascriptcsshtmldraggable

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

Utilize jQuery to apply a border and background color to a table row when hovering over it

Is there a way to change the border of a table row along with its background color when the mouse hovers over it? Currently, I can only modify the background color using the following code: $(document).ready(function() { $(function() { $(&apos ...

jquerycss

developing a dropdown menu feature

I'm struggling with a small issue related to my drop-down menu function. My goal is to hide the visibility of a menu tab after it has been clicked for the second time. Below is the code snippet I've been working on: HTML:- <nav class="clea ...

javascriptjqueryhtmlcss

What could be causing the next button to not display the content on the following page when clicked?

Hello, I'm new to programming and I'm working on creating a complaint page using Bootstrap, CSS, and JavaScript. I encountered an issue when trying to hide the content of the next page using the following CSS code: .needs-validation fieldset:not( ...

htmlcssbootstrap-4

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...

javascripthtmlcss

What causes a block element to not stretch to match the width of its parent when it is in a fixed position?

I am currently developing a fixed horizontal navigation bar that spans the entire width of the screen. However, when I attempt to make its position fixed, the unordered list element only occupies the width required to contain its content. Considering that ...

htmlcss

Retrieving POST information from a PHP script

I have 3 php files and I need to extract the month data from form1.php for use in form3.php. However, the data processing also involves form2.php. How can I specifically retrieve the month from form1 and display it in form3? form1.php <form action=&quo ...

phphtml

Changing the size of the logo as you scroll through the page

I have implemented the following code to resize the logo as I scroll down the page. $(document).on('scroll', function() { if ($(document).scrollTop() >= 10) { $('.logo img').css('width', '50px'); } else ...

javascriptjqueryhtmlcss

Guide on displaying link parameter information on a separate webpage using only JavaScript

While doing some research, I came across an issue. I have a page called specifications.html with three links: details.html?id=1, details.html?id=2, and details.html?id=3. My goal is to display the details of each link when someone clicks on it. For examp ...

javascripthtml

Conceal or eliminate redundant choices in dropdown menu

I am currently working with the WebForms framework and I have encountered an issue with my dropdownlist control in one of my Forms. The Select option is sometimes being added twice, causing duplication in my form. I am looking for a way to either remove th ...

c#htmlcssasp.net

Alignment of Bootstrap thumbnails in a horizontal layout

After adding the thumbnail class to my thumbnails div, I noticed that some of the thumbnails were smaller in size than others. Wanting them all to have the same height, I decided to give each thumbnail a fixed height of 210px. However, this caused the sm ...

javascriptjqueryhtmlcsstwitter-bootstrap

Changing color of the collapsible icon and content when hovered over

Currently, I am working on creating collapsible content for a FAQ dropdown. The button has a 'plus' icon which changes to a 'minus' icon when clicked. My goal is to change the color of the pre-clicked 'plus' icon to white when ...

htmlcssbuttoncollapsable

Steps for linking a page to a modal without embedding the page's content within the modal

Here is a snippet of code for a modal (from Twitter Bootstrap) that I am currently working with: <!-- Large Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large Modal</button&g ...

javascriptphpjqueryhtmltwitter-bootstrap

Convert a String to JSON using either JavaScript or jQuery

Currently, I am developing a JavaScript animation script and I am aiming to allow individuals to define behavior declaratively within the HTML. This is the format I envision for my HTML: <div data-animation="top: 600, left: 600, opacity: 1, start: 0.2 ...

javascriptjqueryhtmljson

The best way to correctly present an HTML document within a UITextView

I am facing an issue with displaying an HTML document inside a UITextView in my iOS app. I have successfully converted the HTML document to an NSAttributedString using a specific extension. extension String { var htmlToAttributedString: NSAttributedStr ...

htmliosswiftuitextviewnsattributedstring

interaction & portal

I am currently managing a website that includes an iframe. Both the main site and the embedded site within the iframe are verifying the $_SESSION["login"]. Therefore, if the session expires, the user will be automatically logged out. The issue I'm fa ...

phpjavascripthtml