Configure UL element as a dropdown on mobile devices and expand it to full width on desktop screens

Circumstances

This HTML code is intended to create a horizontal <ul> element that spans the entire width of the 

<div class="list__wrapper">
container on desktop screens with a minimum width of 1024px. However, for mobile devices with a maximum width of 1024px, the list should display as a dropdown menu.

Snippet

Challenges

  1. Ensure all <li> elements occupy the full width without any extra space on both desktop and mobile views.
  2. Even when the 
    <div class="list__wrapper">
    expands, make sure the <li> items take up all available space, which may involve adjusting the CSS rule max-width: 50% applied in the .list__wrapper class.

Current Display

  1. Desktop Preview https://i.stack.imgur.com/mFUso.png

  2. Mobile (collapsed) https://i.stack.imgur.com/EdHO1.png

  3. Mobile (expanded) https://i.stack.imgur.com/xVGPe.png

Intended Outcome

  1. Desktop View https://i.stack.imgur.com/KxYiS.png

  2. Mobile (collapsed) https://i.stack.imgur.com/pHD8K.png

  3. Mobile (expanded)

https://i.stack.imgur.com/rwxfD.png

Source Code:

var wind = $(window);
var windowWidth = $(window).width();
wind.on('resize load', function() {


    if (windowWidth < 1024) {
        $("ul").on("click", ".init", function() {
            $(this).parent().children('li:not(.init)').toggle();
        });

        var allOptions = $("ul").children('li:not(.init)');
        $("ul").on("click", "li:not(.init)", function() {
            allOptions.removeClass('selected');
            $(this).addClass('selected');
            $("ul").children('.init').html($(this).html());
            allOptions.toggle();
        });
    }
});
.list__wrapper {
  max-width: 50%;
  background-color: grey;
}
li {
  list-style-type: none;
  background-color: black;
  color: white;
}

@media screen and (max-width: 1024px) {
  ul { 
    border: 1px #000 solid;
    text-align: center;
    width: 100%;
  }
  li {
    width: 100%;
  }
  li.init { 
    cursor: pointer; 
  }
}

@media screen and (min-width: 1024px) {
  .list {
    display: flex;
    justify-content: center;
    flex: 1;
    align-items: center;
    
  }
  .list li {
    padding: 10px;
    color: white;
    width: 25%;
    text-align: center;
    border-left: 1px solid white;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__wrapper">
    <ul class="list">
        <li class="init">Option 0</li>
        <li data-value="value 1">Option 1</li>
        <li data-value="value 2">Option 2</li>
        <li data-value="value 3">Option 3</li>
    </ul>
</div>

jqueryhtmlcsshtml-lists

Answer №1

ul initially has default margin and padding values, but I have reset these values and removed the max-width property.

var wind = $(window);
var windowWidth = $(window).width();
wind.on('resize load', function() {


    if (windowWidth < 1024) {
        $("ul").on("click", ".init", function() {
            $(this).parent().children('li:not(.init)').toggle();
        });

        var allOptions = $("ul").children('li:not(.init)');
        $("ul").on("click", "li:not(.init)", function() {
            allOptions.removeClass('selected');
            $(this).addClass('selected');
            $("ul").children('.init').html($(this).html());
            allOptions.toggle();
        });
    }
});
.list__wrapper {
  background-color: grey;
}

ul {
  padding:0;
    margin:0;
}
li {
  list-style-type: none;
  background-color: black;
  color: white;
}

@media screen and (max-width: 1024px) {
  .list__wrapper {
  background-color: grey;
}
  ul { 
    border: 1px #000 solid;
    text-align: center;
    width: 100%;
    padding:0;
    margin:0;
  }
  li {
    width: 100%;
  }
  li.init { 
    cursor: pointer; 
  }
}

@media screen and (min-width: 1024px) {
  .list {
    display: flex;
    justify-content: center;
    flex: 1;
    align-items: center;
    
  }
  .list li {
    padding: 10px;
    color: white;
    width: 25%;
    text-align: center;
    border-left: 1px solid white;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="list__wrapper">
    <ul class="list">
        <li class="init">Option 0</li>
        <li data-value="value 1">Option 1</li>
        <li data-value="value 2">Option 2</li>
        <li data-value="value 3">Option 3</li>
    </ul>
</div>

Answer №2

1.Ensure that all list items (<li>) on the page occupy the entire width, removing any leftover space on desktop and mobile devices.

@media screen and (max-width: 1024px) {
  ul { 
    border: 1px #000 solid;
    text-align: center;
    width: 100vw; // represents the full vertical width of the screen
  }
  li {
    width: 100%; 
  }
  li.init { 
    cursor: pointer; 
  }
}

2.When the 

<div class="list__wrapper">
expands, ensure that the list items (<li>) utilize the available space fully. Adjustments may be required even if changing the max-width to 50% in the .list__wrapper class is insufficient.

@media screen and (min-width: 1024px) {
      .list {
        display: flex;
        justify-content: center;
        flex: 1;
        align-items: center;

      }
      .list li {
        padding: 10px;
        color: white;
        flex: 0 0 25%; // utilizing flexbox for flexible sizing
        //flex:grow(1/0) shrink(1/0) width;
        text-align: center;
        border-left: 1px solid white;
      }
    }

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

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs

What could be hindering the animation of this button?

I found this snippet on a coding blog, where the design looked perfect: However, when I tried implementing it, the button displayed a static gradient instead of animated. Additionally, aligning the text in the center vertically seems to be trickier than e ...

htmlcsscss-animations

As you scroll, this smooth marquee effect gently shimmers with each movement

I've been trying out this code to create a scrolling marquee text, but the issue is that after 7000 milliseconds it starts to jitter, which doesn't make the text look good. Any suggestions on how I can fix this problem? Let me know! <script ...

javascriptjqueryhtmlmarquee

How to prevent all boxes in jQuery from sliding up at the same time

I am encountering an issue with 36 boxes where, upon hovering over the title, the hidden text below it should slide up. However, all 36 boxes are sliding up simultaneously instead of just the one being hovered over. Below is the script I am currently using ...

javascriptjqueryanimationjquery-animateslide

The fullCalendar plugin fails to display properly when placed within a tab created using Bootstrap

My current challenge involves integrating fullCalendar into a Bootstrap tab. It works perfectly when placed in the active tab (usually the first tab), however, when I move it to another tab that is not active, the calendar renders incorrectly upon page loa ...

javascripthtmljqueryfullcalendarbootstrap-5

Troubles with jQuery mobile functionality when utilizing hyperlink urls within a table

Currently, I am utilizing jQuery mobile to populate a table using ajax. One of the fields in the table is a hyperlink (href) that has a class assigned to it to trigger an alert on the screen. However, the alert does not appear when clicked: I have attempt ...

javascriptjqueryhtmlajaxjquery-mobile

What is the specific character code assigned to the "Enter" key on a

Check out this code snippet: http://jsfiddle.net/YttKb/ In my javascript, I am trying to add a new line of text using utf-8 coding. Which character should I use to make a new line? It seems like \n only creates a line break, not a new line of text. ...

javascripthtmlunicode

Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes. By squares, I mean that the colored areas should have equal width and height. Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Removing consecutive pipe symbols in JavaScript

Looking for a way to remove excess pipe characters before a certain pattern in JavaScript. var testString="||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||f_test!!3!!||f_test!!4!!||f_test!!5!!||"; output ="||f_test!!3!!| ...

javascriptjquery

Choose the option to replace "&" using regular expressions

I am currently working on a function that allows for selecting options and dynamically replacing a specific character in the URL. & The goal is to replace &amp; with & In the given code snippets, Jquery and Perl Template (jquery) are u ...

jqueryregex

What are the steps for capturing video using openCV in a python program?

I am facing a challenge in figuring out how to capture a video using openCV. While I have managed to display the video on an html template with the existing codes, I am uncertain about which codes are needed to actually record the video. -camera.py- i ...

pythonhtmlopencvflask

What is the best way to present a Python list in individual lines on an HTML webpage?

This might be a simple question, and I apologize if I haven't explained it clearly. This is my first time working with HTML, and I'm using a given program that I don't fully comprehend. In the python program, app.py, I read a list of string ...

pythonhtmlflask

Implementing text sliding effect upon hovering over an image using CSS

Is there a way to make text appear when hovering over an image, sliding in from the top and covering only 50% of the image height? Here's the code I have so far: <img style="background-color:#3b283e; float:left;" src="images/f1.jpg" /> <div ...

htmlcsshover

Issue with overflow:scroll displaying incomplete div contents

I am attempting to create a sidebar with a fixed position, featuring a small header and a scrollable content area below it. The issue I am facing is that I am unable to scroll through the entire content within the div, resulting in some parts being cut of ...

htmlcss

Using a varnish proxy to transmit server-sent events

My website is currently operating behind a Varnish proxy, but I am experiencing issues with server-sent events. The connections remain open indefinitely without receiving any content, and Varnish waits for the stream to end before forwarding it to the brow ...

htmlvarnishserver-sent-events

The logo image dynamically switches as the user scrolls through various colored sections

Looking to create a feature that changes the logo image as users scroll through different colored sections. Specifically, switching between dark and light themes. a) How can we determine if the section the user is currently on has a dark or light theme? b ...

javascriptjquery

What is the best way to implement an if-else structure in this code?

Can anyone help me with converting this code into an if/else statement? I want it to display certain content if 'Rental' is true, and other content if it's false. The PHP tags are making it difficult for me to follow. <?php if( get_ ...

phphtml

What is the best way to alphabetically arrange an array of names in a JavaScript.map?

I am attempting to alphabetically sort an array of first names using JavaScript map function. Additionally, I aim to remove the "undefined" row from the final results: function contacts_callback(obj) { var contactinfo = obj.contacts .filter( ...

javascriptjqueryarrayssorting

Display Quantity of Current Website Visitors

Similar Question: how to track website visitors using java script or php I am looking to retrieve the current number of viewers on a webpage that has an embedded stream. Is there a method to accomplish this utilizing PHP and AJAX, in order to display ...

phpjavascriptjqueryajaxserver-side

Tips for preparing HTML content with Jquery's "ON" method?

My jQuery Accordion is functioning properly, but I'm encountering issues when trying to load the accordion content dynamically from a database or JSON onto the page. The problem arises because the DOM doesn't have information about the newly inje ...

javascriptjqueryhtml