Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    Have menu filling up next column, as menu expands

    HTML CSS
    2
    6
    45
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cthornval last edited by

      I am working on a page where I currently have a menu of 12 projects. On hover a project is underlined and on click a project expands vertically displaying a description.

      I have used a table to layout this menu. I wish to create a function where the menu is only able to expand untill a certain point, before it begin "filling up" the next column with the remainder of the menu.

      Below I have attached a mock-up GIF, showing the desired function. I have also pasted in some of my code.

      Please forgive my simplistic description, I am still in the process of familiarizing myself with coding.!

      <table id="content">
          <tr>
              <td id="Project1">
                      Wer Baut Der Stadt 2019
                  <br>
                      <p class="Describtion1" style="display:none;">
                      Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. 
                      </p>
                  <br>
              </td>
              <td>2019</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
      
      body {
        font-family: 'Helvetica Neue';
        text-align: center;
      
        position: absolute;
        width: 100%;
      }
      
      #content {
        width: 100%;
        border-spacing: 0;
      
        margin-top: 200px;
      
      }
      
      #content td span {
        text-overflow: ellipsis;
        overflow : hidden;
      
        display: block;
      
        border-left: 7px solid #fff;
        border-right: 7px solid #fff;
        padding: 16px;
        vertical-align: top;
        text-align: left;
        font-size: 45px;
      
      }
      
      
      #content td {
        vertical-align: top;
        font-size: 45px;
      
      }
      
      
      #content td:nth-child(odd) {
        width: 30%;
      }
      
      #content td:nth-child(even) {
        width: 3%;
      }
      
      
        #Project1:hover {
          text-decoration: underline;
            cursor: default;
        	}
      
      
      p {
      
      display: inline-block;
      text-align: left;
      padding-left:30px;
      padding-right:30px;
      font-size: 30px;
      
      }
      
      ![![0_1578575097296_Scooch.gif](Uploader 100%) <script>
      
                 $(document).ready(function(){
                   $("#Project1").click(function(){
                     $("p.Describtion1").toggle();](![image url](![image url](![image url](image url))))
                   });
                 });
      
             </script>
      

      alt text

      Reply Quote 0
        1 Reply Last reply

      • avan
        avan last edited by avan

        @cthornval
        Great job phrasing your question and providing enough info to answer your question.

        Here is what you can do.

        Codepen version: https://codepen.io/avansardar/pen/MWYVGzq

        I had to change some things around. You should still be able to achieve what you set out to do. The key is the Flexbox.

        HTML:

          <div class="container">
              <ul>
                <li class="li_element">
                  1
                    <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
                <li class="li_element">
                  2
                  <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
                <li class="li_element">
                  3
                  <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
                <li class="li_element">
                  4
                  <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
                <li class="li_element">
                  5
                  <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
                <li class="li_element">
                  6
                  <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
                <li class="li_element">
                  7
                  <p>
                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                </li>
              </ul>
            </div>
        

        CSS:

        ul {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          height: 100vh;
        }
        li {
          height: 100px;
        }
        .expand{
          height: 140px;
        }
        

        JS:

        $(document).ready(function(){
            $(".li_element").each(function(index) {
            $(this).find("p").first().hide();
            });
        
             $("li").click(function(){
               $(this).find("p").first().toggle();
               $(this).toggleClass("expand");
             });
        });
        

        Let me know what questions you have.

        Reply Quote 0
          1 Reply Last reply

        • avan
          avan last edited by avan

          @cthornval
          Great job phrasing your question and providing enough info to answer your question.

          Here is what you can do.

          Codepen version: https://codepen.io/avansardar/pen/MWYVGzq

          I had to change some things around. You should still be able to achieve what you set out to do. The key is the Flexbox.

          HTML:

            <div class="container">
                <ul>
                  <li class="li_element">
                    1
                      <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                  <li class="li_element">
                    2
                    <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                  <li class="li_element">
                    3
                    <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                  <li class="li_element">
                    4
                    <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                  <li class="li_element">
                    5
                    <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                  <li class="li_element">
                    6
                    <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                  <li class="li_element">
                    7
                    <p>
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                  </li>
                </ul>
              </div>
          

          CSS:

          ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 100vh;
          }
          li {
            height: 100px;
          }
          .expand{
            height: 140px;
          }
          

          JS:

          $(document).ready(function(){
              $(".li_element").each(function(index) {
              $(this).find("p").first().hide();
              });
          
               $("li").click(function(){
                 $(this).find("p").first().toggle();
                 $(this).toggleClass("expand");
               });
          });
          

          Let me know what questions you have.

          Reply Quote 0
            1 Reply Last reply

          • C
            cthornval last edited by cthornval

            Hey Avan

            I changed my page according to your work above and I am very please with how the flexbox operates and is so dynamic! Thank you so much!

            Only, I ran into some small complications:
            The reason I originally used the table, layout was because I was able to perfectly align a project with a year, and on toggle, everything remained aligned. also the years were placed in the next column and so everything was perfectly aligned both horizontally and vertically.

            The best way to recreate that, is to place a span containing the year after, <li class="li_element"> hereafter I have manually spaced that span to be aligned, but doing it this way honestly makes me feel like a real noob. What's the best way around this, do you think?

            Also there's a small issue with the undelining, as I wish to only have the project underlined and not the year. Rigt now I have span inside of a span (as to align), but it's tricks to select only one of these in css.

            I really appreciate your help!

            heres some new code

            <div class="content">
            
                <ul style="list-style: none;">
            
            
                    <li class="Project">
                          
                                <span id="myBtn">
                                    Wer Baut Der Stadt
                                 
            
                                <span> 
                                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp2019
                                </span>
                                </span>
            
                                    <div class="Describtion">
                                        <p style="display:none;">
                                        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. 
                                        </p>
                                    </div>
            
                                    <div id="myModal" class="modal">
                                        <div class="modal-content">
                                            <span class="close">&times;
                                            </span>
                                            <p>Some text in the Modal..
                                            </p>
                                        </div>
                                    </div>
                    </li>
            
                    li {
                      padding-top: 40px;
                    }
                    
                    
                    body {
                      font-family: 'Helvetica Neue';
                      font-size: 45px;
                    }
                    
                    
                    .content {
                      margin-top: 150px;
                    }
                    
                    
                    
                    .Project.myBtn hover{
                      text-decoration: underline;
                    }
                    
                    .Project:hover  {
                      cursor: default;
                    }
                    
                    
                    
                    p {
                    
                    display: inline-block;
                    text-align: left;
                    
                    padding-left:30px;
                    padding-right:30px;
                    font-size: 30px;
                    
                    width: 700px;
                    
                    }
            Reply Quote 0
              1 Reply Last reply

            • avan
              avan last edited by

              In terms of alignment and formatting I would recommend using the css attribute 'margin'.
              Try adding margin to any element to see its effect. You can 'margin' for all around margin or margin-left, margin-right, margin-top or margin-bottom. Try messing with that and see if that helps you achieve what you trying to do. Let me know if I misunderstood your question.

              Reply Quote 0
                1 Reply Last reply

              • C
                cthornval last edited by

                Thank you again!
                I ended up using margin-right, and float properties 🙂 It's working pretty great in my opinion 🙂

                Reply Quote 0
                  1 Reply Last reply

                • avan
                  avan last edited by

                  @cthornval

                  Awesome! Glad to hear. Do you mind selecting one of my responses as the correct answer? Thanks.

                  Reply Quote 0
                    1 Reply Last reply

                  • First post
                    Last post